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
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.
Hi Venkat,
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
Thank you in advance.
This error helps illustrate my first point from my previous reply. The grid will need a column for the data to be referenced in a template.
I am not sure though why adding the new field causes this issue. I also noticed this in my sample. If you create a column type like below, the templates will recognize the data for the ItemTypes data property.
column.For(x => x.ItemTypes).DataType("object").Hidden(true);
As for you ReferenceID question, you can get the data from the grid's datasource using the findRecordByKey method of the igGrid. Using my previous sample as an example, in the onchange event handler, you can use the following code:
var rowKey = $(evt.currentTarget).closest("tr").data("id");var rowData = $("#grid1").igGrid("findRecordByKey", rowKey);alert(rowData.ReferenceID);
If you need anything else, please let us know. Please be aware that I will be out of the office next week. It would better benefit you instead to create a new support case or forum thread for any new questions you may have.