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
30
Ignite UI data grid rebind not working using RAZOR MVC5
posted

Him

I am using ignite ui v18.1 (latest version) MVC5 Razor ASP.NET.

On combo selection changed I want to filter data and rebind the data grid.

Grid gets empty on rebinding it on combo selection.

Code logic: on combo selectionChanged, filtering json data with Id=1 and rebind it to grid.

Combo_DataGrid_Interaction.zip

  • 265
    Offline posted

    Hello AMS_OBB,

     

    Thank you for posting in our forum.

     

    In an MVC scenario when the “responseDataKey” option of the grid has not been explicitly set it defaults to “Records”- this is because the data source comes as an object and the grid needs to know which of the object’s properties would hold the actual data. If you inspect the scripts loaded in the browser you would see that the data coming from the server looks like this:

     

     

     

    The new dataSource that gets constructed when the selection changes is an array instead of an object and the response key which the grid uses in order to find the data is missing – hence it gets data of undefined and renders empty.

     

    Modifying the “selectionChanged” event handler code to something like this would fix the problem:

     

     

        function categoryselectionchange(e, u) {
            var griddata = @Html.Raw(ViewBag.Data);
            data = { Records: griddata.filter(x => x.Id == 1)};
            $("#grid1").igGrid('option', 'dataSource', data);
        }

     

    Please note that changing the dataSource option would also call the dataBind method internally - hence there is no need for you to call it again explicitly.  

     

    If you need any additional assistance, feel free to contact me.