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

Panelbar ID of item

24 Answers 623 Views

PanelBar

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

24 Answers, 1 is accepted

answered on 18 Apr 2018, 12:05 PM

dataItem is not asssigned, is there any other way i need to define the Item:

Creation of Items:

PanelBarItemModel lMenuItem = new PanelBarItemModel()
                        {
                            Id = imContract.contract_id.ToString(),
                            Text = imContract.description
                            }
                    };

Used onSelect

function onSelectItemIndexMenu(e) {
"use strict";

var dataItem = e.sender.dataItem(e.item);
var id = dataItem.id;
console.log(id);

}

answered on 18 Apr 2018, 12:24 PM

Tested this:

<button id="btn1" class="k-button">Update Data Item</button>
<script>
$(document).ready(function () {
$("#panelBar").kendoPanelBar({
dataSource: [
{
text: "Item 1",
id: 1,
expanded: false,
items: [
{ text: "Item 1.1", id: 11 },
{ text: "Item 1.2" ,id: 12 }
]
},
{ text: "Item 2", id: 2 }
]
})
$("#btn1").on('click', function () {
var panelBar = $("#panelBar").data("kendoPanelBar");
var dataItem = panelBar.dataItem(".k-item:first"); // get reference to the first item
alert(dataItem.id);
})
});
</script>

Also here getting error reading Id from Undefined

Eric

answered on 20 Apr 2018, 07:55 AM

Forgot to mention a part still does not work:

Uncaught TypeError: Cannot read property 'id' of undefined

This is when i click the button, the Select is working fine!

What am i missing here?

answered on 20 Apr 2018, 08:22 AM

Desktop-2018-04-20-11-13-45.zip

Hi Eric,

The dojo works correctly at my end (see the attached zipped video). The id is shown in a message both on clicking the button and on selecting an item. What browser are you getting this exception in? Are you getting the exception only in your page(application) or you are getting it in the dojo as well?

As for the missing element I meant the div element with id panelBar, which was missing in the code snippet you posted.

Regards,
Ivan Danchev
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 23 Apr 2018, 07:26 AM

MVCPanelBarTest.zip

Hi Eric,

Attached you can find a sample runnable project that loads Kendo UI version 2017.3.913 and has the code from the view you attached in the Index view. At my end accessing the items id works as expected. Could you modify it accordingly so that the issue is reproduced and attach it back for further review?

Regards,
Ivan Danchev
Progress Telerik

Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

answered on 23 Apr 2018, 08:56 AM

Query JavaScript Library v1.10.2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Enterprise Control</title>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Scripts.Render("~/bundles/kendo")

@Html.Kendo().Culture()
</head>

<body>
<div id="myheader">
@Html.Action("Header","Home" )
</div>

<div>
@Html.Action("Menu", "Home")
</div>

<div class="container body-content">
@RenderBody()

<div>
@Html.Action("Footer", "Home")
</div>
</div>
@Html.Kendo().DeferredScripts()
@RenderSection("scripts", required: false)
</body>
</html>
<script>
function pageLoad() {
$('#headerMenu1').show();
}

window.onload = pageLoad;
</script>

Bundles

using System.Web;
using System.Web.Optimization;

namespace EnterpriseControl
{
public class BundleConfig
{
// For more information on bundling, visit http://go.microsoft.com/fwlink/?LinkId=301862
public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
"~/Scripts/jquery.validate*"));

// Use the development version of Modernizr to develop with and learn from. Then, when you're
// ready for production, use the build tool at https://modernizr.com to pick only the tests you need.
bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
"~/Scripts/modernizr-*"));

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));

// Use the following code if Kendo UI is hosted locally
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/kendo.all.min.js",
"~/Scripts/kendo/kendo.aspnetmvc.min.js"));

bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/kendo/kendo.common.min.css",
"~/Content/kendo/kendo.bootstrap.min.css",
"~/fonts/font-awesome-4.7.0/css/font-awesome.min.css",
"~/Content/site.css"));
}
}
}

answered on 28 Aug 2019, 04:25 PM

The LI element should have an ID value given it that matches the value of PanelBarItemModel.Id. UI testing is best when elements are found with a unique ID on a page basis. Hand coding JavaScript or the like to find things is an unnecessary effort and prone to error when things change. By not place an ID value on an element when provided by a developer, I believe Telerik is breaking one of the core principles of HTML. Other controls in Telerik's library also fall victim to this issue. More and more it appears that Telerik chooses the most convoluted way to get things accomplished. It is beyond frustrating all the ridiculous JavaScript that is need to get Telerik controls working even in the simple scenarios.

answered on 30 Aug 2019, 08:19 AM

Hello,

Instead of rendering id, which may or may not be unique, we render a data-uid attribute in the li elements, for example:

<li role="menuitem" class="k-item k-state-default" data-uid="bcd535db-7747-451f-9a91-48d488b49397"><span class="k-link">Sofas</span></li>

This attribute relates the rendered li element with the item's dataItem. The values of the other fields in the item can be obtained from the dataItem. For more details on the uid identifier refer to its section in the API documentation.

With regard to any the difficulties you might have in using the API to achieve certain scenarios, if you need assistance with that or have suggestions on possible improvements, please submit a support ticket, or open a new forum thread and provide more details on the case. We are always open to feedback that can lead to improving the UI suite.

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.