javascript - Kendo UI 网格在下拉选择时刷新

Question

我有一个网格，其中每一行都有一个带有值的选择下拉框。

当一个项目被选中时，我怎样才能使网格重新加载以反射(reflect)变化？

我想这样做的原因是因为从下拉列表中选择的项目会影响另一列中的金额。

这是我的下拉菜单的代码:

function shippingModelSelect(container, options)
{
    $('<input required data-text-field="modelName" data-value-field="modelId" data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        autoBind: false,
        dataSource: [
        {
            "modelName": "Individual shipping cost", 
            "modelId": 1
        },
        {
            "modelName": "Based on weight", 
            "modelId": 2
        },
        {
            "modelName": "Based on value", 
            "modelId": 3
        }
        ],
        close: function()
        {
            handleChange();            
        }
    });
}

我的句柄变化函数:

var gridAlert = $('#gridAlert');
var handleChange = function(input, value) {
    if(input && value)
    {
        detail = 'Product <b>'+input[0].name+'</b> changed to <b>'+value+'</b>';
        gridAlert.html('<b>Changes saved!</b><p>'+detail+'</p>');
        gridAlert.fadeIn('slow', function(){
            setTimeout(function(){
                gridAlert.fadeOut();
            }, 2000)
        });
    }
    dataSource.sync();
}

最后是我的网格设置:

dataSource = new kendo.data.DataSource({
    serverPaging: true,
    serverSorting: true,
    serverFiltering: true,
    serverGrouping: true,
    serverAggregates: true,
    transport: {
        read: {
            url: ROOT+'products/manage'
        },
        update: {
            url: ROOT+'products/set-product',
            type: "POST",
            data: function(data)
            {
                data.dateAdded = kendo.toString(data.dateAdded, 'yyyy-MM-dd hh:ii:ss')
                return data;
            }
        }
    },
    pageSize: 20,
    sort: {
        field: 'id',
        dir: 'desc'
    },
    error: function(e) {
        alert(e.errorThrown+"\n"+e.status+"\n"+e.xhr.responseText) ;
    },
    schema: {
        data: "data",
        total: "rowcount",
        model: {
            id: "id",
            fields: {
                id: {
                    type: 'number',
                    editable: false
                },
                SKU: {
                    type: "string"
                },
                name: {
                    type: "string"
                },
                dateAdded: {
                    type: "date",
                    format: "{0:yyyy/MM/dd hh:mm}",
                    editable: false
                },
                shippingModel: {
                    type: "string"
                },
                shippingModelId: {
                    type: "number"
                },
                price: {
                    type: "number"
                }
            }
        }
    }
})

$('#productGrid').kendoGrid({
    dataSource: dataSource,
    autoBind: true,
    columns: [
    {
        field: "image",
        title: "Image",
        width: 30,
        template: "#= '<img title=\"'+alt+'\" src=\"images/'+image+'\"/>' #"
    },
    {
        field: "SKU",
        title: "SKU",
        width: 50,
        headerTemplate: "<abbr title=\"Stock Keeping Unit - A unique identifier for this product\">SKU</abbr>"
    },
    {
        field: "stockQuantity",
        title: "Quantity",        
        width: 30
    },
    {
        field: "name",
        title: "Name",
        width: 200
    },
    {
        field: "dateAdded",
        title: "Date Added",
        width: 80,
        template: "#= niceDate #"
    },
    {
        field: "shippingModelId",
        title: "Shipping Model",
        width: 50,
        editor: shippingModelSelect,
        template: "#= shippingModel #"
    },
    {
        field: "price",
        title: "Price",
        width: 80,
        //format: "{0:c}",
        template: "#= '&pound;'+price.toFixed(2)+'<br /><span class=\"grey\">+&pound;'+shipping+' shipping</span>' #"
    }
    ],
    sortable: true,
    editable: true,
    pageable: {
        refresh: true,
        pageSizes: [10, 20, 50]
    },
    scrollable: false,
    reorderable: true,
    edit: function(e) {
        var value;        
        var numericInput = e.container.find("[data-type='number']");

        // Handle numeric
        if (numericInput.length > 0)
        {
            var numeric = numericInput.data("kendoNumericTextBox");    

            numeric.bind("change", function(e) {
                value = this.value();
                handleChange(numericInput, value);
            });

            return;
        }

        var input = e.container.find(":input");

        // Handle checkbox
        if (input.is(":checkbox"))
        {
            value = input.is(":checked");
            input.change(function(){
                value = input.is(":checked");
                handleChange(input, value);
            });
        }
        else
        {        
            // Handle text
            value = input.val();
            input.keyup(function(){
                value = input.val();
            });
            input.change(function(){
                value = input.val();
            });

            input.blur(function(){
                handleChange(input, value);
            });
        }
    }
}
)

Answer 1

您需要做两件事。

1. 等待更改完成同步
2. 告诉网格重新读取数据源

这应该为你做这两件事

dataSource.bind("sync", function(e) {
  $('#productGrid').data("kendoGrid").dataSource.read();
});

有关详细信息，请参阅 datasource sync event 和 datasource read method 在他们的文档网站上。