Как использовать метод SetDataSource сетки пользовательского интерфейса Kendo

Кто-нибудь смог использовать метод 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;
    }

person Sike12    schedule 15.04.2013    source источник
comment
Документация по кендо великолепна, если вы создаете веб-сайт, который позволяет пользователю выбирать яблоки и бананы и не делает абсолютно ничего, что имело бы реальную ценность.   -  person tnk479    schedule 25.02.2019


Ответы (2)


что ты уже испробовал? Это довольно просто.

Пример:

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);
person Chris Dixon    schedule 15.04.2013
comment
Привет Thedixon. Спасибо за код, но я пытаюсь сделать то же самое с сеткой. Я пробовал всевозможные варианты, но ни один из них не работал, пока я не наткнулся на этот метод с именем setDataSource. Не могли бы вы показать такой пример для Grid. Я могу опубликовать свой код, если вы хотите увидеть, где его можно разместить. - person Sike12; 15.04.2013
comment
Да, если бы вы могли опубликовать свой текущий код и то, что вы пытаетесь сделать, это было бы здорово. - person Chris Dixon; 15.04.2013
comment
Обновил мой ответ, все еще не уверен на 100%, чего вы пытаетесь достичь, но это должно указать вам правильное направление. - person Chris Dixon; 15.04.2013
comment
Спасибо большое. Я посмотрю, смогу ли я динамически обновлять содержимое своей сетки данных с вашим предложением. - person Sike12; 15.04.2013
comment
Нет проблем, обязательно отметьте ответ как принятый, если он работает и может помочь другим :) - person Chris Dixon; 15.04.2013
comment
Привет thedix, код var grid = $('#grid').data(kendoGrid); ты уверен, что мы так делаем? потому что мое объявление сетки отличается от того, что вы мне показали. - person Sike12; 15.04.2013
comment
К вопросу добавлено дополнительное объяснение - person Sike12; 15.04.2013
comment
Привет Thedixon. я изменил функцию onDateChange с вашим кодом. function onDateChange() { var selectedDate = kendo.toString(this.value(), 'дд/мм/гггг'); Получить удаленные данные (выбранная дата); var grid = $('#grid').data(kendoGrid); grid.setDataSource (источник); }. Это сработало как по волшебству. Вы чемпион Кендо UI/Супермен. Большое спасибо за Вашу помощь. - person Sike12; 15.04.2013
comment
Ха-ха, спасибо @ Sike12, и я рад, что ваше решение работает, получайте удовольствие от кендо! :) - person Chris Dixon; 15.04.2013

Если вы хотите установить setDataSource другим способом, создайте источник данных из объекта, возвращаемого вашим запросом ajax, как объясняется в следующем LINK от Brett

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

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

Off Конечно, сетка должна быть настроена для отображения возвращаемого объекта.

person freedeveloper    schedule 14.10.2015
comment
Спасибо @freedeveloper - person Sike12; 10.01.2016