I am trying to populate the kendo panel control using the below json

var jsondata = { "Heading 1": 
[{ "ID": 1, "Name": "TEST 1" }, { "ID": 2, "Name": "TEST 2" }, 
{ "ID": 3, "Name": "TEST 3" }, { "ID": 4, "Name": "TEST 4" }, 
{ "ID": 5, "Name": "TEST 5" }, { "ID": 6, "Name": "TEST 6" },
],
 "Heading 2": 
 [{ "ID": 1, "Name": "TEST 1" }, { "ID": 2, "Name": "TEST 2" },
 { "ID": 3, "Name": "TEST 3" }], 

 "Heading 3": [{ "ID": 1, "Name": "TEST 1" }, 
 { "ID": 2, "Name": "TEST 2" },
 { "ID": 3, "Name": "TEST 3" }] };

Heading 1, Heading 2, Heading 3 will be the heading of the panels and the "Name" will be the subitems

JS FILE :

$(document).ready(() => {
    $("#pageLoader").hide();

    $("#panelbar").kendoPanelBar();
    var panelBar = $("#panelbar").data("kendoPanelBar");



    $.each(Object.keys(jsondata), function (i, row) {
      // trying to get all the names into an array
        let array = new Array(Object.values(jsondata)[i].length);

        $.each(Object.values(jsondata)[i], function (j, datarow) {

            array[j] = Object.values(jsondata)[i][j].Name;
        });



        panelBar.append([
            {
                text: row,
                items:  ??? 

            }
        ]);
    });
}); 

Below are the things I have tried :

items : array (subitems are populated but they are shown as "undefined")

items : [{text :  array }] (all the subitems are displayed as one item with comma separated values)

How are we supposed to give:

items : [{

text : "TEXT 1"

},

{

text : "TEXT 2"

}

]

I want to do the above thing but not hard code. In a loop or something.

Hello guys, I hope you are all well.

I have a question about the KendoUI version 2014.1.416 as I am facing some issues with the kendoSortable() function.

At the moment, the jQuery version is the latest (3.6.0) and I have also placed the latest jQuery Migrate version (3.2.2) but the .data("kendoGrid") function always returns an "undefined" result, meaning that it does not find the actual grid.

Do you happen to know whether the problem is the latest jQuery version or the syntax to get the kendoGrid?

Below I have placed the JS line of code to fetch the grid.

- code sample: var grid = e.detailRow.find(".js-filter-conditions-grid").data("kendoGrid");

Regards,

R

I am developing an application for a school entrepreneurial project and am using:

kendo.timezones.min.js

kendo.silver.mobile.min.css

kendo.silver.min.css

kendo.common.min.css

kendo.all.min.js

in the web app. I am wondering if this is legal, as the app will be a subscription-based app so that users can pay for a subscription to use the app. I don't currently have a license or anything from kendo UI, so I am not sure if this is legal.

This is my first time using Kendo UI, so I am not sure how anything works!

Any help will be appreciated!

Hi,

I have a kendo toolbar with multiple dropdowns and checkboxes to filter my datasource. What I want is when I submit my filter selections, if a spesific checkbox is checked, then datetime column of the grid will have this template:

"#= kendo.toString(kendo.parseDate(dates), 'dd/MM/yyyy') #"

If the checkbox not checked (or the page is just loaded with empty checkbox in default scenario) the column will have:

"#= kendo.toString(kendo.parseDate(dates), 'dd/MM/yyyy HH:mm') #"

as template. 

I tried conditioning inside of grid but I didn't manage to obtain checkbox value. I tried writing a function outside the grid function but when I refresh grid data with:

var grid = $("#grid").data("kendoGrid");
grid.dataSource.data(reportData);

it only refresh the data inside grid, that does not trigger the template function.

How can I change the column template while refreshing the data according to that checkboxs value? 

Greets Umutcan

Hi

To speed up a grid with a lot of dropdownlists, I want to only write the text to the cells initially and, on click, load the dropdownlist of this cell, replace the text with it, so the user can use the dropdownlist from now on.

I'm replacing the text-cell-template with the dropdownlist-cell-template, but the dropdownlist does not get bound automatically.

What's the best way, to initialize the new dropdownlist-cell-template only, without rerendering/rebinding everything else?

Example: http://dojo.telerik.com/uZOBALUp/2

Greets Robin

Hello 

I'm pretty new to KendoUI Mobile. I would like to create a hybrid mobile app. So far I'm doing good just struggle with something simple:

I would like to show initially a login/register screen (view login) without any pre-defined Tabstrip. After successful login the app should switch to show a Tabstrip connected with 3 other views (start, map, settings).

What is the "official" way to not show the Tabstrip on login view or how to I tell the Tabstrip to be only present on not visible login view?

Below a fully working example of how far I came. Setting the "initial" value to "login" would show the login view WITH the (unwanted) Tabstrip.

view login: represents the view that should NOT show the Tabstrip
-> after successful login switch to show Tabstrip with initiall shown view "start"

Probably a simple question and I just need to know the official way how to solve this. 

Regards

HI,

I'm missing the changeLoadingMessage method in the definition file:

 class Application extends Observable {
        options: ApplicationOptions;
        router: kendo.Router;
        pane: kendo.mobile.ui.Pane;
        constructor(element?: any, options?: ApplicationOptions);
        init(element?: any, options?: ApplicationOptions): void;
        hideLoading(): void;
        navigate(url: string, transition?: string): void;
        replace(url: string, transition?: string): void;
        scroller(): kendo.mobile.ui.Scroller;
        showLoading(): void;
        view(): kendo.mobile.ui.View;
    }

Kind regards,

Marco

Hello,

     I just noticed with Kendo UI 2017.3.913 that app.showLoading(); now hides on its own.  Is this correct, and what is the default timeout?

Thank you.