Take the 2-minute tour ×

I am using Kendo UI in my Java JSP application.

I am able to load the panel bar dynamically but now i want to insert the grid into one of the panels when user clicks that panel. I got the select/expand event to catch that action but I am not sure how to insert the Grid there.

Any suggestions or pointers are appreciated. Thanks!

function createAttendancePanel(){

        expandMode: "multiple",
        select: selectAttndPanel
    var attendancePanelBar = $("#attendance-details").kendoPanelBar().data("kendoPanelBar");

attendancePanelBar.append({text: "Absence This Year", id:"item1"}, attendancePanelBar.select());

This function is called when I select a particular element after the page is loaded.

Now when the panel with text "Absence this Year" is expanded or selected I want to add the grid into this panel.


share|improve this question
add comment

1 Answer

up vote 0 down vote accepted

Here is the solution, in case some one is looking for it:

First append the panel with "content" that has the div element


        text: "<b>Item 2</b>",
        encoded: false,                                 
        content: "<div id='grid'></div>"                

Now, convert that div into the grid.

var grid= $("#grid").kendoGrid({ dataSource: dataSource,
scrollable: false,
editable : true, navigatable: true, toolbar: ["save","cancel", "create"], columns: ["Id", "Name", "Position"]

share|improve this answer
add comment

Your Answer


