Ignite UI 数据网格重新绑定无法使用 RAZOR MVC5

Question

我正在使用 ignite ui v18.1（最新版本）MVC5 Razor ASP.NET。

组合选择更改后我想过滤数据并重新绑定数据网格。

Loading.gif 连续出现在数据重新绑定上并且没有数据加载到网格中。

以下代码逻辑：组合选择已更改，过滤 json Id=1 的数据并将其重新绑定到网格。

这里是grid的cshtml代码

@(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()
)

下面是组合选择更改代码

<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>

Answer 1

您应该像这样用 Records 和 totalItemsCount 属性包装 gridObject：

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

或者创建 igDataSource 并将 gridObject 作为数据源参数传递。然后使用 igDataSource 设置网格选项：

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

Ignite UI 数据网格重新绑定无法使用 RAZOR MVC5

Ignite UI data grid rebind not working using RAZOR MVC5

jquery

asp.net-mvc

infragistics

ignite-ui

iggrid