如何使用 Kendo UI Grid 的 SetDataSource 方法

Posted 2023-05-07

【中文标题】如何使用 Kendo UI Grid 的 SetDataSource 方法

【英文标题】：How to use SetDataSource Method of the Kendo UI Grid

【发布时间】：2013-04-07 12:10:19

【问题描述】：

有没有人能够使用剑道 UI 网格的 setdatasource 方法？我相信这用于分配可以在后期分配给网格的数据源，也用于网格刷新目的。但是我找不到任何合适的文档来解释如何使用此方法并制作可刷新的网格。

我正在尝试通过远程 ajax 调用更新我的数据源。我还假设它应该通过将 autosync 属性设置为 true 来在更新源时自动刷新。每次单击日历控件时，我都会将日期值传递给 GetRemoteData 函数，以便通过 ajax 请求更新数据。

目前这不起作用。关于这个问题的解决方案有什么线索吗？

我的观点

    $('#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;
    

【问题讨论】：

Kendo 的文档非常棒，只要您正在创建一个允许用户选择苹果和香蕉的网站，并且绝对没有任何实际价值。

【参考方案1】：

到目前为止，您尝试过什么？这是非常基本的。

例子：

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);

显然，无论您遇到哪种情况，这一切都会有所不同。

网格更新

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

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

或者，将此数据源与另一个网格一起使用？

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

secondGrid.setDataSource(gridDataSource);

【讨论】：

你好，迪克森。感谢您提供代码，但我正在尝试对 Grid 做同样的事情。我尝试了各种选项，但在遇到这种称为 setDataSource 的方法之前都没有。您能否为 Grid 展示这样的示例。如果你想看看它可以放在哪里，我可以发布我的代码。

是的，如果你能发布你当前的代码和你想要做什么，那就太好了。

更新了我的答案，仍然不能 100% 确定您要达到的目标，但这应该会为您指明正确的方向。

非常感谢。我会看看是否可以根据您的建议动态刷新我的数据网格内容。

没问题，如果答案有效并且能够帮助他人，请务必将答案标记为已接受:)

【参考方案2】：

如果您想设置 setDataSource 其他方式是从您的 ajax 请求返回的对象创建一个数据源，如下面的LINK Brett 中所述

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

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

当然，网格应该配置为显示返回的对象。

【讨论】：

谢谢@freedeveloper