2013-09-19 2 views
2

Я знаю, что их уже много. Тем не менее, я пробовал десятки сообщений SO/форумов/сайта Kendo UI и до сих пор не могу заставить его работать. Я нахожусь в конце моей веревки на этом, любая помощь будет очень признательна.Kendo UI Grid WebMethod JSON

Вот моя DataSource декларация:

var dataSource = new kendo.data.DataSource({ 
     transport: { 
      read: function(options) { 
        $.ajax({ 
          type: "POST", 
          url: "DepartmentHome.aspx/GetMembers", 
          data: options.data, 
          contentType: "application/json; charset=utf-8", 
          dataType: "json", 
          success: function (msg) { 
           options.success(msg.d); 
           alert(msg.d); 
          } 
         }); 
      } 

     }, 
     pageSize: 20, 
     schema: { 
      model: { 
       fields: { 
        FirstName: { validation: { required: true} }, 
        LastName: { validation: { required: true} } 
       } 
      } 
     } 
    }); 

Вот моя декларация сетки с использованием источника данных:

$("#grid").kendoGrid({ 
     dataSource: dataSource, 
     scrollable: true, 
     groupable: false, 
     sortable: true, 
     pageable: { 
      refresh: true, 
      pageSizes: true 
     }, 
     height: 430, 
     toolbar: ["create"], 
     columns: [ 
      { field: "FirstName", title: "First Name", width: "100px" }, 
      { field: "LastName", title: "Last Name", width: "100px" }, 
      { command: ["edit", "destroy"], width: "160px" } 
      ], 
     editable: { 
      mode: "popup", 
      confirmation: "Are you sure?" 
     } 
    }); 

Вот код позади WebMethod Я звоню в декларации источника данных:

[WebMethod] 
    public static string GetMembers() 
    { 
     var serializer = new JavaScriptSerializer(); 
     string json = serializer.Serialize(new { FirstName = "John", LastName = "Smith" }); 
     return json; 
    } 

Я знаю, что он ударяет по WebMethod, потому что предупреждение, которое я помещал в данные s сходный код показывает правильные данные:

enter image description here

Использование поджигатель заголовка ответа выглядит следующим образом: enter image description here

Фактический ответ выглядит следующим образом:
enter image description here

Однако сетка не отображается данные выглядят так: enter image description here

Примечание: по какой-то причине сетка считает, что в нижнем правом углу имеется 39 предметов.

Я пропустил что-то очевидное? Есть ли более простой способ сделать это?

ответ

2

Использовать данные: "d" вместо данные: options.data?

И добавить строку как тип данных для двух полей в определении схемы.

1

Ваш код выглядит отлично. Просто одно изменение, которое вам нужно в вашей функции успеха.

Измените код, как указано ниже:

success: function (msg) { 
    options.success($.parseJSON(msg.d)); 
} 

$ .parseJSON преобразует вашу строку JSON в объект.