Question

-6

How to reorder kendo grid rows?

rated 0 times [ 0] [ 6] / answers: 1 / hits: 10522 / 11 Years ago, tue, december 3, 2013, 12:00:00

I am dynamically adding rows to kendo gid. Now i need a reorder button ,where i can able to move a row up and down . i don't want drag and drop functionality. Im able to get each row id .need some help...

<script>

$(document).ready(function () {

    var grid = $(#grid).kendoGrid({

        columns: [

            { field: Control, title: Web Control Name },

            { field: Value, title: Drag & Drop Variable },

            {

                command: [

                { title: create, template: <img class='ob-image' src='../DefaultAssets/Images/New.png' style='padding: 0 15px 0 5px;' /> },

                { title: reorder, template: <img class ='up-image' src='../DefaultAssets/Images/Upimages.jpg' style='padding: 0 15px 0 5px;' /> },

                { name: destroy, title:  }

                ],

            },

        ],

        dataSource: {

            data: [

              {

                  Control: Web Control name,

                  Value: Drag & Drop Variable

              },

            ],

            schema: {

                model: {

                    Control: Web Control name,

                    Value: Drag & Drop Variable

                }

            }

        },

        reorderable: true,



        editable: {

            //    confirmation: Are you sure that you want to delete this record?,

            createAt: bottom

        },

        remove: function (e) {

        }

    });

    var grid = $(#grid).data(kendoGrid);

    $(#grid).on(click, .ob-image, function () {

        var grid = $(#grid).data(kendoGrid);            

        grid.addRow();          

    });



    $(#grid).on(click, .up-image, function () {

        var row = $(this).closest(tr);

        var rowIdx = $(tr, grid.tbody).index(row);         

        alert(rowIdx);

    });



});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jocelynkarsynr

Add To Favorites

Follow

Total Points: 472

Total Questions: 98

Total Answers: 96

Location: Macau

Member since Mon, Nov 16, 2020

4 Years ago

jocelynkarsynr questions

1 file upload using axios in react

Tue, Feb 8, 22, 00:00, 2 Years ago

1 Unable to write data (addRow) into Excel file in Nodejs

Sat, Jul 11, 20, 00:00, 4 Years ago

1 How can I export * as namespace in Babel?

Sun, May 10, 20, 00:00, 4 Years ago

1 React Routing to Same Component with Different URL

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How do I persist user authentication using the Firebase refresh token?

Tue, Aug 20, 19, 00:00, 5 Years ago

View All

answered 11 Years ago ravenl · Accepted Answer

You can create a template column and use the data source insert and remove methods to rearrange the data items. The grid will be refreshed automatically.

$(#grid).kendoGrid({

  dataSource: [

    { foo: foo },

    { foo: bar },

    { foo: baz }

  ],

  columns: [

    { field: foo },

    { template: '<button onclick=return up('#=uid#')>up</button><button onclick=return down('#=uid#')>down</button>' }

  ]  

});





function up(uid) {

  var grid = $(#grid).data(kendoGrid);

  var dataItem = grid.dataSource.getByUid(uid);

  var index = grid.dataSource.indexOf(dataItem);

  var newIndex = Math.max(0, index - 1);



  if (newIndex != index) {

    grid.dataSource.remove(dataItem);

    grid.dataSource.insert(newIndex, dataItem);

  }



  return false;

}



function down(uid) {

  var grid = $(#grid).data(kendoGrid);

  var dataItem = grid.dataSource.getByUid(uid);

  var index = grid.dataSource.indexOf(dataItem);

  var newIndex = Math.min(grid.dataSource.total() - 1, index + 1);



  if (newIndex != index) {

    grid.dataSource.remove(dataItem);

    grid.dataSource.insert(newIndex, dataItem);

  }



  return false;

}

Here is a live demo: http://jsbin.com/ExOgiPib/1/edit