Expand panel is not working .

2 posts, 0 answers
  1. Toan
    Toan avatar
    2 posts
    Member since:
    Sep 2015

    Posted 14 Sep 2015 Link to this post

    I am creating a kendo panelbar that contains 3 panel and each panel contains kendogrid , the content will load data after kendodropdownlist change occur. If the first time I choose value on dropdownlist I can expand all panels, next time I choose another values on dropdownlist then I cannot expand panel anymore except the panel that set default expand: true and next time I can expand. I don't understand the reason why?

    Here is the code of my panel bar:

    var expenseConflitViewHTML = '<div class="q-expense-panel-wrap"><div id="conflitsheetsgrid"></div></div>';
        var expenseDraftViewHTML = '<div class="q-expense-panel-wrap"><div id="draftsheetsgrid"></div></div>';
        var expenseSubmittedViewHTML = '<div class="q-expense-panel-wrap"><div id="submittedsheetsgrid"></div></div>';    
        var expensePaidViewHTML = '<div class="q-expense-panel-wrap"><div id="paidsheetsgrid"></div></div>';​

                dataSource: [
                        text: '<span class="q-bold">' + ExpensesConstants.lbConflitSheet + '</span>',
                        encoded: false,
                        content: expenseConflitViewHTML
                        text: '<span class="q-bold">' + ExpensesConstants.lbDraftSheet + '</span>',
                        encoded: false,
                        expanded: true,
                        content: expenseDraftViewHTML
                        text: '<span class="q-bold">' + ExpensesConstants.lbSubmittedSheet + '</span>',
                        encoded: false,
                        content: expenseSubmittedViewHTML
                        text: '<span class="q-bold">' + ExpensesConstants.lbPaidSheet + '</span>',
                        encoded: false,
                        content: expensePaidViewHTML

                expandMode: "multiple"


    Here is the kendogrid :

            columns: [
                    field: "UserFullname",
                    title: ExpensesConstants.lbEmployeeName,
                    width: 180,
                    hidden: isHiddenEmployeeName

                    field: "SheetDescription",
                    title: ExpensesConstants.lbSheetName,
                    width: 500

                    field: "AdvanceAmountDisplay",
                    title: ExpensesConstants.lbAdvance
                     field: "ExpenseAmountDisplay",
                     title: ExpensesConstants.lbExpenseTotal
            scrollable: true,
            editable: false,
            filterable: true,
            dataSource: dsSubmittedSheet,
            dataBound: function (e) {
                var grid = e.sender;
                if (grid.dataSource.total() == 0) {
                    var msg = ExpensesConstants.msgSubmittedSheetEmpty;
                    var colCount = grid.columns.length;
                    var emptyRow = '<tr><td colspan="' + colCount + '">' + msg;



     Could someone please help me?

    Thanks for your help!




  2. Peter Filipov
    Peter Filipov avatar
    1028 posts

    Posted 16 Sep 2015 Link to this post

    Hello Toan,

    I am not quite sure about your scenario. Could you please setup a runnable sample in dojo and send me the link to investigate it at my side.

    Peter Filipov
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top