Prevent Specific column from re-ordering

8 posts, 0 answers
  1. A
    A avatar
    1 posts
    Member since:
    Oct 2012

    Posted 22 Oct 2012 Link to this post

    Hi,

    I am trying to prevent a checkbox column (first column) on a gird from reordering, I overrided the grid-column-reorder event and tried the e.PreventDefault after checking the correct index value(s) with no luck what so ever. I even tried calling grid.reorderColumn with no luck too. 

    Is there anyway I can prevent a specific column from reordering but allow other columns to reorder ?

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 26 Oct 2012 Link to this post

    Hello,

    The Grid does not allow such configuration. The re-size-ing feature could be either activated for all the columns or disabled.

    Regards,
    Petur Subev
    the Telerik team
    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
  4. Suril
    Suril avatar
    3 posts
    Member since:
    Sep 2012

    Posted 07 Nov 2012 Link to this post

    I have same requirement where we want to stop reordering on specific column of the grid.

    Do any one have idea how to implement it?
  5. Giovanni
    Giovanni avatar
    37 posts
    Member since:
    Feb 2011

    Posted 30 Jan 2013 Link to this post

    Hello,
    I have also a first checkbox column.
    I would like to prevent reordering and resize of the first column that must be a fix column.
    Is it possible to obtain this behaviour? 
    If not, do you plan to add this option? We would like to introduce Kendo Grid in our products, but without this option I don't know if the grid could be used in production..

    Thanks.
  6. Ryan
    Ryan avatar
    38 posts
    Member since:
    Mar 2014

    Posted 12 Mar 2014 Link to this post

    I know this is old but stumbled across it and thought I'd share. This isn't provided out of the box but here's a simple solution:

    In the columns definition add a reorderable: false property, and optionally a stickyPosition property (see onReorder).

    columns: [
        { field: "check_row", title: " ", template: "<input class='check-row' type='checkbox' />", reorderable: false, stickyPosition: 0 },
        "ProductName",
        ...
    ]

    Set a callback for the columnReorder event.

    $("#grid").kendoGrid({ columnReorder: onReorder, ... });

    This onReorder callback function below will place the column back to the stickyPosition column index, or 0 if not provided.

    function onReorder(e) {
        if (typeof e.column.reorderable != "undefined" && !e.column.reorderable) {
            var grid = $('#grid').data('kendoGrid');
            setTimeout(function() {
                grid.reorderColumn(e.column.stickyPosition || 0, grid.columns[e.newIndex]);
            }, 0);
        }
    }
  7. Ryan
    Ryan avatar
    38 posts
    Member since:
    Mar 2014

    Posted 12 Mar 2014 in reply to Ryan Link to this post

    Actually this is even easier than I first posted... No need for stickyPosition.

    function onReorder(e) {
        if (typeof e.column.reorderable != "undefined" && !e.column.reorderable) {
            var grid = $('#grid').data('kendoGrid');
            setTimeout(function() {
                grid.reorderColumn(e.oldIndex, grid.columns[e.newIndex]);
            }, 0);
        }
    }
  8. donig
    donig avatar
    8 posts
    Member since:
    Jun 2012

    Posted 01 Sep 2015 Link to this post

    The solution doesn't work fully. It only keeps you from moving a reorderable column. However, you can move another column that causes the "non-reorderable" column to move.

     

  9. Gabe
    Gabe avatar
    1 posts
    Member since:
    Aug 2015

    Posted 19 Nov 2015 in reply to donig Link to this post

    Assuming your nonreorderable column will be on the end you can use this: (it could be modified to look at columns between the range)

    var grid = $(gridName).data('kendoGrid');
    if (grid.columns[e.newIndex].reorderable === false || grid.columns[e.oldIndex].reorderable === false) {
        setTimeout(function () {
            grid.reorderColumn(e.oldIndex, grid.columns[e.newIndex]);
        }, 0);
    }

Back to Top
Kendo UI is VS 2017 Ready