Question

请告诉我如何进行内联更新和删除按钮？这是我的HTML代码：

  <div id="example">

    <div data-role="grid"
         data-editable="true"
         data-toolbar="['create', 'save']"
         data-columns="[

          { 'field': 'Id', 'width': 100 },
                  { 'field': 'ShortName', 'width': 100 },
              { 'field': 'FullName', 'width': 100 },
           { 'field': 'ContactPerson', 'width': 100 },
           { 'field': 'Adress1', 'width': 100 },
           { 'field': 'CompanyCity', 'width': 100 },
              { 'field': 'CompanyCountry', 'width': 100 },
              { 'field': 'ZipPostCode', 'width': 100 },
          { 'field': 'TelArea', 'width': 100 },

         ]"
         data-bind="source: products,
                        visible: isVisible,
                        events: {
                         save: onSave
                        }"
         style=" height: 400px"></div>


</div>

使用传输读取成功显示数据：

  document.onreadystatechange= function () {

var viewModel = kendo.observable({
    isVisible: true,
    onSave: function (e) {

        },
        products: new kendo.data.DataSource({
            schema: {
                model: {
                    Id: "Id",
                    fields: {
                        Id: { type: "int" },
                        ShortName: { type: "string" },
                        FullName: { type: "string" },
                        ContactPerson: { type: "string" },
                        CompanyCity: { type: "string" },
                        CompanyCountry: { type: "string" },
                        ZipPostCode: { type: "string" },
                        TelArea: { type: "string" }

                    }
                }
            },
            batch: true,
            transport: {
                read: {
                    url: "/api/Companies/GetAllCompanies",
                    dataType: "json"
                },

                //update: {
                //    url: "http://demos.telerik.com/kendo-ui/service/products/update",
                //    dataType: "jsonp"
                //},
                create: {
         //HOW TO PERFOM CREATE BY INLINE BUTTON OR ALSO HOW TO STORE VALUES
           },
                parameterMap: function (options, operation) {
                    if (operation !== "read" && options.models) {
                        return { models: kendo.stringify(options.models)      };
                    }
                }
            }
        })
    });
kendo.bind(document.getElementById("example"), viewModel);
        }

这是我的保存控制器控制器代码

   [HttpPost]
       public void SaveDefCompny(DefCompanyDTO DfCmpny1)
    {
        DefCompany dfcmpny2 = new DefCompany();
        RPDBEntities db = new RPDBEntities();
        db.DefCompanies.Add(DfCmpny1);
        dfcmpny2.saveDefCompany();
    }

告诉我如何使用内联保存按钮将网格保存到数据库，并创建一个网格值数组并通过调用控制器[post]将其保存在数据库中？

Answer 1

首先，您需要将editMode设置为内联，并为编辑和删除按钮添加命令列。

＆＃13;

<div id="example">

    <div data-role="grid"
         data-editable="inline"
         data-columns="[

          { 'field': 'Id', 'width': 100 },
          { 'field': 'ShortName', 'width': 100 },
          { 'field': 'FullName', 'width': 100 },
          { 'field': 'ContactPerson', 'width': 100 },
          { 'field': 'Adress1', 'width': 100 },
          { 'field': 'CompanyCity', 'width': 100 },
          { 'field': 'CompanyCountry', 'width': 100 },
          { 'field': 'ZipPostCode', 'width': 100 },
          { 'field': 'TelArea', 'width': 100 },
          { command: ['edit', 'destroy'], title: '&nbsp;', width: '250px' }],           

         ]"
         data-bind="source: products"
         style="height: 400px"></div>
</div>

＆＃13;

然后指定url进行更新并销毁请求，并将批处理模式更改为false，因为您只能在编辑后发送一个对象。参数映射现在只发送已编辑的行。

＆＃13;

document.onreadystatechange= function () {

var viewModel = kendo.observable({
        products: new kendo.data.DataSource({
            schema: {
                model: {
                    Id: "Id",
                    fields: {
                        Id: { type: "int" },
                        ShortName: { type: "string" },
                        FullName: { type: "string" },
                        ContactPerson: { type: "string" },
                        CompanyCity: { type: "string" },
                        CompanyCountry: { type: "string" },
                        ZipPostCode: { type: "string" },
                        TelArea: { type: "string" }

                    }
                }
            },
            batch: false,
            transport: {
                read: {
                    url: "/api/Companies/GetAllCompanies",
                    dataType: "json"
                },
                update: {
                   url: "/api/Companies/Update", // here you need correct api url
                   dataType: "jsonp"
                },
                destroy: {
                    url: "/api/Companies/Delete", // here you need correct api url
                    dataType: "jsonp"
                },
                parameterMap: function (data, operation) {
                    if (operation !== "read" && data) {
                        return { kendo.stringify(data) };
                    }
                }
            }
        })
    });
    
  kendo.bind($("#example"), viewModel);

}

＆＃13;

如何使用KENDO GRID MVVM将值保存到数据库？

1 个答案: