无法更新Kendo-grid中的值 - 无法读取undegined的'data'属性

时间:2016-04-24 21:28:13

标签: javascript kendo-grid

当选项HTML元素中的选定值发生更改时,我正在更新Kendo-grid。但是当我尝试在浏览器的控制台中内联网格中更新值时,会打印“kendo.web.min.js:13 Uncaught TypeError:无法读取未定义的属性'数据'。”

我错了什么?

< script >
  $(document).ready(function() {
  
  // on changing zone option selector
    $('#SelectProviderZoneForPrices').change(function (e) {
      var zoneId = $(this).val();
      var productId = $('#SelectProviderForPrices').val();

      $.ajax({
        type: "GET",
        url: "@Html.Raw(Url.Action("LoadZoneWeights", "ShippingZonableByWeight"))",
        success: loadPrices, // loads the shipping providers which delivers by zones
        dataType: 'json',
        data: { ProviderId: productId, ZoneId: zoneId }});
    });

    // loads prices
    function loadPrices(data) {
      var grid = $('#shippingProviderWeightPrice-grid').getKendoGrid();
      grid.dataSource.data(data.Data); // my backend returns DataSourceResult
      grid.refresh();
    }
  
    // load Kendo-grid
    $("#shippingProviderWeightPrice-grid").kendoGrid({
      dataSource: {
        type: "json",
        transport: {
          read: {
            url: "@Html.Raw(Url.Action("ActionMethod", "Controller"))",
            type: "GET",
            dataType: "json"
          },
          update: {
            url: "@Html.Raw(Url.Action("ActionMethod", "Controller"))",
            type: "POST",
            dataType: "json"
          }
        },
        schema: {
          total: "Total",
          errors: "Errors",
          model: {
            fields: {
              ProviderWeightsId: {
                editable: false,
                visible: false,
                type: "number"
              },
              ZoneId: {
                editable: false,
                visible: false,
                type: "number"
              },
              ZoneName: {
                editable: false,
                visible: false,
                type: "string"
              },
              WeightFrom: {
                editable: false,
                visible: true,
                type: "number"
              },
              WeightTo: {
                editable: false,
                visible: true,
                type: "number"
              },
              Price: {
                editable: true,
                visible: true,
                type: "number"
              }
            }
          }
        },
        requestEnd: function(e) {
          if (e.type == "update") {
            this.read();
          }
        },
        error: function(e) {
          display_kendoui_grid_error(e);
          this.cancelChanges();
        },
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
      },
      pageable: {
        refresh: true,
        numeric: false,
        previousNext: false,
        info: false
      },
      editable: {
        confirmation: true,
        mode: "inline"
      },
      scrollable: false,
      columns: [{
        field: "WeightFrom",
        title: "Weight From",
        format: "{0:n3}",
        width: 100
      }, {
        field: "WeightTo",
        title: "Weight To",
        format: "{0:n3}",
        width: 100
      }, {
        field: "Price",
        title: "Price",
        format: "{0:n3}",
        width: 100
      }, {
        command: [{
          name: "edit",
          text: "Edit"
        }]
      }]
    });
  }); < /script>
<fieldset>
  <legend><strong>Manage Weights</strong>
  </legend>
  <table class="adminContent">
    <tr>
      <td class="adminTitle">Select Provider</td>
      <td class="adminData">
        <select id="SelectProviderForPrices" name="ProviderId">
          <option value="0">- Select Provider -</option>
        </select>
      </td>
    </tr>
    <tr>
      <td class="adminTitle">Select Zone</td>
      <td class="adminData">
        <select id="SelectProviderZoneForPrices" name="ProviderId">
          <option value="0">- Select Zone -</option>
        </select>
      </td>
    </tr>
  </table>
</fieldset>
<br/>
<div id="shippingProviderWeightPrice-grid">
</div>

2 个答案:

答案 0 :(得分:1)

您没有将data传递给loadPrices函数。

$('#SelectProviderZoneForPrices').change(function (e) {
      var zoneId = $(this).val();
      var productId = $('#SelectProviderForPrices').val();

      $.ajax({
        type: "GET",
        url: "@Html.Raw(Url.Action("LoadZoneWeights", "ShippingZonableByWeight"))",
        success: function (data) {  
            loadPrices(data); //pass data to loadPrices function
        }
        dataType: 'json',
        data: { ProviderId: productId, ZoneId: zoneId }});
    });

<强>更新

试试这个:

public ActionResult LoadZoneWeights(int ProviderId, int ZoneId)
{

  var zoneWeights = _shippingService.GetZonesWithWeights(ProviderId, ZoneId);


  return Json(zoneWeights , JsonRequestBehavior.AllowGet);
}

 schema: {
        data: function(response) {
            return response.data;
        }
    }

答案 1 :(得分:1)

I found the problem. I was removed the id property in my datasource-model of the grid and that caused my problems. I don't know why it is so big deal - especially when I could have objects without ID. But now it is fine.

id: "ProviderWeightsId",
fields: {
  ProviderWeightsId: { editable: false, visible: false, type: "number" },
  ZoneId: { editable: false, visible: false, type: "number" },
  ZoneName: { editable: false, visible: false, type: "string" },
  WeightFrom: { editable: false, visible: true, type: "number" },
  WeightTo: { editable: false, visible: true, type: "number" },   
  Price: { editable: true, visible: true, type: "number" }
}