Questions on Kendo UI for jQuery Forum

5 answers

659 views

horizontal panelbar

Is there a way to get the Panelbar slide Horizontal instead of vertical? That would be nice.

PanelBar

answered on 22 Jun 2016

1 answer

258 views

input text without clear button

When I place a TextBox into a panelbar the IE clear button is not visible. It is related with the k-widget class of the ul element.

I can fix it adding:

Is there any good reason for hiding the clear button in a Panelbar or is it just a bug?

You can reproduce it with the Basic panelbar demo in Dojo:

<!DOCTYPE html>
<html>
<head>
    <base href="http://demos.telerik.com/kendo-ui/panelbar/index">
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.common-material.min.css" />
    <link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.504/styles/kendo.material.min.css" />
    <script src="//kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js"></script>
    <script src="//kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js"></script>
</head>
<body>
        <input type="text" value="works" />   
        <div id="example">
                <ul id="panelbar">
                <li class="k-state-active">
                    <span class="k-link k-state-selected">My Teammates</span>
                    <div style="padding: 10px;">
                        <div class="teamMate">
                            <img src="../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
                            <h2>Andrew Fuller</h2>
                            <p>Team Lead</p>
                            <input type="text" value="works not" />   
                        </div>
                        <div class="teamMate">
                            <img src="../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
                            <h2>Nancy Leverling</h2>
                            <p>Sales Associate</p>
                        </div>
                        <div class="teamMate">
                            <img src="../content/web/panelbar/robert.jpg" alt="Robert King">
                            <h2>Robert King</h2>
                            <p>Business System Analyst</p>
                        </div>
                    </div>
                </li>
                <li>
                    Projects
                    <ul>
                        <li>New Business Plan</li>
                        <li>
                            Sales Forecasts
                            <ul>
                                <li>Q1 Forecast</li>
                                <li>Q2 Forecast</li>
                                <li>Q3 Forecast</li>
                                <li>Q4 Forecast</li>
                            </ul>
                        </li>
                        <li>Sales Reports</li>
                    </ul>
                </li>
                <li>
                    Programs
                    <ul>
                        <li>Monday</li>
                        <li>Tuesday</li>
                        <li>Wednesday</li>
                        <li>Thursday</li>
                        <li>Friday</li>
                    </ul>
                </li>
                <li disabled="disabled">
                    Communication
                </li>
            </ul>
            <style>
                #panelbar {
                    max-width: 400px;
                    margin: 0 auto;
                }
                .teamMate:after {
                    content: ".";
                    display: block;
                    height: 0;
                    line-height: 0;
                    clear: both;
                    visibility: hidden;
                }
                .teamMate h2 {
                    font-size: 1.4em;
                    font-weight: normal;
                    padding-top: 20px;
                }
                .teamMate p {
                    margin: 0;
                }
                .teamMate img {
                    float: left;
                    margin: 5px 15px 5px 5px;
                    border: 1px solid #ccc;
                    border-radius: 50%;
                }
            </style>
            <script>
                $(document).ready(function() {
                    $("#panelbar").kendoPanelBar({
                        expandMode: "single"
                    });
                });
            </script>
        </div>

</body>
</html>

PanelBar

answered on 31 May 2016

3 answers

153 views

Collapsing or expanding panel causes page jump to top on mobile devices

I have a Panelbar on a website I'm developing, with a large number of panels (dynamic, but it can be up to 12); most of these panels contains Kendo Grids, but some contain just text. On mobile devices, I've found that expanding or collapsing a panel that contains a Grid, will cause the page to jump to the top. Since the panels are a bit further down the page, we're finding this to be really annoying. It does not happen on a desktop screen though, even if I shrink the window down to about a mobile size (it does happen when I use Chrome's mobile emulation setting, however). Is there a way that I can prevent this from happening? Thank you.

Trent

PanelBar

answered on 14 Apr 2016

3 answers

328 views

Blocking Panelbar Expansion

I'm trying to block the expansion of a panel bar to no avail. I've tried both of these methods on the select and expand event:

function OnSelect(e) {
e.preventDefault();
}

function OnExpand(e) {
e.preventDefault();
}

I just really need a method to block the expansion if something fails, any suggestions or alternatives would be welcome.

PanelBar

answered on 23 Feb 2016

7 answers

1.2K+ views

Kendo Radio Buttons

I would like to get an example of using Kendo RadioButtonFor control which is not working whatever way I use.
For example I am using it following way insode my Editor Template for Kendo Grid

@(Html.Kendo().RadioButtonFor(model=>model.IsMale).Value(true).Name("IsMale").Label("Male").Checked(Model.IsMale)) @(Html.Kendo().RadioButtonFor(model=>model.IsMale).Value(false).Name("IsMale").Label("Female").Checked(Model.IsMale))

It does not show correct radiobutton selected no matter isMale is true or false....
I'd appreciate any good example....

Thanks
Rizwan

PanelBar

answered on 22 Feb 2016

2 answers

178 views

Control Panebar expand collapse from select event

Hey there, I have a panel bar that can have multiple items. I use the select method to do a bunch of code work. I know want to implement an unsaved changes warning on the page so I need to implement a way to stop the panelbar from expanding or collapsing.

I know I can do it from the expand and collapse events - I have tested this and it works great (e.preventDefault()). However since I have all of my coding within the select event and I have other actions that sometimes expand and collapse the panels dynamically I would like the ability to stop the panelbar from expanding and collapsing from the select event. Is that possible? I do see that the select event fires first.

Thanks,

Coty

PanelBar

answered on 19 Feb 2016

1 answer

35 views

General Questions for Conversion

We currently use the JQueryUI accordion (http://api.jqueryui.com/accordion/), and are looking to convert to the Kendo PanelBar. However, there's some functionality in the accordion that we've come to rely on, and I need to see if there are equivalents or workarounds in the PanelBar before we actually switch.

First off, this is the HTML we'll be using:

<ul id="accordion">

<li id="header_1_header">

Header 1

<div id="header_1_accordion">

CONTENT 1

</div>

</li>

<li id="header_2_header">

Header 2

<div id="header_2_accordion">

CONTENT 2

</div>

</li>

<li id="header_3_header">

Header 3

<div id="header_3_accordion">

CONTENT 3

</div>

</li>

<li id="header_4_header">

Header 4

<div id="header_4_accordion">

CONTENT 4

</div>

</li>

</ul>

And this is my first pass at the init:

$('#accordion').kendoPanelBar({

expandMode: 'single',

activate: function(e) {

var header_id = e.item.id;

var content_id = $('#' + e.item.id).find('div:first').attr('id');

switch(header_id) {

case 'header_1_header':

header1Function();

break;

case 'header_4_header':

header4Function();

break;

}

if (errorExists)

validateSection('#' + content_id);

}

});

Our primary use of the accordion functionality is for handling error messages - validating a section at a time, opening the first section w/ an error on attempted save, and clearing the errors for a section when it's closed.

First off, is there a better way to get the content div than $('#' + e.item.id).find('div:first').attr('id')? In the JQueryUI accordion there are built in functions to get the content (div) based on the parent (li).

Second, is there any functionality built in to the panelbar to get the currently selected section and the newly selected section? For example, if header_4_header was open, and I clicked header_1_header, I'd want to know header_4_accordion as the "old" section, and header_1_accordion as the "new" section. If all we can get is the IDs for the headers (li) that's fine as well.

Finally, is there any way, outside of the init, to get the currently selected panel (the div preferrably, not the li)? This would be for clearing error messages based on the newly-active section - ie. click header_2_header and hide the errors in header_3_accordion.

PanelBar

answered on 02 Feb 2016

3 answers

348 views

How can i maintain persist state for panel bar

How can i maintain persist state when i redirect to the corresponding pages

<!DOCTYPE html>

<html>

<head>

<title></title>

<link rel="stylesheet" href="styles/kendo.common.min.css" />

<link rel="stylesheet" href="styles/kendo.default.min.css" />

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

</head>

<body>

<div id="example">

<div class="demo-section k-content">

<ul id="panelbar">

<li><a href="page1.aspx"></a>Page1</li>

<li><a href="page2.aspx"></a>Page2</li>

<li><a href="page3.aspx"></a>Page3</li>

<li>

Page Sub Level2

<ul>

<li><a href="page4.aspx"></a>Page4</li>

<li><a href="page5.aspx"></a>Page5</li>

<li><a href="page6.aspx"></a>Page6</li>

<li>

<ul>

<li><a href="page7.aspx"></a>Page7</li>

<li><a href="page8.aspx"></a>Page8</li>

<li><a href="page9.aspx"></a>Page9</li>

</ul>

</li>

</ul>

</li>

<li><a href="page10.aspx"></a>Page10</li>

<li>

Page Sub Level22

<ul>

<li><a href="Page11.aspx"></a>Page11</li>

<li><a href="Page12.aspx"></a>Page12</li>

<li><a href="Page13.aspx"></a>Page13</li>

</ul>

</li>

<li><a href="Page14.aspx"></a>Page14</li>

</ul>

</div>

<div class="box">

<h4>Console log</h4>

<div class="console"></div>

</div>

<script>

function onSelect(e) {

kendoConsole.log("Select: " + $(e.item).find("> .k-link").text());

}

function onExpand(e) {

kendoConsole.log("Expand: " + $(e.item).find("> .k-link").text());

}

function onCollapse(e) {

kendoConsole.log("Collapse: " + $(e.item).find("> .k-link").text());

}

function onActivate(e) {

kendoConsole.log("Activate: " + $(e.item).find("> .k-link").text());

}

function onContentLoad(e) {

kendoConsole.log("Content loaded in <b>" + $(e.item).find("> .k-link").text() +

"</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");

}

function onError(e) {

kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);

}

$("#panelbar").kendoPanelBar({

expandMode: "single",

select: onSelect,

expand: onExpand,

collapse: onCollapse,

activate: onActivate,

contentLoad: onContentLoad,

error: onError,

contentUrls: [, , , "../content/web/panelbar/ajax/ajaxContent1.html", "error.html"]

});

</script>

</body>

</html>

PanelBar

answered on 21 Dec 2015

2 answers

19 views

Angular Panelbar seems to break with later versions

Is there something I'm doing wrong?

Not working: http://dojo.telerik.com/iDExa/3

Working: http://dojo.telerik.com/iDExa/4

PanelBar

answered on 25 Nov 2015

2 answers

65 views

PanelBar in AngularJs

Hi Guys,

I'm having a hard time getting along with the PanelBar and angularJs. I'm hoping "Integrates seamlessly with AngularJs" isn't just a tag line and i've overlooked something somewhere.

I've written the functionality I am after (with the content displayed how I'd like) in pure AngularJs and this looks like the following

https://jsfiddle.net/5msbpmt9/3/

I'm trying to replicate the granularity of being able to know what object behind the panelBar has been clicked on. All the entries follow the same layout and must have an image next to some text. I thought "contentUrls" may be the key there but I'm unsure as to how to use the angularJs scoped values from the item in the template file, plus also it appears I am unable to specify 1 content Url for all entries? it must be an entry for each item entry in the panel bar?

Given the above jsfiddle implementation using just AngularJs, can anyone help me to implement the same kind of functionality in the PanelBar.

PanelBar