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

    $("#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!

     

     ​

     

  2. Peter Filipov
    Admin
    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.

    Regards,
    Peter Filipov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top