Hi,
I am new to MVC5. Currently i am working on the grid with drop downlist bind it from the Model. In the below code snippet, each row has a column "Action List" and ActionResult data type is List<SelectListItem>. Each item in the drop down should be a hyper link and when user selects an item from drop down then call the javascript, based on the selected value i will create a Tab using HTML5 tab control.
My View looks like
@(Html.Infragistics().Grid(Model.Students).ID("grdOrderSearch").Height("500px").AutoGenerateColumns(false).AutoGenerateLayouts(false).RenderCheckboxes(true).PrimaryKey("ID").FixedHeaders(false).Columns(column =>{ column.For(x => x.Name).HeaderText("Column1"); column.For(x => x.Address2).HeaderText("Column2"); column.For(x => x.Address1).HeaderText("Column3"); //column.For(x => x.ActionsResult).HeaderText("Action List").Template(Html.DropDownListFor(x => x.selectedAction, x.ActionsResult, new { @class = "select_box" }));}).AlternateRowStyles(true).DataBind().Render())
How to achieve this? Please help me
I have the script ready for how to generate the tab, so i need help to populate the drop downlist with links as items and click on them pass the dropdown selected value.
Hi Venkat,
Thank you for posting in our forums!
I recommend using the ComboEditor to achieve this. You can set the column to use an igCombo for editing and handle the selectionChanged event.
I have attached a sample that demonstrates how you could achieve this. If you have any further questions or concerns with this, please let me know.
Thank you for the response Michael.
In your example, you are reading the Categories from the ViewBag, which is static list same across all the rows in the Grid. But i have it as property in the Grid datasource. Categories are different for each row. I can not use the static list from ViewBag, it is different list for each product.
My modal looks like
class Product { public int ProductID; public string ProductName; public List<SelectListItem> Categories; }
Source of the grid is: List<Product> ProductList
How can we read the Categories from each Product in the ProductList and bind it to the combo in the Categories column?
Thank you in advance.
Thank you for the clarification.
In this scenario, I will need some more time to investigate how to best achieve this.
I will have more information on my findings for you by next Monday.
In order to render a different dropdown list for each item, you should handle the template for the column a little differently.
Each option will need to be rendered manually, so using a DropDownListFor will not work. Instead, if you use our rendering engine you can render each option individually.
I have modified and re-attached my sample to demonstrate how this can be accomplished. If you have any further questions or concerns with this, please let me know.
Thank you Michael for the help. It worked for the Combo List. But some binding issue to the Combo, if we have a Date field in the Grid's source. Without Date column on the Grid, it is working fine. Below is my View looks like
column.For(x => x.RegisterDate).Template("<a href='#' onclick='GoToStudent(${StudentID})'>${Name}</a><br />${RegisterDate}").HeaderText("Name<br />Date");
column.Unbound("Subjects").HeaderText("Subject Names").Template("<select>{{each ${SubjList} }} <option value='${SubjList.Value}'>${SubjList.Text}</option> {{/each}}</select>");
If included RegisterDate column, then combo items are showing as undefined. If it is removed then showing the Subjects combo list. What is the solution to resolve it?
2. Is it possible to show each Combo list item as a Link?
Thanks in advance
Michael,
When i used as below, im able to see the Combo list, but Date is not showing as expected.
column.Unbound("RegisterDate").Template("<a href='#' onclick='GoToStudent(${StudentID})'>${Name}</a><br />${RegisterDate}").HeaderText("Name<br />Date");
On the UI, date is showing as "/Date(1488690542583)/". I need to show like 03/20/2017 12:25:02 AM.
In order to reference data from the datasource in a column template, the igGrid needs to have a column for the referenced datafield. These columns can be hidden so the data is not displayed redundantly.
The following code shows how you could still use the bound column to render the datetime with the Format() property on the column.
column.For(x => x.RegisterDate).Format("dateTime").Template("<a href='#' onclick='GoToStudent(${StudentID})'>${Name}</a><br />${RegisterDate}").HeaderText("Name<br />Date");
As for styling the combo items as links, if you use the <select> tags like in my sample, the OS determines how these get rendered and you cannot change their styling. If you implement some other form of a dropdown through our column template, you may be able to change the styling. What works best for your app will be up to you to decide.
Please let me know if you need any further assistance with this.
Thank you Michael for the reply. When i included below code in the sample which you sent earlier, added Date column to the grid. It is throwing error for ItemTypes.
Added StartDate DateTime variable to Item class and assigned random values.
View code:
column.For(x => x.StartDate).Format("dateTime").Template("<a href='#' onclick=''>${ItemName}</a><br />${StartDate}").HeaderText("Name<br />Date").Width("100px"); column.Unbound("types").HeaderText("Category").Width("200px") .Template("<select>{{each ${ItemTypes} }} <option value='${ItemTypes.ItemValue}'>${ItemTypes.ItemText}</option> {{/each}}</select>");
If i use one column at a time, both works fine. When i include both the fields, throws error and Grid is not bind to UI.
Error message: JavaScript runtime error: An error has occurred while trying to retrieve data source property: ${ItemTypes}
Sorry to bother you, another question - assume another property in the Item class "ReferenceID" of type INT, how to read it in the combo change event ${ReferenceID} is need to be passed to change event