All geek questions in one place

Custom reordering Kendo Grid

I am using the Kendo Grid user interface. Below is an example of this.

<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css"   rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.rtl.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.silver.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.dataviz.silver.min.css" rel="stylesheet" />
 <link href="/kendo-ui/content/shared/styles/examples.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>


</head>
<body>

    <div id="main">
<h1 id="exampleTitle">
        <span class="exampleIcon gridIcon"></span>
        <strong>Grid /</strong> Column resizing    </h1>

<div id="theme-list-container"></div>

<div id="exampleWrap">
    <script>preventFOUC()</script>


    <div id="example" class="k-content">
        <div id="grid"></div>

        <script>
            $(document).ready(function() {
            gridDataSource = new kendo.data.DataSource({
            transport: {
                                        read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                                    },
                                });
                $("#grid").kendoGrid({
                    dataSource: gridDataSource,
                    scrollable: true,
                    resizable: true,

                    columns: [
                       {
                            field: "OrderID",
                            title: "ID"

                        }, {
                            field: "OrderDate",
                            title: "Order Date"


                        },
                        {
                            field: "ShipCountry",
                            title: "Ship Country"

                        },
                        {
                            field: "ShipCity",
                            title: "Ship City"

                        },
                        {
                            field: "ShipName",
                            title: "Ship Name"

                        },
                        {
                            field: "ShippedDate",
                            title: "Shipped Date"

                        }

                    ]
                });
            });
        </script>
    </div>
</div>
</div>

I want to reorder columns. I disabled drag and drop on OrderID. But columns other than OrderID can be reordered, and these columns can be placed before the OrderID column.

Is there a way in which I can disable column deletion before OrderID?

+4
source share
2 answers

You must do this in two steps:

  • Disable deletion in the first column.
  • Disable drag and drop of the first column.

For the first part, after creating the grid, you can:

$("th:nth(0)", "#grid").data("kendoDropTarget").destroy();

, grid th:nth(0) KendoUI DropTarget ( ).

dragstart, , , , .

$("#grid").data("kendoDraggable").bind("dragstart", function(e) {
    if (e.currentTarget.text() === "ID") {
        e.preventDefault();
    }
});

. (ID), , th , preventDefault.

, : http://jsfiddle.net/OnaBai/jzZ4u/1/

+9

:

kendo.ui.Grid.fn._reorderable = function (reorderable) {
    return function () {
        reorderable.call(this);

        var dropTargets = $(this.element).find('th.disable-reorder');

        dropTargets.each(function (idx, item) {
            $(item).data("kendoDropTarget").destroy();
        });

        var draggable = $(this.element).data("kendoDraggable");

        if (draggable) {

            draggable.bind("dragstart", function (e) {
                if ($(e.currentTarget).hasClass("disable-reorder"))
                    e.preventDefault();
            });

        }
    }
}(kendo.ui.Grid.fn._reorderable);

.disable-reorder

0
source

Source: https://habr.com/ru/post/1524812/

More articles:


All Articles