3

各行に値を含む選択ドロップダウンボックスがあるグリッドがあります。

アイテムが選択されたときに、変更を反映するためにグリッドをリロードするにはどうすればよいですか?

これを行う理由は、ドロップダウンから選択した項目が別の列の金額に影響するためです。

ドロップダウンのコードは次のとおりです。

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);
            });
        }
    }
}
)
4

1 に答える 1

4

2 つのことを行う必要があります。

  1. 変更の同期が完了するまで待ちます
  2. グリッドにデータソースを再読み込みするよう指示する

これはあなたのために両方を行うはずです

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

詳細については、ドキュメント サイトのデータソース同期イベントとデータソース読み取りメソッドを参照してください。

于 2013-03-17T16:06:52.180 に答える