jqueryasp.net-mvcinfragisticsignite-uiiggrid

Ignite UI data grid rebind not working using RAZOR MVC5


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.

Loading.gif continuous to appear on data re-bind and no data gets loaded in grid.

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

Here is the cshtml code of grid

@(Html.Infragistics()
.Grid(Model.ManageConfigurationModel)
.ID("manageConfigurationGrid")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.RenderCheckboxes(true)
.PrimaryKey("Id")
.Columns(column =>
{
    column.For(x => x.Id).HeaderText("ID").Width("10%").ColumnCssClass("numericAligment");
    column.For(x => x.BidContractName).HeaderText("Bid Contrtact").Width("40%");
    column.MultiColumnHeader().HeaderText("Flex Unit Information").Group(gp =>
    {
        gp.For(x => x.AccessPoint).HeaderText("AccessPoint").Width("20%");
        gp.For(x => x.ApEanCode).HeaderText("AP EAN Code").Width("30%");
        gp.For(x => x.LumiBox).HeaderText("LumiBox").Width("30%");
        gp.For(x => x.ElectricZone).HeaderText("Electric Zone").Width("30%");
        gp.For(x => x.ActivationPrice).HeaderText("Activation Price").Width("40%");
        gp.For(x => x.Capacity).HeaderText("Capacity").Width("20%");
    });
    column.MultiColumnHeader().HeaderText("User Choices").Group(uc =>
    {
        uc.For(x => x.RFlex).HeaderText("R3 Flex").Width("20%");
        uc.For(x => x.BidLadder).HeaderText("Bid Ladder").Width("20%");
        uc.For(x => x.Balancing).HeaderText("Balancing").Width("20%");
    });
})
.Features(f =>
{

    f.Sorting()
    .Mode(SortingMode.Multiple);
    f.Filtering().Mode(FilterMode.Simple);
    f.Selection().Mode(SelectionMode.Row).MultipleSelection(false);
    f.RowSelectors().EnableCheckBoxes(true).EnableRowNumbering(false);
    f.MultiColumnHeaders();
    f.CellMerging().ColumnSettings(settings =>
    {
        settings.ColumnSetting().ColumnKey("BidContractName").MergeOn(CellMergingMergeOn.Never);
        settings.ColumnSetting().ColumnKey("ApEanCode").MergeOn(CellMergingMergeOn.Always);
        settings.ColumnSetting().ColumnKey("LumiBox").MergeOn(CellMergingMergeOn.Never);
        settings.ColumnSetting().ColumnKey("ElectricZone").MergeOn(CellMergingMergeOn.Never);
        settings.ColumnSetting().ColumnKey("ActivationPrice").MergeOn(CellMergingMergeOn.Never);
        settings.ColumnSetting().ColumnKey("Capacity").MergeOn(CellMergingMergeOn.Never);
        settings.ColumnSetting().ColumnKey("RFlex").MergeOn(CellMergingMergeOn.Never);
        settings.ColumnSetting().ColumnKey("BidLadder").MergeOn(CellMergingMergeOn.Never);
        settings.ColumnSetting().ColumnKey("BidLadder").MergeOn(CellMergingMergeOn.Never);
        settings.ColumnSetting().ColumnKey("Balancing").MergeOn(CellMergingMergeOn.Never);

    }).MergeType(CellMergingMergeType.Physical);

})
.DataSourceType("json")
.DataBind()
.Render()
)

Below is the combo selection change code

<script type="text/javascript">
function comboBidContractSelectionChanged(e, ui) {
    var jsonData =[{"Id":1,"BidEanCode":"XYZ","Cost":1125,"Capacity":1550,"SecurityMargin":20,"BidPrice":140,"RFlex":true,"BidLadder":true,"Balancing":true,"ManageConfigureId":0,"BidContract":"BidContract_01","ManageConfigurationList":[{"Id":1,"BidContractName":"BidContract_01","AccessPoint":"DP01","ApEanCode":"AP_EAN_01","LumiBox":"Lum_01","ElectricZone":"EZ_01","ActivationPrice":"EZ_01","Capacity":100,"RFlex":true,"BidLadder":true,"Balancing":false},{"Id":2,"BidContractName":"BidContract_01","AccessPoint":"DP02","ApEanCode":"AP_EAN_02","LumiBox":"Lum_02","ElectricZone":"EZ_02","ActivationPrice":"EZ_02","Capacity":110,"RFlex":true,"BidLadder":true,"Balancing":false},{"Id":3,"BidContractName":"BidContract_01","AccessPoint":"DP03","ApEanCode":"AP_EAN_03","LumiBox":"Lum_03","ElectricZone":"EZ_03","ActivationPrice":"EZ_03","Capacity":120,"RFlex":true,"BidLadder":true,"Balancing":false},{"Id":4,"BidContractName":"BidContract_01","AccessPoint":"DP04","ApEanCode":"AP_EAN_04","LumiBox":"Lum_04","ElectricZone":"EZ_04","ActivationPrice":"EZ_04","Capacity":130,"RFlex":true,"BidLadder":true,"Balancing":false}]},{"Id":2,"BidEanCode":"XYZ","Cost":750,"Capacity":700,"SecurityMargin":20,"BidPrice":140,"RFlex":false,"BidLadder":false,"Balancing":true,"ManageConfigureId":0,"BidContract":"BidContract_02","ManageConfigurationList":[{"Id":5,"BidContractName":"BidContract_02","AccessPoint":"DP05","ApEanCode":"AP_EAN_05","LumiBox":"Lum_01","ElectricZone":"EZ_01","ActivationPrice":"EZ_01","Capacity":100,"RFlex":true,"BidLadder":true,"Balancing":false},{"Id":6,"BidContractName":"BidContract_02","AccessPoint":"DP06","ApEanCode":"AP_EAN_06","LumiBox":"Lum_06","ElectricZone":"EZ_06","ActivationPrice":"EZ_06","Capacity":110,"RFlex":true,"BidLadder":true,"Balancing":false},{"Id":7,"BidContractName":"BidContract_02","AccessPoint":"DP07","ApEanCode":"AP_EAN_07","LumiBox":"Lum_07","ElectricZone":"EZ_07","ActivationPrice":"EZ_07","Capacity":120,"RFlex":true,"BidLadder":true,"Balancing":false},{"Id":8,"BidContractName":"BidContract_02","AccessPoint":"DP08","ApEanCode":"AP_EAN_08","LumiBox":"Lum_08","ElectricZone":"EZ_08","ActivationPrice":"EZ_08","Capacity":130,"RFlex":true,"BidLadder":true,"Balancing":false}]}];
    jsonData = JSON.parse(JSON.stringify(jsonData));
    var gridObject = [];
    for (var i = 0; i < jsonData.length; i++) {
        if(jsonData[i].Id==1)
            gridObject.push(jsonData[i]);
    }
    $("#manageConfigurationGrid").igGrid("option","dataSource", gridObject).igGrid("dataBind");
}
</script>

Solution

  • You should either wrap the gridObject with Records and totalItemsCount properties like this:

    $("#manageConfigurationGrid").igGrid("option", "dataSource", 
    { "Records": gridObject, 
    "totalItemCount": gridObject.length }); // you don't need to databind the setter does that for you
    

    or create igDataSource and pass the gridObject as a dataSource parameter. Then use the igDataSource to set the the grid option:

    var ds = new $.ig.DataSource({
        dataSource: gridObject
    });
    $("#manageConfigurationGrid").igGrid("option", "dataSource", ds);