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.
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
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.
Thank you for all your help. It worked, i am able to resolve the below 2 issues.
1. Binding combo list control from Grid source, using unbind. On change event handling.
2. Binding Date field with format along with other columns in the Template.
Thank you very much for all the help. Have a wonderful vacation(time off)
I will go through the detailed documentation once again to utilize it more.