Қанго торының жиынтығын динамикалық түрде қалай өзгерту керек

Мен Kendo торының бағандар жинағын төмендегідей өзгертуге тырысамын.

var grid = $("#grid").data("kendoGrid");
$http.get('/api/GetGridColumns')
    .success(function (data) {
        grid.columns = data;                    
    })
    .error(function (data) {
        console.log(data);
    });

Бұл бағандар жиынтығын өзгертеді, бірақ менің торымда бірден көрсетілмейді. Бірақ торда кейбір әрекеттерді орындауға тырысқан кезде (топтау сияқты), менің жаңа бағаным пайда болады.

Маған қалай жетуге болатынын біліп беріңіз.

Құрметпен, Дилип Кумар

14

10 жауаптар

Сіз KendoUI деректер көзін орнату, торды жою және оны қайта құру арқылы істей аласыз

$("#load").click(function() {
        var grid = $("#grid").data("kendoGrid");

    var dataSource = grid.dataSource;

    $.ajax({
        url: "/Home/Load",
        success: function (state) {
            state = JSON.parse(state);

            var options = grid.options;

            options.columns = state.columns;

            options.dataSource.page = state.page;
            options.dataSource.pageSize = state.pageSize;
            options.dataSource.sort = state.sort;
            options.dataSource.filter = state.filter;
            options.dataSource.group = state.group;

            grid.destroy();

            $("#grid")
               .empty()
               .kendoGrid(options);
        }
    });
});

мұнда сіз мұны жасай аласыз:

var options = grid.options;

options.columns = state.columns;

онда сеанстағы немесе db бағандарын алуға болады

15
қосылды
Рақмет сізге. Менің сценарийімнің бірнеше импровизациясымен шеберлігімен айналыстым.
қосылды автор Immortal, көзі
Wow, бұл Telerik-ті іске асыратын ерекше жағдай. Сондықтан grid.options.columns - grid.columns емес, анықтамаларды тағайындайды. Бұл жауап соңында маған берген деректерді торға айналдырды. Рақмет сізге.
қосылды автор Suncat2000, көзі
жаңартылған өзіндік нұсқасында олар қазірдің өзінде іске асырылуда .. бірақ бұл көмектесті
қосылды автор Edu Cielo, көзі
Telerik-дің ағымдағы нұсқаларына қарап, оның өзгергеніне сенемін.
қосылды автор Edu Cielo, көзі

Бұл jsfiddle - Kendo UI торлы динамикалық бағандар сізге көмектесуі мүмкін - using kendo.observable.

var columns = data;

var configuration = {
    editable: true,
    sortable: true,
    scrollable: false,
    columns: columns    //set the columns here
};

var grid = $("#grid").kendoGrid(configuration).data("kendoGrid");
kendo.bind($('#example'), viewModel);   //viewModel will be data as in jsfiddle
10
қосылды
Downvote себебі бұл «динамикалық бағандарды өзгерту» емес. Бұл әдіс әрдайым жаңа тор жасайды, ескі жазуды қайта жазады. Сондай-ақ, ескі жауабы жоқ destroy() емес.
қосылды автор Jorge Fuentes González, көзі
Өте жақсы - динамикалық бағандар.
қосылды автор DeeArgee, көзі

Kendo және Angular екеуін бірге қолданатындар үшін, мен үшін жұмыс істейтін шешім:

Идея k-rebind директивасын пайдалану болып табылады. Құжаттардан:

Опция Өзгерістерінде Виджет Жаңарту

Виджетті контроллерден жаңартуға болады. Кейбір айнымалы айнымалылар өзгерген кезде автоматты түрде жаңартылатын виджет жасау үшін арнайы k-rebind төлсипатын пайдаланыңыз. Бұл опция түпнұсқа виджетті жойып, өзгертілген опцияларды пайдалана отырып қайта жасайды.

Біз әдеттегідей GridOptions торындағы бағандардың жиынын орнатудан басқа, біз оған сілтеме жасауымыз керек:

        vm.gridOptions = { ... };
        vm.gridColumns = [{...}, ... ,{...}];
        vm.gridOptions.columns = vm.gridColumns;

содан кейін осы айнымалы мәнді k-rebind директивасына өткізіңіз:

        <div kendo-grid="vm.grid" options="vm.gridOptions" k-rebind="vm.gridColumns">
        </div>

Ал сіз торды қашықтағы деректерге байланыстыратын болсаңыз (OData менің жағдайда). Енді элементтерді бағандар жиымына/қосуға немесе жоюға болады. Тор жаңа деректерді қайтадан жасағаннан кейін қайта сұрайды.

Торды жергілікті деректерге (жергілікті нысандар жиынын) байланыстыру кезінде, виджетті қайта жасағанша деректердің байланыстырылуын қандай да бір жолмен қалдыруымыз керек. Мен үшін қандай жұмыс істеді (мүмкін, бұл үшін таза шешім бар) - $ timeout қызметін пайдалану:

        vm.gridColumns.push({ ... });

        vm.$timeout(function() {
            vm.gridOptions.dataSource.data(vm.myArrayOfObjects);
        }, 0);

Бұл AngularJS v1.5.0 және Kendo UI v2016.1.226 арқылы сыналды.

7
қосылды

Мен осы кодты динамиканы ауыстыру үшін қолданамын:

kendo.data.binders.widget.columns = kendo.data.Binder.extend({
    refresh: function() {
        var value = this.bindings["columns"].get();
        this.element.setOptions({ columns: value.toJSON });
        this.element._columns(value.toJSON());
        this.element._templates();
        this.element.thead.empty();
        this.element._thead();
        this.element._renderContent(this.element.dataSource.view());
    }
});

Weddin

3
қосылды
Бұл бағанды ​​тағайындау үшін деректерді байланыстыруды пайдалана аламын дегенді білдіре ме?
қосылды автор Markus Johnsson, көзі

Торды жаңартыңыз

 .success(function (data) {
        grid.columns = data;
        grid.refresh();                    
    })
2
қосылды
Stack Overflow-қа қош келдіңіз! Кодекс бойынша ғана жауаптар ұнжырғамыз түседі. Сондай-ақ бұл мәселені қалай шешетіні туралы түсініктеме бере аласыз ба?
қосылды автор Nate Barbettini, көзі
refresh() тордың элементтерін ағымдағы дерекқордан қайта жүктейді. Бағанды ​​ауыстырудан кейін торды жаңарту оны элементтерді қайта топтау сияқты торға қосымша әрекеттер жасамай жаңа бағанды ​​қосуға мүмкіндік береді.
қосылды автор samira riazati, көзі
Мен оны көрдім және ол жұмыс істемейді
қосылды автор shahar eldad, көзі

Міне, мен қолданамын

var columns = [];//add the columns here
var grid = $('#grid').data('kendoGrid');
        grid.setOptions({ columns: columns });
        grid._columns(columns);
        grid._templates();
        grid.thead.empty();
        grid._thead();
        grid._renderContent(grid.dataSource.view());
2
қосылды
(grid._renderContent (grid.dataSource.view ()) маған көп жұмыс істеді, сіз мені күнде құтқардыңыз
қосылды автор T-student, көзі
Мен оны көрдім және ол жұмыс істемейді. _Thead() әдісіне қоңырау шалу мүмкін емес
қосылды автор shahar eldad, көзі
себебі бұл кітапханадан ішкі кодпен араласады, ол жаңартулардың жаңартуларында бұзылуы мүмкін
қосылды автор CMS, көзі

Менің ойымша, сіз сұрайтын шешім - функцияның ішіндегі Equity remote DataSource.read() әдісін шақыру. Мен жергілікті бағандар үшін бағандардың санын динамикалық түрде өзгерткен едім.

$("#numOfValues").change(function() {
    var columnsConfig = [];
    columnsConfig.push({ field: "item", title: "Metric" });

   //Dynamically assign number of value columns
    for (var i = 1; i <= $(this).val(); i++) {
        columnsConfig.push({ field: ("value" + i), title: ("201" + i) });
    }

    columnsConfig.push({ field: "target", title: "Target" });
    columnsConfig.push({ command: "destroy", title: "" });

    $("#grid").data("kendoGrid").setOptions({
        columns: columnsConfig
    });
    columnDataSource.read();//This is what reloads the data
});
1
қосылды
Мен оны көрдім және ол жұмыс істемейді. Ешқандай әсер етпеді
қосылды автор shahar eldad, көзі

Торды жаңартыңыз

     $('#GridName').data('kendoGrid').dataSource.read();
     $('#GridName').data('kendoGrid').refresh();
0
қосылды

If your grid is simple and you don't need to configure special column-specific settings, then you can simply omit the columns argument, as suggested in the API reference.

Автогенерацияланған бағандарды пайдаланыңыз (яғни, баған параметрлерін орнатпаңыз)

... және ....

Егер осы [баған] параметрі көрсетілмесе, тор әрбір элемент үшін бағанды ​​жасайды.

0
қосылды

Барлық элементтерді айналдырудың орнына. тордағы барлық деректерді бір мәлімдеме арқылы жоя аламыз

$("#Grid").data('kendoGrid').dataSource.data([]);
0
қосылды