We are in the process of evaluating the igHierarcgicalGrid, but we have run into a problem. We managed to get it to work with just one level, but when we try to display a childband the grid does not render at all anymore.
We have a simple list of person objects which in turn have a list of appointments.
Could you show how to get the grid to display the persons with their appointments when using the Razor syntax?
Hi,
You can check out the igHierarchicalGrid samples at http://samples.infragistics.com/jquery/hierarchical-grid
In some of them (Multiple Levels Multiple Layouts and Row Selectors for example) you can open the Code View section (just below the sample grid)'s "SELECT SAMPLE SOURCE FILE TO VIEW" drop-down.
In there you will notice that there are 2 view pages available (.aspx is with MVC2's Spark view engine and .cshtml is with MVC3's Razor view engine).I think these Razor syntax samples will be exactly what you need.However, if have any problems, please let us know. Cheers and good luck,Borislav
After looking at the samples and playing around with our code some more we still did not manage to get it to work. When running our test in Firefox the grid does not appear at all, but when we run it in IE the following error occurs:
'length' is null or not an object ig.ui.min.js, line 1character 323973.
So I am wondering if we are forgetting something or if there is an error in the script. I have attached our project, so you might have a look at it.
The problem appears to be in the fact that you haven't defined the AccountNumber column for your child layout.
Generally speaking, you always need to defined the columns which serve as your primary and foreign key.This means that you need to define the AccountNumber column in the Foos column layout.I tried it but I haven't worked with VB for ages so it didn't work (Razor VB syntax is crazy :D).
Can you please make the correction and pase the Foos layout definiton in your next reply?Thanks in advance!
PS: Note that the allowed column data types are: number, bool, date and string. You used 'int' a couple of times which isn't correct and may cause trouble.
Thanks for the reply.
I have tried your suggestions, but I am still receiving the same error in IE and Firefox just doesn't display the grid at all.
Here is my modified code for the ColumnLayouts:
.ColumnLayouts(Function(layout) layout.[For](Function(x2) x2.Foos) _ .PrimaryKey("FooNumber") _ .ForeignKey("AccountNumber") _ .AutoGenerateColumns(False) _ .Columns(Function(childCol) childCol.[For](Function(x3) x3.AccountNumber).DataType("number").HeaderText("AccountNumber") childCol.[For](Function(x4) x4.FooNumber).DataType("number").HeaderText("FooNumber") childCol.[For](Function(x5) x5.FooName).DataType("string").HeaderText("FooName") End Function) End Function) _
We finally got it to work!
We replaced the following line:
.ClientDataSourceType(ClientDataSourceType.JSON) _ .DataSourceUrl(Url.Action("GetAccountList")) _
with:
.DataSource(HierarchicalDatagridInfragisticsJQuery.AccountModels.GetAccountList) _
and it works now.
However, there is a new problem. It seems the features of paging and sorting are not working properly, as the data is not getting refreshed properly. Do we need to implement some sort of paging features in our GetAccountList function to get it to work?
Another question. Is it possible to put images and imagebuttons inside the grid? We would like to be able to add some images depending on a true or false condition of certain columns.
dvanmil said:However, there is a new problem. It seems the features of paging and sorting are not working properly, as the data is not getting refreshed properly. Do we need to implement some sort of paging features in our GetAccountList function to get it to work?
One final tip - most grid features such as paging and sorting can be remote (server-side) or local (client-side) and if their type isn't explicitly stated, the grid will try to guess it.So, if you are sure that you want remote paging or sorting, I'd recommend explicitly setting .Type(OpType.Remote) for the feature(s) in question.
Hi Danny,
Actually, we do provide IntelliSense-friendly comments in our code - it's a mystery to me why they didn't come up (they don't come up for me sometimes as well - maybe in ~10% of the cases).Actually our entire MVC help is crated from those Intellisense-friendly comments - just take a look at:http://help.infragistics.com/Help/NetAdvantage/jQuery/2012.1/CLR4.0/html/Infragistics.Web.Mvc~Infragistics.Web.Mvc_namespace.htmlhttp://help.infragistics.com/Help/NetAdvantage/jQuery/2012.1/CLR4.0/html/Infragistics.Web.Mvc~Infragistics.Web.Mvc.GridColumn_properties.html(here you can find the FormatterFunction property's description)Cheers!Borislav
To add to what my collegue said I understand entirely now how currently the FormatterFunction works because of your example. Thanks! I suspected JavaScript calls by default some ToString() function (just like in .NET) but I didn't know how to solve this in Javascript.
We are currently busy with the new samples you provided from 2012.1 and we'll post again if we have any questions.
As for the 'PS' that was a comment not related specific to this problem. So i don't know if you want this in another thread. You asked why I mentioned them. Well, because right now Infragistics doesn't provide them. So IntelliSense has no information right now on Infragistic's controls. Which makes you guess what parameter is exactly needed in a method or what the function of a method is.
A good example is the FormatterFunction. When you hit the first '(' IntelliSence pops up and says: FormatterFunction(FormatterFunc As String) with no description of what this method does and what the parameter FormatterFunc needs. Might as well be a Delegate to a VB.NET method which we convert to a String by calling ToString (ridiculous example ofcourse but you get the idea), but apparantly it needs Javascript as a String.
It was a suggestion for the dev team. ;)
Thanks for the reply once again.
I just took a peek at the samples and that's looking very good. I will dive deeper in them today, but it sure looks like it will provide us with the things we want with the grid!
Hi Danny and dvanmil,Don't worry guys! IG team's here to the rescue! Danny, you're actually pretty close to the expected outcome ;). However, when you use a formatter function you need to return the value either as it was received OR as a string, because ultimately what you return will be used as the cell's innerHTML. With that in mind, you don't need an Image object (sorry - you can't serialize it as a string (JavaScript's toString() on objects sucks :(:( ). What you need is to concatenate the string for the cell's value like so: column.[For](Function(x) x.AddRemarkPlaceHolder).FormatterFunction("function(val) {{return '<img src="http://files.softicons.com/download/application-icons/vista-symbol-icons-by-lokas-software/png/256/903550-button-ok.png">'; }}") By the way I intentionally delayed my reply so that I can give you official links to some of the new stuff in our new release (it came out just a few hours ago :D) that relate to your question about custom formatting.In the new release (2012.1) we've devised our own IG templating engine which can help you out in such situations. If you are interested, I suggest getting familiar with it via:http://samples.infragistics.com/jquery/templating-engine http://help.infragistics.com/Help/NetAdvantage/jQuery/2012.1/CLR4.0/html/Infragistics%20Templating%20Engine.html
PS: I'm afraid that I don't understand your PS - why do you mention the IntelliSense-friendly triple-apostrophe comments? Sure, they're very nice, but why do you mention them?PPS: I wish lots of luck and clear-head-ed-ness to both of you guys! My personal advice to you would be to be methodical in your approach to web-based technologies - they become easier once you understand them and much scarier if you don't understand them (yep - understanding = reading + banging thy head with problems). Cheers!Borislav
First off, I'm dvanmil's co-worker. We are both responsible for making the transition to MVC + JQuery + HTML5 and we are collecting suites. but before our CEO gives the OK to purchase suites we need to prove we can get existing functionality with new controls. Maybe it's also important to know we come from desktop development and find webdevelopment scary and javascript messy + a mystery.. :P
Having said this, back to the matter at hand...
I have added a property (read: column) to the model which I called AddRemarkPlaceHolder. For now I just simply want to get an image in this 'placeholder'. I understand from your previous remark the grid needs this placeholder because it doesn't support unbounded columns. Well, we can overcome this for now.
I've followed the example with the basic column templates which uses the function: "FormatterFunction". Well, we discovered it needs a javascript function as argument apparantly. No problem. a little scary, but we'll manage. So I came up with this column (watch out! Razor syntax in VB.NET :P):
column.[For](Function(x) x.AddRemarkPlaceHolder).FormatterFunction("function(val) {{var img = new Image(); img.src = ""http://files.softicons.com/download/application-icons/vista-symbol-icons-by-lokas-software/png/256/903550-button-ok.png""; return img; }}")
As you can see I have no clue what i'm doing and i naïvely try to return an HTML IMG element which i've created in this small Javascript function. The result however is that the grid displays in this column the following:
[objectHTMLImageElement]
A part of me hoped for some XAML magic (oh my gosh how I love XAML), but alas no rainbows and unicorns this time.
So, tell me... What do I need to return in the javascript to get an image to be displayed in that column?Or am I doing it wrong all together?
p.s.: And perhaps some more feedback from your customers. Please decorate your classes, properties and methods with the XML decorations, like so:
''' <summary> ''' Returns a collection of Foos ''' </summary> ''' <returns></returns> ''' <remarks></remarks>GetFoos() as List(Of Foo)
This will provide IntelliSense with information and makes your classes self documenting.
Well, you can pass it along to the developers and thnx in advance for considering and also for your answer back. :)