I want the first panel of my Kendo UI PanelBar grid to be automatically expanded when the page loads, based on a parameter from the database. Instead of using class="k-state-active" on the li tag, I am looking to expand the panel programmatically from my AngularJS controller.
Below is the HTML code for my panel:
<ul kendo-panel-bar k-options="panelBarOptions" ng-controller="CreateItemCtrl" id="commentsPanelBar">
<li style="margin-top:0;margin-bottom:0;">
COMMENTS
<ul>
<li style="height:140px;" id="pbComments">
<input type='text' id='tbComments'></input>
</li>
</ul>
</li>
</ul>
Here is what I have attempted in my controller:
$scope.commentsPanelBar = {};
$scope.commentsPanelBar = $('#commentsPanelBar');
$scope.commentsPanelBar.data('kendoPanelBar').expand($('#pbComments'));
However, when running this code, I encounter an error indicating that "expand" is not a function. Despite having the necessary Kendo scripts referenced on the page, only the PanelBar expands and collapses as expected.