Kendo sortable and crud not working

2 posts, 0 answers
  1. Anbazhagan
    Anbazhagan avatar
    1 posts
    Member since:
    May 2016

    Posted 24 May Link to this post

    Hi,

    Initially i had Grid with CRUD operations working properly and after adding sortable now sortable is working fine but CRUD  is not working

    if i remove sortable crud is working fine. I need to make both working where am i making mistake

    $(document).ready(function () {
                        function dataSource_change(e) {
                          var data = this.data();
                          console.log(data.length); // displays "77"
                        }
                        var dataSource = new kendo.data.DataSource({
                           //pageSize: 20,
                          transport:{
                              read:{
                                url: function() {
                                  return "/makes"},
                                dataType: "json",
                                cache: false
                              },
                              update: {
                                url: function (make) {
                                console.log(make)
                                
                                return  "/makes/"+ make.models[0].id
                                },
                                type: "PUT",
                                dataType: "json",
                                beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token',jQuery('meta[name="csrf-token"]').attr("content")); }
                              },
                              destroy: {
                                  url: function (make) {
                                    return  "/makes/"+ make.models[0].id
                                  },
                                  type: "DELETE",
                                  dataType: "json"
                              },
                              create: {
                                  url: "/makes",
                                  type: "POST",
                                  dataType: "json"
                              },
                              parameterMap: function (options, operation) {
                              if (operation !== "read"  && options.models) {
                                console.log(options)
                                return{"make": options.models[0]};
                              }
                              else{
                                return {"make":options};
                                }
                              }
                          },
                          batch: true,
                           schema: {
                               model: {
                                 id: "id",
                                 fields: {
                                    id: { editable: false, nullable: true },
                                    name: { validation: { required: true } },
                                 }
                               }
                           }
                        });
                        dataSource.bind("change", dataSource_change);
                        dataSource.fetch();

                        var grid = $("#grid").kendoGrid({
                            dataSource: dataSource,
                            pageable: false,
                            height: 550,
                            toolbar: [{name: "create", text: "Add New Make"}],
                            columns: [
                                { field:"name",title:"Makes" },                                      
                                { command: ["edit", "destroy"], title: "Action", width: "250px" }],
                            editable: "inline"
                        }).data("kendoGrid");
                        grid.table.kendoSortable({
                            filter: ">tbody >tr",
                            hint: $.noop,
                            cursor: "move",
                            placeholder: function(element) {
                                return element.clone().addClass("k-state-hover").css("opacity", 0.65);
                            },
                            container: "#grid tbody",
                            change: function(e) {
                                console.log(grid)
                                var skip = grid.dataSource.skip(),
                                    oldIndex = e.oldIndex + skip,
                                    newIndex = e.newIndex + skip,
                                    data = grid.dataSource.data(),
                                    dataItem = grid.dataSource.getByUid(e.item.data("uid"));
                                var updated_order = []
                                $('tbody tr').each(function(i){
                                  updated_order.push({ name: $(this).children('td:first').text(), position: i+1 });
                                });
                                controller_name = $('#controller_name').val();
                                $.ajax({
                                  type: "PUT",
                                  url: '/sort',
                                  data: { order: updated_order, controller_name: controller_name }
                                });

                                grid.dataSource.remove(dataItem);
                                grid.dataSource.insert(e.newIndex, dataItem);
                            }
                        });

                    });

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 26 May Link to this post

    Hello Anbazhagan,

    Check this help topic.

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top