Drop downlist inside the igGrid in each row from Data source of the Grid

Answered (Verified) This post has 1 verified answer | 11 Replies | 2 Followers Thread's RSS feed.

Venkat
Points 115
Replied On: Wed, Mar 15 2017 11:53 AM Reply

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

  • Post Points: 5

Verified Answer

Venkat
Points 115
Answered (Verified) Replied On: Thu, Mar 23 2017 10:18 PM Reply
Verified by Venkat

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.

  • Post Points: 25

All Replies

Venkat
Points 115
Replied On: Wed, Mar 15 2017 12:23 PM Reply

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.

  • Post Points: 20
Replied On: Thu, Mar 16 2017 10:13 AM Reply

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.


Sincerely,

Michael H.

Software Developer
Infragistics, Inc.
http://www.infragistics.com/help

  • Post Points: 20
Venkat
Points 115
Replied On: Thu, Mar 16 2017 11:15 AM Reply

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.

  • Post Points: 20
Replied On: Fri, Mar 17 2017 11:11 AM Reply

Hi Venkat,

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.


Sincerely,

Michael H.

Software Developer
Infragistics, Inc.
http://www.infragistics.com/help

  • Post Points: 5
Replied On: Mon, Mar 20 2017 7:05 PM Reply

Hi Venkat,

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.


Sincerely,

Michael H.

Software Developer
Infragistics, Inc.
http://www.infragistics.com/help

  • Post Points: 20
Venkat
Points 115
Replied On: Tue, Mar 21 2017 3:30 PM Reply

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 

  • Post Points: 5
Venkat
Points 115
Replied On: Tue, Mar 21 2017 3:56 PM Reply

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.

  • Post Points: 20
Replied On: Wed, Mar 22 2017 5:38 PM Reply

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.


Sincerely,

Michael H.

Software Developer
Infragistics, Inc.
http://www.infragistics.com/help

  • Post Points: 20
Venkat
Points 115
Replied On: Wed, Mar 22 2017 7:22 PM Reply
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.

  • Post Points: 20
Replied On: Thu, Mar 23 2017 5:36 PM Reply

Hi Venkat,

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.


Sincerely,

Michael H.

Software Developer
Infragistics, Inc.
http://www.infragistics.com/help

  • Post Points: 20
Venkat
Points 115
Answered (Verified) Replied On: Thu, Mar 23 2017 10:18 PM Reply
Verified by Venkat

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.

  • Post Points: 25
Page 1 of 1 (12 items) | RSS