Hi,
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:
Issues:
The Species combo displays two columns. There are an additional 2 columns hidden that relate to the other combos.
Species data model:
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,
Nathan
Edit: I'm unable to attach the zip file. Is there a file size limit? It's approx 25mb.
Hi Nathan,
Thank you for posting in our forums!
The forums have a 20MB file size limit. You shouldn't need to include any assemblies if your project has a packages.config.
Try to isolate and limit your sample to only the parts needed to reproduce the issue. This will help to narrow down the issue and decrease the file size.
If you still cannot decrease the file size any further, you may email the sample to support@infragistics.com. If so, please mention case #CAS-188035-H1Q5N5 in the subject of the email.
Looking forward to hearing from you.
Hi Michael,
It's funny how the size shrinks when you remove the packages! :)
Please find attached the sample as described in my opening post.
The MVC Helpers are meant to be wrappers for simple functionality to set up the Ignite UI controls. They are at their heart javascript controls, so more advanced functionality will require some extra javascript. Cascading combos are one of these features.
I've attached a modified version of your sample with the code that would be required. I handle the dropDownOpening event of the ComboEditors to accomplish this.
Here are the changes I've made:
- Removed DataSourceUrl for YMId, YCId, PSId combo editors.- Added event handlers for the above editors.- ComboDataSourceActions in the controller now accept a cascade key and returns results filtered by this key.- Added a Hidden column for the PrimaryKey. (this is required for the grid's data schema to be set up correctly)
The combo editors have their data source when the
Currently, the data is fetched each time the drop downs are opened. Some additional code can be added to prevent the data request to not be sent if the parent combo has not changed, but I will leave that for you to implement if you need to.
If you have any further questions or concerns with this, please let me know.
Thanks Michael, that's very helpful. I should be able to wire that in now.
What can I do about:
For showing the display value of the combo, you should handle the column's FormatterFunction to set up a function that retrieves the value from the combo and returns it as the cell's display text. You can see a simple example of this in this online sample.
For the values not showing initially, I need some more time to investigate this and discuss this with the other dev teams. I will have more information or questions for you by Tuesday.
thanks for the update. I've looked at that sample and the combo's datasource is coming from the ViewBag rather than a URL. When I try to implement the example, with the combo datasource pointing to the URL, the call to get the datasource (grid.data("igGridUpdating").options.columnSettings[1].editorOptions.dataSource;) returns null, stopping the array from being populated. I guess it works in the online sample because the data exists already and not waiting to be initialised from the URL.
This is the code in full:
var yMlookup = []; $(function() { var grid = $("#igGridCompartments"), comboDataSource = {}; comboDataSource = grid.data("igGridUpdating").options.columnSettings[1].editorOptions.dataSource; //alert(comboDataSource); for (var i = 0; i < comboDataSource.length; i++) { yMlookup[comboDataSource[i].YMId] = comboDataSource[i]; } });
I'm assuming the reason this and the items not being selected initially is because the datasource doesn't get initialised until the first click of the combo? Is there a way to force the combo to retrieve its datasource?
For getting the text value to display in the cell, you will need to get the actual data of the combo. Accessing the columnSettings like you are will only return the URL that is initially sent to the igCombo.
Please see a small code example below for what you need.
Column definition:
column.For(x => x.YMId).HeaderText("YM").FormatterFunction("yMlookup");
In java script:
function yMlookup(value) { var grid = $("#igGridCompartments"); var combo = grid.igGridUpdating("editorForKey", "YMId"); if (combo == null) { return value; } return combo.igCombo("dataForValue", value).YmNo;}
For the initial value not being selected, you are correct. I am still discussing this with someone on the dev team to find the best solution.
So basically there's no point in using remote datasources to solve the requirement highlighted in the OP. If I have to have the datasets locally to get the initial value what's the point of then having the same combos with a remote datasource.
I've ended up putting the data into arrays and feeding everything from them.
Thanks for your help.
For the initial load, the combo will not be initiated or have their datasource set (since you are using cascading). If you need to have the value displayed initially in the grid, you will need to include that in the initial data sent to the client and use that if combo is null.
For getting the values to display when selecting the combo, one of the developers has modified my sample and I have attached it for you.
If you need further assistance with this, please let me know.
I've added the code as you've described but the combo keeps coming back as null, so it doesn't return the value. I've attached the code to demonstrate.