Проблема с перетаскиванием сетки Kendo

Мы используем функцию перетаскивания кендо внутри таблицы сетки кендо.

1) Если пользователь предоставляет данные в любых редактируемых полях и без сохранения данных, если пользователь щелкает / переходит к другому полю для редактирования. Пользователь теряет свои обновленные данные.

2) Если пользователь обновляет какие-либо записи, мы снова обновляем / регенерируем таблицу, или если мы обновляем / регенерируем вне функции, Или мы добавляли новые записи, используя вне функции. После этого пользователь не сможет удалить строку для замены на другую.

файл Jsfiddel

var data = [
                    { Id: 1, Name: "data 1", Position: 1 },
                    { Id: 2, Name: "data 2", Position: 2 },
                    { Id: 3, Name: "data 3", Position: 3 }
                ];

                var dataSource = new kendo.data.DataSource({
                        data: data,        
                        schema: {
                            model: {
                                Id: "Id",
                                fields: {
                                    Id: { type: "number" },
                                    Name: { type: "string" },
                                    Position: { type: "number" }
                                }
                            }
                        }
                    });

                var grid= $("#grid").kendoGrid({
                    dataSource: dataSource,  
                    scrollable: false,    
                    editable : true,
                    toolbar:  ["save","cancel", "create"],
                   columns: ["Id", "Name", "Position"]            
                }).data("kendoGrid");

            grid.table.kendoDraggable({
                    filter: "tbody > tr:not(.k-grid-edit-row)",
                    group: "gridGroup",
                cursorOffset: { top: 10, left: 10 },
                    hint: function(e) {

                        return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
                    }
                });


            grid.table/*.find("tbody > tr")*/.kendoDropTarget({

                  group: "gridGroup",
                  drop: function (e) {

                    var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
                          dest = $(e.target);

                    if (dest.is("th")) {
                      return;
                    }
                    dest = dataSource.getByUid(dest.parent().data("uid"));

                    //not on same item
                    if (target.get("Id") !== dest.get("Id")) {
                      //reorder the items
                      var tmp = target.get("Position");
                      target.set("Position", dest.get("Position"));
                      dest.set("Position", tmp);

                      dataSource.sort({ field: "Position", dir: "asc" });
                    }
                  }
                });

person Piyush    schedule 03.04.2013    source источник
comment
См. Ссылку на файл jsfiddel. ‹jsfiddle.net/piyushparmar01/yCDjm/10  -  person Piyush    schedule 03.04.2013
comment
не могу добраться до вашей скрипки js .. Попробуйте опубликовать свой код с вопросом   -  person Deepu    schedule 03.04.2013
comment
В определении model попробуйте заменить Id: "Id" на id: Id.   -  person OnaBai    schedule 03.04.2013


Ответы (2)


  1. Некоторое время назад я столкнулся с подобной проблемой. А также я нашел следующую ветку на их форуме - http://www.kendoui.com/forums/ui/grid/drag-and-drop-reordering.aspx#boD2qq6aG2OF1P8AAFTdxQ

    Итак, если вы добавите еще один дополнительный столбец в таблицу и поместите туда изображение или какой-либо другой элемент, вы сможете использовать этот элемент в качестве перетаскиваемой цели, например:

    grid.table.kendoDraggable({
        filter: "tbody > .draggableTarget".....
    
  2. Таблица полностью воссоздается в DOM в случае, когда вы обновляете ее, поэтому вам нужно повторно подписаться на функцию перетаскивания.

person zihotki    schedule 28.05.2013

У меня были аналогичные проблемы с использованием нового kendoSortable с редактируемой сеткой для сортировки строк перетаскиванием.

Эта скрипка http://jsfiddle.net/UsCFK/273/ работает.

Он использует столбец с ручкой перетаскивания, как упоминалось выше, чтобы предотвратить потерю редактирования ячеек - другие ячейки игнорируются в настройке:

grid.table.kendoSortable({
    filter: ">tbody >tr",
    hint: $.noop,
    cursor: "move",
    ignore: "TD, input",
    placeholder: function (element) {
      return element.clone().addClass("k-state-hover").css("opacity", 0.65);
    },
    container: '#grid tbody',
    change: onGridRowChange
});

Он также обновляет поле позиции в источнике данных, а не удаляет, а затем повторно вставляет строку, как в некоторых других примерах, поскольку это вызовет запрос на удаление на сервер для каждой перемещаемой строки, что может вызвать проблемы при нажатии кнопка отмены пакетного редактирования. Поле позиции показано только в демонстрационных целях - оно не должно открываться для ручного редактирования.

person lewism    schedule 18.02.2016