I am going to test IgniteUI on a new project. My requirements are as follow: The Controller/Action Result is going to send Data (Model) as Jason to the View. I need to set up IgGrid grid in different places in my web application. The IgGird would get populated dynamically in the View by the Data (Model), this includes Header labels.
The reason I need igGrid to work this way is that we have international clients and we want them to see Label headers in their language and be able to customize them.
The developer will create a new View with a igGrid, the developer will assign a string (number) to the ID or Name of the igGrid. When the igGrid loads it will pass the ID/Name to an Action Result. With the passed ID/Name, the Action Result will get the number of columns, Widths, and Column Headers of the igGrid from a Data Base Table. The Action Result will send the igGrid settings (number of columns, width, and column headers) along with Data/Modle to the View/igGrid
One of purpose of this is to let customers change labels from English to their own languages and customize Labels/Headers from inside a data base table.
Any of you guys have experience on how to do this with igGrids?
I will be using VS 2010, MVC 3 (MCC 4 in the future), and Razor for this project.
Hi Todd,
You can achieve this functionality by using the GridModel class in the controller to dynamically construct the grid configuration.
In the View you need to set a strongly typed model (Note: That's not the only option. You can use ViewData for example.) to be GridModel. Then you initialize grid in the View with this code @Html.Infragistics().Grid(Model).
In order to get the data as JSON you set the GridModel.DataSourceUrl to point to an Action Method in which you should set the GridModel.DataSource to point to an IQueryable/DataSet/DataTable object and call GridModel.GetData() to return a JsonResult.
I'm attaching a sample which demonstrates this approach (Note: You need to recreate the reference to Infragistics.Web.Mvc.dll to point to where your version of the dll is located).
Hope this helps,
Martin Pavlov
Infragistics, Inc.
Thanks Martin,
So what you are sating is that I can use the Jquery/infragistics controls and the MVC controls on my project together, correct? Are the Jquery controls examples in the Infragistics folder? Are there examples on how to create an editable Grid?
I found one issue with the normal MVC drop down control, when I create a MVC 3/igniteUI project and run it on Chrome. When you hoover over or put the cursor over the down arrow on the drop down control, the browser turn black. The strange part is that it does the same thing when you put the cursor on the favorite and setting icons on that current tab. The project runs fine in Firefox 17, 18 and IE 8/9.
Do you guys have a fix for this?
Thanks,
Please let us know if you need further assistance with this issue and I'll be glad to help.
I have also been unable to reproduce this issue with the igCombo during my testing. I set up a simple MVC 3 project and added the igCombo through the wrapper. When I loaded it up in Chrome, my screen looked normal upon interacting with the drop down.
I have attached the sample project I used to test this. Please test this project on your PC; whether or not it works correctly may help indicate the nature of this problem.
Or, if this sample project is not an accurate demonstration of what you're trying to do, please feel free to modify it and send it back, or send a small sample project of your own if you have one.
Infragistics MVC controls which you're talking about are actually wrappers for the Ignite UI jQuery controls. By wrappers I mean that they generate JavaScript code which is executed on the client(browser). MVC Wrappers also act as a server side implementation for the data binding to IQuerayble/DataSet/DataTable and remote operations supported by the features. All this functionality acts transparently for the developer. You can mix in the View pure JavaScript initialized Ignite UI controls as well as Razor initialized ones. At the end all they will end up as a JavaScript executed in the browser.
Ignite UI samples have their own installer, that's why you may not have them. However you can use the online samples browser (http://es.infragistics.com/products/jquery/samples). Each online sample has a Code View area in which you can see how the sample is implemented. In the drop-down you have choice to use the html sample as well.
Editable grid is created by enabling igGridUpdating feature. You can find more information how to achieve this in the following topic: igGrid Updating. You can also check the Editing sample.
About the issue which you're experiencing … I was unable to simulate this. Can you check the error console? Is this a style issue? A screenshot would be helpful.