Question

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

选择项目后，如何重新加载网格以反映更改？

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

以下是我的下拉列表的代码：

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

你需要做两件事。

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

这应该为你做两件事

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

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

下拉选择中的Kendo UI网格刷新

1 个答案: