Questions on Kendo UI for jQuery Forum

2 answers

288 views

We want to use a Kendo PanelBar for a section of our page, but we need to be able to put styled content into the header - at minimum a span, but ideally divs and other HTML.

Using the attached image as an example, we want to place the grade and pass/fail icon into the header, while being able to customize the font size (and for that matter, the icon is an <i> tag itself).

PanelBar

answered on 19 Oct 2015

1 answer

586 views

Disable panelBar but allow user to expand and collapse

I have Views with multiple PanelBars and I want to be able to enable and disable all the PanelBars to simulate a ReadOnly View.

Is it possible to Disable a PanelBar but still allow the user to Collapse and Expend it?

PanelBar

answered on 30 Sep 2015

1 answer

213 views

expand all panels when printing kendo panelbar

Hi Telerik,

I have a kendopanelbar that contains 3 panel . I want to expand all panels to print details of gird in panels. I set expandMode is 'single'. The problem is In paper printer, It only show 1 panel and rest of panels collapse. I attempted to set expandMode is 'multiple' and It worked well But I just want expandMode is 'single'.

Here is my code:

function fqtt_PrintExpensesGrid() {
var gridElement = $("#expensesheetpanel");
gridElement.data("kendoPanelBar").expand($("li",gridElement.element)),
win = window.open('', '', 'width=1000, height=500'),
doc = win.document.open(),

htmlStart =
'<!DOCTYPE html>' +
'<html>' +
'<head>' +
'<meta charset="utf-8" />' +
'<title>' + ExpensesConstants.lbExpensesTitle + '</title>' +
'<link href="' + ExpensesConstants.cssKendoCommon + '" rel="stylesheet" /> ' +
'<link href="' + ExpensesConstants.cssKendoSilver + '" rel="stylesheet" /> ' +
'<link href="' + ExpensesConstants.cssQttlayout + '" rel="stylesheet" type="text/css"> ' +
'<link href="' + ExpensesConstants.cssQttprintreports + '" rel="stylesheet" type="text/css"> ' +
'</head>' +
'<body>',
htmlEnd =
'</body>' +
'</html>';
var decodedAddress = $('<div></div>').html(ExpensesConstants.lbCompanyAdress).text();

doc.write(htmlStart + gridElement.clone()[0].outerHTML + htmlEnd);

doc.close();
win.print();
}

Please help me!

Many Thanks.

PanelBar

answered on 16 Sep 2015

1 answer

211 views

Expand panel is not working .

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!

PanelBar

answered on 16 Sep 2015

5 answers

265 views

Use ng-repeat to render ul+li

i use the "kendo-panel-bar" wich works good with static data.

but, when i try to use "ng-repeat" everything breaks.

as a simple example to demonstrate this issue:

OK:
====

<ul kendo-panel-bar>
<li>TITEL
<ul>
<li>
TITEL 2
<ul><li>test 1</li><li>test 2</li></ul>
</li>
</ul>
</li>
</ul>

NOT WORKING:

=============

<ul kendo-panel-bar>
<li>TITEL
<ul>
<li ng-repeat="d in dataSource._data">
{{d.text}}
<ul><li>test 2</li><li>test 2</li></ul>
</li>
</ul>
</li>
</ul>

How can i fix that? I need the dynamic and nested options.

PanelBar

answered on 29 Jul 2015

4 answers

215 views

Set Expanded Panel On Init

I'm using a panelbar to display a list of chapters. Within each panel is a list of tasks within that chapter. Think of it like a list:

Chapter 1
Task 1
Task 2
Chapter 2
Task 3
Task 4
Chapter 3
Task 5

When the page is loaded, I want to expand the panel w/ the first incomplete task. I know which chapter contains this task (by index, not by ID), and want to have it be expanded when I initialize the panelbar.

Current accordion JS:

function initTasksAccordion() {

$("#task_accordion").kendoPanelBar({

expandMode: "multiple"

});

}

And some sample HTML:

<ul id="task_accordion">

# for (var c = 0; c < data.Chapters.length; c++) { #

<li>#= data.Chapters[c].Name #

# for (var t = 0; t < data.Chapters[c].Tasks.length; t++) { #

<div>

<h3 class="item-title">#= data.Chapters[c].Tasks[t].Name #</h3>

<div class="clear"></div>

</div>

# } #

</li>

# } #

</ul>

So if my first incomplete task is Task 4, I would know that it's the second (or first, if you use 0-based indexing) panel I want to have expanded when the panelbar is created. While I do have multiple selection enabled, for the initial load, only the one panel (with the incomplete task) should be expanded.

PanelBar

answered on 02 Jul 2015

3 answers

191 views

PanelBar Bug changing Title?

I can change any title of a panel like this

//var li = panelbar.wrapper.find("> li:first span.k-link.k-header");
var li = panelbar.wrapper.find("> li:nth(1) span.k-link.k-header");
li.contents().first().replaceWith("New Name");

But it does not work if the paenlBar contains this a .Content(@<text> </text>); in the parent panel bars.

@(Html.Kendo().PanelBar()
.Name("panelbar")

.Items(panelbar =>
{
panelbar.Add().Text("First Person")

.Content(@<text>

@Html.TextBoxFor(m => m.firstName, new { @class = "input k-textbox"})

</text>);

})

)

Why is this?

Thanks

PanelBar

answered on 24 Jun 2015

1 answer

159 views

Expanding panels when using AngularJS directive

Hello,

First off I am a first time Kendo UI user. I really liked what I see from my trial so I purchased the UI Pro license.

I need to programatically expand panels in my accordion. I see the sample code for doing it the jQuery way but is there a sample that shows how I can do it the Angular way? I am thinking I need to create my own directive that does what your jQuery sample does in the linking function. I hope someone else has solved this problem.

Thanks,

Loc

PanelBar

answered on 03 Jun 2015

3 answers

450 views

Full Height PanelBar

Is there any way to achieve a full-height PanelBar with per-group scrolling? Specifically, what I'd like to achieve is to have the space available to the PanelBar be predefined. When the PanelBar starts all the items should be collapsed at the top (as usual). When you open an item, the content space should expand to fill up the entire allocated space, not just what's needed for the content. The other titles should end up at the bottom of the allocated space below the new content. If the content is to large for the space, then a scroll bar should be added inside the content area (not outside over the whole PanelBar - otherwise you have to scroll to get to the other PanelBar headings).

I'm looking for the exact same behavior as in this example for the ASP.NET Ajax PanelBar:
http://demos.telerik.com/aspnet-ajax/panelbar/examples/functionality/scrolling/defaultcs.aspx

Is this possible with the Kendo PanelBar?

PanelBar

answered on 01 Jun 2015

1 answer

546 views

Dynamically creating panel bar items containing partial views and models

I want to dynamically create several panel sections that each contain a partial view and have each bind to a corresponding model.
I have a main model that contains a list of child models. Each child model has a property to specify the name of it's partial view.

The logic below correctly outputs each panel's content by using a foreach statement.
The issue I'm having is the "for each" loses my child models when I post my main model back to the controller on save.
How can I perform the same logic utilizing a "BindTo" instead of a "foreach"?
Are their any other ways to dynamically create panel bars containing partial views via a model collection?

@(Html.Kendo().PanelBar()
.Name("panelbar")
.ExpandMode(PanelBarExpandMode.Multiple)
.Animation(animation => animation.Enable(false))
.Items(panelbar =>
{
foreach (ModelBase childModel in Model.ChildModels)
{
panelbar.Add()
.Text(childModel.PartialViewTitle)
.Content(@<section>
@Html.Partial(childModel.PartialViewName, childModel)
</section>);
}
}));

PanelBar