Cách sử dụng Phương thức SetDataSource của Lưới Kendo UI

Question

Có ai có thể sử dụng phương pháp setdatasource của lưới giao diện người dùng kendo không? Tôi tin rằng điều này được sử dụng để chỉ định nguồn dữ liệu có thể được gán cho lưới ở giai đoạn sau và cũng cho mục đích làm mới lưới. Tuy nhiên tôi không thể tìm thấy bất kỳ tài liệu thích hợp nào giải thích cách sử dụng phương pháp này và tạo lưới có thể làm mới.

Tôi đang cố gắng cập nhật nguồn dữ liệu của mình qua cuộc gọi ajax từ xa. Tôi cũng giả định rằng nó sẽ autorefresh khi nguồn được cập nhật bằng cách thiết lập thuộc tính autosync thành true. Mỗi khi tôi bấm vào điều khiển lịch, tôi chuyển một giá trị ngày vào hàm GetRemoteData để dữ liệu được cập nhật thông qua yêu cầu ajax.

Tính năng này không hoạt động tại thời điểm này. Bất kỳ đầu mối nào cho giải pháp này là gì?

Xem My

$('#calendarContainer').kendoCalendar({ 
     format: "dd/MM/yyyy", 
     culture: "en-GB", 
     change: onDateChange 
    }); 


function onDateChange() { 
     var selectedDate = kendo.toString(this.value(), 'dd/MM/yyyy'); 

     GetRemoteData(selectedDate); 
     /* 
     $("#grid").data("kendoGrid").dataSource.data(bob); 
     $("#grid").data("kendoGrid").dataSource.read(); 
     */ 
    } 



    $('#grid').kendoGrid({ 

      dataSource:GetRemoteData(date), 

      scrollable: { 
       virtual: true 
      }, 
      navigatable: true, 
      groupable: true, 
      sortable: true, 
      selectable: "row", 
      pageable: true, 

      pageable: { 
       input: true, 
       numeric: false 
      }, 

      resizable: true, 
      reorderable: true, 
      filterable: { 
       extra: false 
      }, 
      columns: [ 
       { 
        field: "DealNumber", 
        width: 150, 
        title: "DealNumber", 
        filterable: { 
         operators: { 
          string: { 
           startswith: "Starts With", 
           contains: "Contains" 
          } 
         } 

        }, 

       }, 
       { 
        field: "DealIssuer", 
        width: 150, 
        title: "Issuer", 
        filterable: { 
         operators: { 
          string: { 
           startswith: "Starts With", 
           contains: "Contains" 
          } 
         } 
        } 

       }, 
        { 
         field: "Ticker", 
         width: 150, 
         title: "Ticker", 
         filterable: { 
          operators: { 
           string: { 
            startswith: "Starts With", 
            contains: "Contains" 
           } 
          } 
         } 

        }, 
        { 
         field: "DealType", 
         width: 150, 
         title: "Type", 
         filterable: { 
          operators: { 
           string: { 
            startswith: "Starts With", 
            contains: "Contains" 
           } 
          } 
         } 

        }, 
         { 
          field: "DealValue", 
          width: 150, 
          title: "Value", 
          filterable: { 
           operators: { 
            string: { 
             startswith: "Starts With", 
             contains: "Contains" 
            } 
           } 
          } 

         }, 
          { 
           field: "DealStatus", 
           width: 150, 
           title: "Status", 
           filterable: { 
            operators: { 
             string: { 
              startswith: "Starts With", 
              contains: "Contains" 
             } 
            } 
           } 

          }, 
       { 
        field: "DealPricingCompletionDate", 
        width: 230, 
        title: "DealPricingCompletionDate", 
        format: "{0:dd/MM/yyyy}", 
        // template: '#= kendo.toString(StartDate, "dd/MM/yyyy") #', 
        filterable: { 
         ui: "datetimepicker", 
         operators: { 
          date: { 
           gt: "After", 
           lt: "Before", 
           eq: "Equals" 
          }, 
          messages: { 
           filter: "Apply", 
           clear: "Clear" 
          } 
         } 

        } 
       }, 

       { 
        command: { text: "View Details", click: showDetails }, title: " ", width: "140px" 
       }, 

      ], 
      editable: "popup", 
      height: 600 
     }).data("kendoGrid"); 






function GetRemoteData(date) { 

     var chosenDate; 


     if (typeof date == "undefined") { 
      chosenDate = "12-12-2013"; 
     } 
     else { 
      chosenDate = date; 
     } 

     var source = new kendo.data.DataSource({ 
      autoSync: true, 
      transport: { 
       read: { 
        type: "GET", 
        url: "http://localhost:35798/RestServiceImpl.svc/GetDealData", 
        dataType: "jsonp", 
        contentType: "application/json; charset=utf-8", 
        cache: false, 
       }, 

       parameterMap: function (data, type) { 

        var data = { 
         startDate: chosenDate 
        } 
        return data; 
       } 
      }, 
      schema: { 
       model: { 
        fields: { 
         DealNumber: { type: "string" }, 
         DealIssuer: { type: "string" }, 
         Ticker: { type: "string" }, 
         DealType: { type: "string" }, 
         DealValue: { type: "number" }, 
         DealStatus: { type: "string" }, 
         DealPricingCompletionDate: { type: "date" } 

        } 
       } 
      }, 
      pageSize: 16 
     }); 

     source.fetch(function() { 
      var data = this.data(); 
     }); 
     return source; 
    } 

Answer 1

gì đã bạn đã cố gắng cho đến nay? Điều này khá cơ bản.

Ví dụ:

var ddl = $('#testDropDown').data("kendoDropDownList"); 
var otherDropDownList= $('#otherDropDown').data("kendoDropDownList"); 

var ds = new kendo.data.DataSource(); 
ds.data(otherDropDownList.dataSource.data()); // set new DataSource to otherDropDown's data source then filter it 
ds.filter(
    { 
     field: "Id", 
     operator: "eq", 
     value: parseInt(id) 
    } 
) 

ddl.setDataSource(ds); 

Rõ ràng đây là tất cả sẽ khác nhau cho bất cứ kịch bản mà bạn có.

Cập nhật cho Lưới

var ds = new kendo.data.DataSource(); 
var grid = $('#grid').data("kendoGrid"); 

grid.setDataSource(ds); // sets to a blank dataSource 

Hoặc, sử dụng nguồn dữ liệu này với lưới khác?

var gridDataSource = $('#grid').data("kendoGrid").dataSource; 
var secondGrid = $('#secondGrid').data("kendoGrid"); 

secondGrid.setDataSource(gridDataSource); 

Answer 2

Nếu bạn muốn thiết lập các setDataSource cách khác là tạo ra một nguồn dữ liệu từ đối tượng được trả về bởi yêu cầu ajax của bạn như được giải thích trong LINK sau bởi Brett

var dataSource = new kendo.data.DataSource({ 
    data: "your object returned by ajax" 
}); 

$('#GridKatildigiKurslar').data('kendoGrid').setDataSource(dataSource); 

Tắt Khóa học lưới điện nên được cấu hình để hiển thị đối tượng được trả về.