【问题标题】:How to prevent rebind on kendo grid data item change?如何防止重新绑定剑道网格数据项更改?
【发布时间】:2015-12-06 22:41:07
【问题描述】:

我有一个剑道网格,当一个项目被选中时,我想修改底层数据项目,所以我正在这样做......

selectionChange: function(e)
    {
        var component = $(this.table).closest('.component');
        var grid = this;
        var val = !component.hasClass("secondary");

        var selection = grid.dataItems(grid.select());
        selection.forEach(function () {
            this.set("SaleSelected", val);
        });
    }

我还有 2 个按钮可以让我在 2 个网格之间推动项目...

select: function (e) {
            e.preventDefault();
            var sender = this;

            // get kendo data source for the primary grid
            var source = $(sender).closest(".component")
                .find(".component.primary")
                .find(".details > [data-role=grid]")
                .data("kendoGrid")
                .dataSource;

            // sync and reload the primary grid
            source.sync()
                .done(function () {
                    source.read();
                    my.Invoice.reloadGridData($(sender).closest(".component").find(".component.secondary").find(".details > [data-role=grid]"));
                });

            return false;
        },
        deselect: function (e) {
            e.preventDefault();
            var sender = this;
            debugger;
            // get kendo data source for the secondary grid
            var source = $(sender).closest(".component")
                .find(".component.secondary")
                .find(".details > [data-role=grid]")
                .data("kendoGrid")
                .dataSource;

            // sync and reload the primary grid
            source.sync()
                .done(function () {
                    source.read();
                    my.Invoice.reloadGridData($(sender).closest(".component").find(".component.primary").find(".details > [data-role=grid]"));
                });

            return false;
        }

本质上,grid1 中的“选定项目”可以在服务器上标记为这样,然后重新加载网格以移动项目。

我觉得很好,但显然剑道有其他想法。

编辑数据项会导致其所属的网格重新绑定丢失选择状态,从而导致用户出现一些混乱的行为。

有没有办法告诉剑道“我现在要编辑这个未绑定的属性,不要搞乱绑定”?

【问题讨论】:

    标签: javascript data-binding kendo-ui kendo-grid


    【解决方案1】:

    我认为您可以将 dataBinding 事件绑定到一个“preventDefault”,然后解除绑定并在闲暇时刷新

    var g = $("#myGrid").data("kendoGrid");
    
    g.bind("dataBinding", function(e) { e.preventDefault(); });
    

    然后……

    g.unbind("dataBinding");
    

    【讨论】:

    • 唯一的问题是我不希望绑定跟随选择更改,所以它不像我可以删除绑定,进行更改,然后重新添加它。我不确定如何将其作为解决方案实施。
    【解决方案2】:

    好吧,事实证明剑道有点古怪,我仍然不明白为什么他们坚持要你调用他们所有的“api 东西”来完成简单的任务,而更直接地做事实际上效果更好。

    在我的情况下,我完全删除了选择更改调用并让 kendo 处理它,然后在我的选择按钮处理程序中移动网格之间的数据我直接更新了数据项上的属性,而不是调用 "item.set("prop", value)" 我现在必须做 "item.prop = value"。

    最终结果是这样的......

    select: function (e) {
                e.preventDefault();
                var sender = this;
    
                // get some useful bits
                var component = $(sender).closest(".component");
                var primaryGrid = component.find(".component.primary").find(".details > [data-role=grid]").data("kendoGrid");
    
                // get the new selection, and mark the items with val
                var selection = $(primaryGrid.tbody).find('tr.k-state-selected');
    
                selection.each(function (i, row) {
                    primaryGrid.dataItem(row).SaleSelected = true;
                    primaryGrid.dataItem(row).dirty = true;
                });
    
                // sync and reload the primary grid
                primaryGrid.dataSource.sync()
                    .done(function () {
                        primaryGrid.dataSource.read();
                        component.find(".component.secondary")
                            .find(".details > [data-role=grid]")
                            .data("kendoGrid")
                            .dataSource
                            .read();
                    });
    
                return false;
            },
            deselect: function (e) {
                e.preventDefault();
                var sender = this;
    
                // get some useful bits
                var component = $(sender).closest(".component");
                var secondaryGrid = component.find(".component.secondary").find(".details > [data-role=grid]").data("kendoGrid");
    
                // get the new selection, and mark the items with val
                var selection = $(secondaryGrid.tbody).find('tr.k-state-selected');
    
                selection.each(function (i, row) {
                    secondaryGrid.dataItem(row).SaleSelected = false;
                    secondaryGrid.dataItem(row).dirty = true;
                });
    
                // sync and reload the primary grid
                secondaryGrid.dataSource.sync()
                    .done(function () {
                        secondaryGrid.dataSource.read();
                        component.find(".component.primary")
                            .find(".details > [data-role=grid]")
                            .data("kendoGrid")
                            .dataSource
                            .read();
                    });
    
                return false;
            }
    

    kendo 似乎将任何对 item.set(p, v) 的调用作为重新加载数据的触发器,因此避免使用 kendo 包装器并直接进入项目属性允许我直接控制该过程。

    将代码从选择更改事件处理程序移动到按钮单击处理程序也意味着我只关心数据在实际需要发送到服务器时是否正确,我只需要注意这一点。

    我不喜欢这个,但它相当干净,即使基础数据不太正确,用户界面也能显示正确的图片。

    我的另一个选择是创建一个自定义绑定,但鉴于绑定必须根据天气产生不同的结果,它绑定到主网格或辅助网格我怀疑这将是很多 js 代码,这个感觉就像两害相权取其轻。

    【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-01-23
    • 2015-10-19
    • 1970-01-01
    • 1970-01-01
    • 2014-02-21
    • 1970-01-01
    相关资源
    最近更新 更多