Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
igGrid - Cascading Combo - Remote Datasource - MVC Helper


I've been using Winforms Infragistics controls for years and I'm now moving onto using the IgniteUI controls for some web apps we're developing.  I'm new to the web side of things so I'm struggling to find examples and understand what I need to do (programmatically) to achieve my objectives.

I've been trying to get the cascading combo's to work in the grid but have come up against several issues that I can't seem to resolve from the documentation.  Pretty much most of the documentation referring to my issues relate to javascript solutions not the MVC helper.

I've attached sample code to support the following.

I have a grid with the DataSourceUrl set to "/Home/GetCompartmentData/".  It loads the grid fine.

I have 4 combos:

  • Species - DataSourceUrl "Home/GetSpeciesData"
  • YM - DataSourceUrl "Home/GetYMData"
  • YC - DataSourceUrl "Home/GetYCData"
  • PS - DataSourceUrl "Home/GetPSData"


  1. The grid doesn't show the Text key only the Id. 
  2. When you click on the combo for the first time it blanks the selection and therefore doesn't show the item selected in the list.  If you click on the same field in another row the item is then selected and the Text key is displayed.  If you click out of the cell the Text Key gets replaced by the Id. 

The Species combo displays two columns.  There are an additional 2 columns hidden that relate to the other combos.

Species data model:

  • SpeciesCode
  • Description
  • YMSpecies
  • PSSpecies

When you click on the YM combo it should filter to the YMSpecies of the selected Species.  The YM data model has a Species field to filter on.

When you click on the YC combo it should filter to the YMId of the selected YM.  The YC data model has a YMId field to filter on.

When you click on the PS combo it should filter to the PSSpecies of the selected Species. The PS data model has a Species field to filter on.

All the examples I found are javascript solutions showing the Text Key value in the grid using client side arrays. I couldn't see any examples if you bind the datasource to a URL.  I did find remote filtering examples with the MVC helper but by this point, with the combo's not showing the Text Key value when remote , I got myself all confused so I didn't try it.  I ended up going round in circles having everything client side, then everything server side or then a mixture etc etc. 

If you could look at my example and help me out with understanding what I'm missing/need to do that would be fantastic!

In my final solution I will have 8 combos.  The 4 I list here relate to "current crop" of the underlining dataset and the other 4 (not listed), which are a duplicate set of data (ie have Species, YM, YC and SP) relate to the "successor crop".

The grid's data could be from 1 to 1700 rows.  The Species combo has 100 rows, YM 170 rows (unfiltered), YC 840 rows (unfiltered) and PS 70 rows (unfiltered).  This is why I'd prefer to serve the data remotely.

I'm using IG 2017.1 with VS2107.

Kind regards,


Edit:  I'm unable to attach the zip file. Is there a file size limit?  It's approx 25mb.