Kendo网格自定义重新排序

Vivek Parekh

我正在使用Kendo Grid UI。以下是相同的示例。

<!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>

我想对列进行自定义重新排序。我已禁用对OrderID的拖放。但是可以对OrderID以外的列进行重新排序,并且可以将这些列放在OrderID列之前。

有没有一种方法可以禁止在OrderID之前删除列?

奥纳拜

您应该分两个步骤进行操作:

  1. 禁止放入第一列。
  2. 禁用拖动第一列。

创建网格后的第一部分,您可以执行以下操作:

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

它从标识符为的网格gridth: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/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Kendo网格自定义重新排序

来自分类Dev

Kendo网格自定义列

来自分类Dev

自定义Kendo UI的网格

来自分类Dev

可以通过编程触发的Kendo网格上的自定义排序

来自分类Dev

Kendo UI网格中的自定义命令

来自分类Dev

Kendo网格上的“自定义删除确认”弹出窗口

来自分类Dev

自定义Kendo UI网格页脚-动态更新

来自分类Dev

ASP.Net MVC Kendo网格的自定义分页

来自分类Dev

Kendo网格上的“自定义删除确认”弹出窗口

来自分类Dev

自定义Kendo UI网格页脚-动态更新

来自分类Dev

在Yii的网格视图中为“自定义”列排序

来自分类Dev

Kendo Grid自定义分组排序顺序

来自分类Dev

使用自定义顺序对行重新排序

来自分类Dev

自定义UITableViewCell不显示重新排序控件

来自分类Dev

Java-JTable自定义TableCellRenderer +允许重新排序

来自分类Dev

自定义排序`by =`

来自分类Dev

自定义网格视图

来自分类Dev

网格视图自定义

来自分类Dev

可视自定义网格

来自分类Dev

网格组件和使用自定义排序侦听器进行排序

来自分类Dev

Kendo UI-2个日期之间的网格/过滤器菜单自定义

来自分类Dev

如何自定义Kendo UI网格行的所选背景颜色

来自分类Dev

Web API 2.2 OData V4-Kendo网格-自定义创建的IHttpActionResult

来自分类Dev

有什么方法可以在Kendo网格自定义弹出模板中设置默认值?

来自分类Dev

过滤Kendo UI MVC网格时的自定义谓词构建

来自分类Dev

Kendo Grid-验证消息未显示在网格的自定义编辑器上

来自分类Dev

preventDefault()在Kendo网格的自定义单击处理程序中不起作用

来自分类Dev

Kendo网格-分组不适用于自定义编辑器下拉列表

来自分类Dev

自定义复选框在Kendo网格中不可单击

Related 相关文章

热门标签

归档