The Problem we are facing:Whenever we change something inside an IGgrid, we have to reload the whole website to communicate the changed state to all other IGgrids relating to that IGgrid we just changed.
We want to create a way to communicate data changes from one IGgrid to the other in the .cshtml and C# (MVC) context of the View. More specifically: IGgrid A adds/deletes/changes one of its rows. And it so happens, that a second IGgrid B uses these rows as a selection in a dropdown combobox when creating a new row in IGgrid B. How can IGgrid A inform IGgrid B's combobox, to update its unrelated combobox values to represent the new state of IGgrid A without reloading the website?
What we found so far:We found a way to change data and rebind the data specifically via JavaScript only and via an external function (as attached to this post).Now here are the problems with that:
1. They use JavaScript entirely but we are reyling on the C# (MVC) context to create our IGgrids in the View. How can we create the same effect as seen in the example within the C# context of the View?2. They use an old version of IGgrid and the infragicstics API and it doesn't seem to work in newer versions (2015 onwards). We are using a newer version from 2015.3. The data type used to represent the dropdown combobox values is a simple array of numbers. How can we do this with a more complex data type like a C# (MVC) list or C# (MVC) dictionary?
What we got:We use the Entity Framework as well, to manage data in the backend on the server side. But this problem mostly concerns the client side. On the client side, we use dataSource(ViewBag.data) for a combobox to get data from the controller. This works fine until changes occur without reloading the site, so this seems to be a no-go. What we need:A way to accomplish said problem with the IGgrid of the 2015 infragistics API.
Hello Stanislas Mauser,
Thank you for posting in our forums!
I have a question to help get a better understanding of your scenario:
1. Does your backend need to know about the changes in igGrid A (to continue from your example) at all? Or are any changes to igGrid A only required on client side to be used in igGrid B?
If the backend does not need to know about the changes, binding to the combo editor through javascript (as in the sample you attached) will be fine, and you would not be required to go back to the server.
If the backend does need to know about the changes, you could create an action in your controller to accept the changes and send a request with an AJAX call. Then, you can send the updated datasource back to the client and, in the AJAX success callback, bind to the igCombo as you would in the other method.
You can find more information on using jQuery's AJAX method here:
http://api.jquery.com/jquery.ajax/* Please note this site is not owned or maintained by Infragistics.
For the sample you provided, there have been some changes to the igCombo in 15.1 which is why the sample doesn't work with 15.1. I have modified the sample to work with 15.1 for demonstration that the basic concept will still work as it did in 12.1.
If you need further assistance with this, please let me know and I will be glad to help.
Hello Michael H.,Thanks for your quick reply.
We still got one problem left to solve. The example we showed you so far, did all this in the JavaScript context only. But what we need, is the same functionality using the igGrid defined with C# as seen in the attached screenshot_document.png.
The problem is, that the function of the button in the previous example uses the following way of fetching the combo box dropdown menu:var editor = $("#grid1").igGridUpdating("editorForKey", "ProductID");and applies the new information to said combo box dropdown menu.
When we use it in our code, no matter which key we use in the igGridUpdating() method, we don't seem to be able to fetch the combo box dropdown menu:var editor = $("#iggrid_meeting_documents").igGridUpdating("editorForKey", "RelationName");var editor = $("#iggrid_meeting_documents").igGridUpdating("editorForKey", "DocumentID");var editor = $("#iggrid_meeting_documents").igGridUpdating("editorForKey", "ID");
the var editor is always null when using the previous examples.
If we could fetch the correct combo box dropdown menu, add the new data and apply databind to it as in the previous example you showed us, that would fix our problem entirely.
Note: Our problem would also be solved, if we had a DataSourceUrl() method in the ComboEditorOptions. But it seems there is only a DataSource() method available.
Hi Stanislas Mauser,
You can pass a Url to the igCombo's DataSource property like you can with the igGrid's DataSourceUrl property. You can see an example of this in our sample here:
http://www.igniteui.com/combo/aspnet-mvc-helper
If you still need help with this, please let me know.
Hello Michael H.,thanks again for the quick reply.
We are close to solving this problem with the .DataSource(Url.Action(...)). Using the updated igGrid definition, whenever we click on the dropdown, the controller method corresponding to the one defined in Url.Action(...) is called and even returns the correct value to the igGrid. You can see the updated igGrid definition in the attachment updated_documents.png.
One last problem still remains though:The combo box dropdown menu is always empty (It shows "No Result"), even if it calls the DataSource(Url.Action(...)), receiving the correct model data (The model is defined, as seen in document_relation.png). We figured, we have to implicitly or explicitly tell the embedded combo box dropdown menu to bind the newly received data somehow. But we can't seem to find a way to accomplish that. It'd be best, if we were able to bind the newly received data without reloading the entire website.
Therefore the question: How do we solve this last problem?
To update the combo's data, you should only have to call dataBind on it. This will have the igCombo fetch the data from its dataSource URL. This is assuming you have already updated the datasource on the server. If you haven't updated the datasource on the server yet, no new data will be returned.
I have attached a simple MVC sample to demonstrate this. In my sample, I add a new Category each time the igCombo's dataSource is requested from the server. The first time you open the Category dropdown, you will see Category 1001 on the end. Then each time you click "Update Combo" a new Category will be added.
Please note that I have just discovered that an exception is thrown when calling dataBind while using IE11 which prevents the igCombo from updating, but this works in Chrome and Firefox. I have logged this in our tracking system with ID: 205346.
I have created a support case for you with an ID of CAS-159688-K9R3F3. You can view the status of the development issue connected to this case by going to the “Account” tab on our website, selecting "My Support Activity" and then this support case will be listed there. Then, you may select the "Development Issues" tab to view details of this development issue.
Please let me know if you have any further questions with this.