CODEWITHSUNDEEP
javascriptangularjskendo-ui
sgy
sgy

Reputation: 3062

How to properly render a Kendo UI PanelBar when data is from a service?

Using AngularJS, in a controller, I'm calling a service. This service is deferred, and at some time, the data is received.

angular.module("app").controller("dataController", ["$filter", "service"],
    function ($filter, service) {

        var vm = this;

        vm.panelBarOptions = {
            expandMode: "single"
        };

        service.execute({
            // some options to call API and get data
        }).then(function (data) {
            vm.data = data;
        });
    }
);

The data received from service is similar to this hard-coded data:

var hardCodedData = [
    {
        title: "some title1",
        subtitles: [
            { subtitle: "subtitle 1.1" },
            { subtitle: "subtitle 1.2" }
        ]
    },
    {
        title: "some title2",
        subtitles: [
            { subtitle: "subtitle 2.1" },
            { subtitle: "subtitle 2.2" },
        ]
    }
];

Next, is the HTML template used to display this data:

<ul kendo-panel-bar k-options="dataController.panelBarOptions">
    <li ng-repeat="item in dataController.data">
        {{ item.title }}
        <ul>
            <li ng-repeat="subitem in item.subtitles">{{ subitem.subtitle }}</li>
        </ul>
    </li>
</ul>

With two-way databinding, the data is successfully displayed in browser within template. But, the Kendo PanelBar is not correctly rendered. I made a little test with hard-coded data (in this example, hardCodedData) in controller, using the same structure and properties used in data provided from service. With hard-coded data, the PanelBar is correctly rendered.

So I'm assuming that Kendo UI (using its Angular directive) renders the PanelBar, and after that the data is received, making the DOM changed, and the styles are not then applied to PanelBar.

I'm probably doing this wrong. So, what is missing here? Maybe I should re-render the PanelBar when data is successfully received, but how ? Make it a directive?

Upvotes: 0

Views: 2522

Answers (2)

sgy
sgy

Reputation: 3062

I don't know if it's a good answer, because it's not about Kendo UI PanelBar. Instead, I'm using UI Bootstrap Accordeon directives. I can use that ng-repeat and updates without any problems when bound data is refreshing.

For more details and examples: http://angular-ui.github.io/bootstrap/.

Upvotes: 1

TJ VanToll
TJ VanToll

Reputation: 12704

Unfortunately this cannot work with ng-repeat once you initialize the widget. One thing you can do is use the PanelBar's dataSource option along with the k-rebind attribute (which automatically rebuilds the widgets whenever its data changes). Here's an example of that: http://dojo.telerik.com/@tjvantoll/oHaC.

Upvotes: 2

Related Questions