Kendo Grid拖放列功能不起作用

时间:2013-08-23 05:19:23

标签: jquery asp.net-mvc kendo-ui kendo-grid

I'm using kendo with ASP.Net MVC4. I've got a problem with grid grouping function. When it load to the **first time, that worked properly**. But after loading next time this problem was occurred.      函数GetDataSource(){

    //PrjKy, PrcsDetKy, PrcsTypKy, AprPrtyKy, AprStsKy, OrginAdrKy, AprUsrKy, NxtActByAdrKy, FrmNxtActDt, ToNxtActDt, FrmInsertDt, ToInsertDt

    var PrjKy = $("#cmbPrjNm").val();
    if (PrjKy == "") { PrjKy = 1; }

    var PrcsDetKy = 1;
    if (PrcsDetKy == "") { PrcsDetKy = 1; }

    var PrcsTypKy = 1;
    if (PrcsTypKy == "") { PrcsTypKy = 1; }

    var AprPrtyKy = 1;
    if (AprPrtyKy == "") { AprPrtyKy = 1; }

    var AprStsKy = 1;
    if (AprStsKy == "") { AprStsKy = 1; }

    var OrginAdrKy = 1;
    if (OrginAdrKy == "") { OrginAdrKy = 1; }

    var AprUsrKy = 1;
    if (AprUsrKy == "") { AprUsrKy = 1; }

    var NxtActByAdrKy = $("#cmbEmployee").val();
    if (NxtActByAdrKy == "") { NxtActByAdrKy = 1; }

    var FrmNxtActDt = $("#rcdDt").val();

    var ToNxtActDt = $("#toDt").val();

    var FrmInsertDt = "";

    var ToInsertDt = "";

    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: '@Url.Content("~/User/GetAllToDo")',
                data: {
                    'PrjKy': PrjKy,
                    'PrcsDetKy': PrcsDetKy,
                    'PrcsTypKy': PrcsTypKy,
                    'AprPrtyKy': AprPrtyKy,
                    'AprStsKy': AprStsKy,
                    'OrginAdrKy': OrginAdrKy,
                    'AprUsrKy': AprUsrKy,
                    'NxtActByAdrKy': NxtActByAdrKy,
                    'FrmNxtActDt': FrmNxtActDt,
                    'ToNxtActDt': ToNxtActDt,
                    'FrmInsertDt': FrmInsertDt,
                    'ToInsertDt': ToInsertDt
                },
                dataType: "json"
            },
            update: {
                url: '@Url.Content("~/User/UpdateToDo")',
                type: "POST",
                success: function (data, status, xhr) {
                    alert("success");
                },
                error: function (xhr, status, error) {
                    alert("error");
                }
            },
            create: {
                url: '@Url.Content("~/User/InsertToDo")',
                type: "POST",
                success: function (data, status, xhr) {
                    alert("success");
                },
                error: function (xhr, status, error) {
                    alert("error");
                }
            },
            destroy: {
                url: '@Url.Content("~/User/DeleteToDo")',
                type: "POST"
            }
        },
        pageSize: 10
    , schema:
    {
        model:
        {
            id: "PrcsDetKy", //Primary key to uniquely identify the row.
            fields: //Relavent fields of the grid should be bind with following model items
                {
                ID: { editable: true, nullable: false },
                AprDtm: { editable: true, nullable: false, validation: { required: true} },
                AprPrty: { editable: true, nullable: false, validation: { required: true} },
                AprUsr: { editable: true, nullable: true },
                AprSts: { editable: true, nullable: true },
                AprStsKy: { editable: true, nullable: true },
                AprPrtyKy: { editable: true, nullable: true },
                AprUsrKy: { editable: true, nullable: true },
                AprResnKy: { editable: true, nullable: true },
                PrjId: { editable: true, nullable: true },
                TaskId: { editable: true, nullable: true },
                TaskNm: { editable: true, nullable: false, validation: { required: true} },
                PrcsDetKy: { editable: false, nullable: false },
                TaskTyp: { editable: true, nullable: false, validation: { required: true} },
                PrcsTypKy: { editable: true, nullable: true },
                PrjKy: { editable: true, nullable: true },
                PrcsDetAprKy: { editable: true, nullable: true },
                PrjNm: { editable: true, nullable: false, validation: { required: true} },
                Des: { editable: true, nullable: false, validation: { required: true} },
                NxtActByAdr: { editable: true, nullable: false, validation: { required: true} },
                NxtActByAdrKy: { editable: true, nullable: true },
                NxtActDt: { editable: true, nullable: true },
                Rem: { editable: true, nullable: true, type: "string" },
                OriginBy: { editable: false, nullable: true },
                Hyperlinks1: { editable: false, nullable: true },
                Hyperlinks2: { editable: false, nullable: true },
                Hyperlinks3: { editable: false, nullable: true },
                Hyperlinks4: { editable: false, nullable: true },
                OrginAdrKy: { editable: true, nullable: true },
                WrkStnKy: { editable: true, nullable: true },
                ObjKy: { editable: true, nullable: true },
                ObjCd: { editable: true, nullable: true },
                ObjNm: { editable: true, nullable: true },
                ItmKy: { editable: true, nullable: true },
                ItmCd: { editable: true, nullable: true },
                IsAct: { editable: true, nullable: true },
                IsApr: { editable: true, nullable: true }
            }
        }
    }
    });

    return dataSource;
}


function LoadGridView() {

    var dataSource = GetDataSource();

     $("#grid").kendoGrid({
        dataSource: dataSource,
        editable: "inline",
        selectable: "row",
        toolbar: ["create"],
        autobind: true,
        reorderable: true,
        pageable: {
            refresh: true,
            pageSizes: [5, 10, 20, 50, 100]
        },
        sortable: {
            mode: "multiple"
        },
        sort: { field: "PrjNm", dir: "asc" },
        groupable: {
            messages: {
                empty: "Drop columns here"
            }
        },
        columnMenu: {
            sortable: true,
            filterable: true,
            messages: {
                columns: "Hide/Show Columns",
                filter: "Apply filter",
                sortAscending: "Sort (asc)",
                sortDescending: "Sort (desc)"
            }
        },
        resizable: true,
        dataBinding: function () {
            record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
        },
        filterable: {
            messages: {
                and: "And",
                or: "Or",
                filter: "Apply filter",
                clear: "Clear filter",
                info: "Filter by"
            },
            extra: true, // show extra filters
            operators: { // redefine the string operators
                string: {
                    contains: "Contains",
                    doesnotcontain: "Doesn't contain",
                    startswith: "Starts With",
                    endswith: "Ends"
                },
                number: {
                    eq: "Is Equal To",
                    neq: "Not equal to",
                    gte: "Greater than or equal to",
                    lte: "Less than or equal to",
                    gt: "Greater than",
                    lt: "Less than"
                }
            }
        },
        navigatable: true,
        columns: [
            { field: "ID", title: "Ref#", template: "#= ++record #", width: "50px" },
            {
                field: "AprDtm",
                title: "Record Date",
                editor: function (container, options) {
                    var model = options.model;
                    $('<input id="DtTxt" name="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>').appendTo(container).kendoDatePicker({
                        change: function (e) {
                            model.set("AprDtm", e.sender._oldText);
                        }
                    });
                },
                format: "{0: MM-dd-yyyy}"
            },
            {
                field: "PrjNm",
                title: "Project",
                width: "150px",
                editor: function (container, options) {
                    var model = options.model;
                    $('<input id="btntxt" name="' + options.field + '"/>').appendTo(container).kendoComboBox({
                        dataSource: {
                            type: "POST",
                            transport: {
                                read: '@Url.Content("~/User/GetProjectList")'
                            }
                        },
                        change: function (e) {

                            combo = e.sender;
                            selectedItm = combo.select();
                            dataItem = combo.dataItem(selectedItm);

                            model.set("PrjKy", dataItem.PrjKy);
                            model.set("PrjNm", dataItem.PrjNm);
                        },
                        dataValueField: "PrjKy",
                        dataTextField: "PrjNm"
                    });
                }
            },
            { field: "TaskNm", title: "Task Name", width: "150px" },
            {
                field: "Des",
                title: "Description"
            },
            {
                field: "TaskTyp",
                title: "ToDo Type",
                width: "110px",
                editor: function (container, options) {
                    var model = options.model;
                    $('<input id="cmbPrsTyp" name="' + options.field + '"/>').appendTo(container).kendoComboBox
                            ({
                                dataSource: {
                                    type: "POST",
                                    transport: {
                                        read: '@Url.Content("~/User/GetProjectTypeList")'
                                    }
                                },
                                change: function (e) {

                                    combo = e.sender;
                                    selectedItm = combo.select();
                                    dataItem = combo.dataItem(selectedItm);

                                    model.set("PrcsTypKy", dataItem.CdKy);
                                    model.set("TaskTyp", dataItem.CdNm); // Once this model updated it will aper in the grid column too

                                    return false;
                                },
                                dataValueField: "CdKy",
                                dataTextField: "CdNm"
                            });
                }
            },
            {
                field: "AprPrty",
                title: "Piority",
                width: "100px",
                editor: function (container, options) {
                    var model = options.model;
                    $('<input id="cmbPrsTyp" name="' + options.field + '"/>').appendTo(container).kendoComboBox
                            ({
                                dataSource: {
                                    type: "POST",
                                    transport: {
                                        read: '@Url.Content("~/User/GetPiorityList")'
                                    }
                                },
                                change: function (e) {
                                    combo = e.sender;
                                    selectedItm = combo.select();
                                    dataItem = combo.dataItem(selectedItm);

                                    model.set("AprPrty", dataItem.CdNm);
                                    model.set("AprPrtyKy", dataItem.CdKy);

                                    return false;
                                },
                                dataValueField: "CdKy", //value member of the combobox Eg: 8645
                                dataTextField: "CdNm"//display member of the combobox Eg: Hight
                            });
                }
            },
            {
                field: "NxtActByAdr",
                title: "Act By",
                editor: function (container, options) {
                    var model = options.model;
                    $('<input id="usr" name="' + options.field + '"/>').appendTo(container).kendoComboBox
                            ({
                                dataSource: {
                                    type: "POST",
                                    transport: {
                                        read: '@Url.Content("~/User/GetEmployeeList")'
                                    }
                                },
                                change: function (e) {
                                    combo = e.sender;
                                    selectedItm = combo.select();
                                    dataItem = combo.dataItem(selectedItm);

                                    model.set("NxtActByAdr", dataItem.AdrNm);
                                    model.set("NxtActByAdrKy", dataItem.AdrKy);

                                    return false;
                                },
                                dataValueField: "AdrKy",
                                dataTextField: "AdrNm"
                            });
                },
                width: "150px"
            },
            {
                field: "NxtActDt",
                title: "Next Act Date",
                editor: function (container, options) {
                    var model = options.model;
                    $('<input id="NxActDtTxt" name="' + options.field + '"/>').appendTo(container).kendoDatePicker({
                        change: function (e) {
                            model.set("NxtActDt", e.sender._oldText);
                        }
                    });
                },
                format: "{0: MM-dd-yyyy}",
                width: "110px"
            },
            { field: "Rem", title: "Remarks" },
            { command: ["edit", "destroy"], title: "", width: "180px" }
        ]
    });

}


$("#btnLoadGrid").click(function () {
    LoadGridView();
});

我正在使用剑道与ASP.Net MVC4。我的网格分组功能有问题。当它加载到第一次时,它正常工作。但下次加载后出现了这个问题。

请帮我解决这个问题........................................ .. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. .................................................. ...............

1 个答案:

答案 0 :(得分:1)

即使我第一次遇到了拖放工作的问题,也没有遇到过问题。解决方案是重置您拥有的网格视图或列表视图。调用KENDO控件上的destroy函数并再次创建它。