kendo ui js编辑弹出窗口显示在工具栏

时间:2015-09-09 16:13:51

标签: jquery kendo-ui kendo-grid

      $("#manage-products-grid").kendoGrid({
    columns:[
    {
        field: "Id",
        title: "Product Id",
        width: 150
    },
    {
        field: "Name",
        title: "Name",
        width: 250
    },
    {
        field: "ShortDescription",
        title: "Short Description"
    },
    {
        field: "ProductType",
        hidden: true
    },
    {
        field: "MinimumOrderQuantity",
        hidden: true
    },
    {
        field: "PackSize",
        hidden: true
    }, 
    {
        field: "LeadTime",
        hidden: true
    },
    {
        field: "Weight",
        hidden: true
    },
    {
        command: [{ text: "Edit", template: "<a class='k-button k-button-icontext k-grid-edit'>Edit</a>" }, { text: "Manage Details", click: managedetails }, { text: "Delete", template: "<a class='k-button k-button-icontext k-grid-delete'>Delete</a>" }],
        width: 300
    }],
    editable: {
        mode: "popup",
        template: kendo.template($("#popup-editor").html())
    },
    pageable: {
        refresh: true,
        buttonCount: 5,
        pageSizes: [5, 10, 15, 20, 25, 50]
    },
    toolbar: kendo.template($("#manage-product-popup-template").html()),
    dataBound: function () {
        //This is a little hack to remove the lodingmodel in the filterfield. Somehow it doesn't dissappear when item gets selected
        removeLoadingModal();
    },
    dataSource: manageProductDataSource()
});

function manageProductDataSource() {
    var datasource = new kendo.data.DataSource({
        transport: {
            read: {
                url: appPath + "/Product/GetByCompany",
                dataType: "json",
                type: "POST"
            },
            destroy: {
                url: appPath + "/Product/Delete",
                dataType: "json",
                type: "POST"
            },
            parameterMap: function (data, type) {
                if (type == "read") {
                    return {
                        companyName: $("#company-drp").val(),
                        pageSize: data.pageSize,
                        skip: data.skip,
                        searchText: $("#productSearch").val()
                    }
                }
                if (type == "destroy") {
                    return {
                        companyName: $("#company-drp").val(),
                        productId: data.Id
                    }
                }

            }
        },
        pageSize: 15,
        serverPaging: true,
        serverFiltering: true,
        schema: {
            data: "ProductDtos",
            total: "ProductCount",
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false},
                    Name: {  },
                    ShortDescription: {},
                    ProductType: { type: "number" },
                    MinimumOrderQuantity: { type: "number" },
                    PackSize: { type: "number" },
                    LeadTime: {},
                    Weight: { type: "decimal" },
                }
            }
        }
    });
    return datasource;
}

这是我的模板:

  <script id="popup-editor" type="text/x-kendo-template">
<h3>Edit Person</h3>
<p>
    <label>Product Id: <input name="ProductId" /></label>
</p>
<p>
    <label>Short Description: <input name="ShortDescription" /></label>
</p>

这就是它的样子

enter image description here

那为什么它出现在工具栏中而不是弹出窗口? 我似乎覆盖了我常用的工具栏模板。不知何故,它只是覆盖它,以便工具栏模板消失。

0 个答案:

没有答案
相关问题