This is a migrated thread and some comments may be shown as answers.

Expand panel is not working .

1 Answer 205 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Toan
Top achievements
Rank 1
Toan asked on 14 Sep 2015, 08:46 AM

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>';​

$("#expensesheetpanel").kendoPanelBar(
        {
            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 :

$("#submittedsheetsgrid").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;
                e.sender.tbody.parent().width(e.sender.thead.width()).end().html(emptyRow);
            }
        }
    });

 

......

 Could someone please help me?

Thanks for your help!

 

 ​

 

1 Answer, 1 is accepted

Sort by
0
Peter Filipov
Telerik team
answered on 16 Sep 2015, 08:44 AM
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.

Regards,
Peter Filipov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
PanelBar
Asked by
Toan
Top achievements
Rank 1
Answers by
Peter Filipov
Telerik team
Share this question
or