Снимите флажок при прокрутке вверх и вниз в сетке пользовательского интерфейса кендо.

У меня есть одна сетка пользовательского интерфейса кендо, и я привязываюсь к Javascript, ниже приведен код для того же.

Моя проблема заключается в том, что когда я устанавливаю флажок, прокручиваю сетку вниз и прокручиваю вверх, тогда этот флажок снят, даже если я перехожу на следующую страницу, а затем получаю ту же проблему.

$(gridName).html("");
    var fieldSchema = [];
    var columnSchema = [];

columnSchema.push({
    field: "",
    width: "30px",
    template: "<input id='chkDelete' type='checkbox' />",
});


var counter = 0;
$.each(data, function (index) {
    counter = counter + 1;
    var xmldoc = $.parseXML(data[index].CustomFields);
    var $xml = $(xmldoc);
    var jsonStr = '{';
    $xml.find("Fields").find("Field").each(function () {
        jsonStr = jsonStr + '"' + $(this).attr("Title").replace(/\s/g, '').replace(/[^\w\s]/gi, '') + '":{';
        jsonStr = jsonStr + '"Title":"' + $(this).attr("Title") + '",';
        jsonStr = jsonStr + '"Value":"' + $(this).attr("Value") + '",';
        jsonStr = jsonStr + '"Id":"' + $(this).attr("Id") + '"},';

        if (counter == 1) {
            columnSchema.push({
                field: $(this).attr("Title").replace(/\s/g, '').replace(/[^\w\s]/gi, '') + ".Value",
                title: $(this).attr("Title"),
                width: "128px",
                template: "#=" + $(this).attr("Title").replace(/\s/g, '').replace(/[^\w\s]/gi, '') + ".Value#",
            });

        }
    });
    jsonStr = jsonStr + '"CustomFields":"' + data[index].CustomFields.replace(/\"/g, "\'") + '",';
    jsonStr = jsonStr + '"ValidationPlanId":"' + data[index].ValidationPlanId + '",';
    jsonStr = jsonStr + '"IsTrCreated":"' + data[index].IsTrCreated + '",';
    jsonStr = jsonStr + '"Note":"' + data[index].Note + '",';
    jsonStr = jsonStr + '"IsUpdate":"' + data[index].IsUpdate + '",';
    jsonStr = jsonStr + '"TestRequestId":"' + data[index].TestRequestId + '"';
    jsonStr = jsonStr + '}';

    fieldSchema.push($.parseJSON(jsonStr));
});

var dtVpAdd = new kendo.data.DataSource({
    data: fieldSchema,
    schema: {
        model: {
            id: "ValidationPlanId"
        },
        total: function (result) {
            var totalCount = result.length;
            return totalCount;
        }

    }

});
dtVpAdd.pageSize(10);


$(gridName).kendoGrid({
    dataSource: new kendo.data.DataSource({
        data: fieldSchema,
        schema: {
            model: {
                id: "ValidationPlanId"
            }
        },
        pageSize: 10
    }),
    columns: columnSchema,
    filterable: true,
    sortable: {
        mode: "multiple",
        allowUnsort: true
    },
    scrollable: {
        virtual: true
    },
    resizable: true,
    reorderable: true,
    pageable: {
        input: true,
        numeric: false
    },

    dataBound: function () {
        $(gridName).on('click', '#chkDeleteAll', function () {
            var checked = $(this).is(':checked');
            $("input[id*='chkDelete']:checkbox").attr('checked', checked);
        });
    },

});

javascript jquery kendo-grid asp.net-mvc-4 kendo-ui
person Himanshu N Tatariya    schedule 30.07.2014    source источник
comment
Флажки в сетке немного сложны, поскольку вы не можете обновить их (нажмите на флажок), не входя в режим редактирования. Вы помнили об этом? Если нет, вы видите отмеченный флажок, но модель на самом деле не обновляется, поэтому при загрузке новых данных (страница, прокрутка, фильтр и т. д.) изменения теряются.   -  person OnaBai    schedule 30.07.2014

Ответы (1)


arrow_upward
2
arrow_downward

Флажки в сетке немного сложны, так как вы не можете обновить их (нажмите на флажок), не входя в режим редактирования.

Если вы не примете это во внимание, вы увидите отмеченный флажок, но модель на самом деле не обновляется, поэтому при загрузке новых данных (страница, прокрутка, фильтр...) изменения теряются.

Одним из возможных решений является определение обработчика событий, который при установке флажка обновляет модель.

Шаги:

Измените определение шаблона на:

template: "<input class='ob-checkbox' type='checkbox' #= Checkbox ? 'checked' : '' #/>",

Где я указываю, как отображать флажок и какое значение является текущим (в этом примере значение поля Checkbox).

Затем определите обработчик для этих input. Для этого вместо того, чтобы делать это в dataBound, я предпочитаю делать это после инициализации Grid с помощью обработчика событий в реальном времени. Что-то типа:

grid.wrapper.on("click", ".ob-checkbox", function(e) {
    // Get the row containing the checkbox
    var row = $(e.currentTarget).closest("tr");
    // Get the item in the model corresponding to that row
    var item = grid.dataItem(row);
    // Get current value of the rendered checkbox (not the value in the model)
    var value = this.checked;
    // And update the model
    item.set("Checked", value);
});

Где grid определяется как:

var grid = $(gridName).data("kendoGrid");

Посмотрите, как это работает здесь: http://jsfiddle.net/OnaBai/QubWN/.

person OnaBai    schedule 30.07.2014
comment
Если у кого-то возникнут проблемы с нижеприведенной строкой item.set(Checked,value); затем напишите ниже строку item.Checked = значение, где Checked — это имя вашего поля. - person Himanshu N Tatariya; 31.07.2014
comment
Здравствуйте, OnaBai. Ваше решение отлично работает в одной сетке, но когда я применяю ко второй сетке, оно не работает, оно дает мне ошибку ниже. элемент не определен. Это означает, что grid.dataItem(row) не определен. пожалуйста, дайте мне знать, в чем проблема с этим. - person Himanshu N Tatariya; 31.07.2014
comment
Можете ли вы воспроизвести это в JSFiddle? Пришлите мне ссылку, я посмотрю. Я пробовал, и это работает: jsfiddle.net/OnaBai/QubWN/4 - person OnaBai; 31.07.2014
comment
var item = $(#grid1).data(kendoGrid).dataItem($(e.currentTarget).closest(tr)); приведенный выше код работает, спасибо - person Himanshu N Tatariya; 31.07.2014
comment
@OnaBai - Та же проблема, с которой я столкнулся, теперь моя сетка просмотра дерева кендо. Пробовал по вашему коду. Но в моем случае это не работает. Пожалуйста, помогите мне достичь этого. Вот ссылка на додзё dojo.telerik.com/uLalo - person bagya; 16.04.2016
comment
@OnaBai, пожалуйста, посмотрите мой код и дайте решение. Я жду вашего ответа. Спасибо... - person bagya; 18.04.2016