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

Panelbar ID of item

24 Answers 492 Views
PanelBar
This is a migrated thread and some comments may be shown as answers.
Eric
Top achievements
Rank 1
Eric asked on 17 Apr 2018, 02:20 PM

Hi

 

I saw a thread about not getting to the ID of a panelbar item in the OnSelect handler from 2012. I almost can't believe that Telerik did not yet fix this issue. But i can't find anything so i'm afraid they didn't. 

It should be that easy to add to the component.

 

Eric

 

24 Answers, 1 is accepted

Sort by
0
Ivan Danchev
Telerik team
answered on 18 Apr 2018, 05:25 AM
Hello Eric,

The id of the selected PanelBar item can be accessed in the select event handler as demonstrated below:
function onSelect(e) {
    var dataItem = e.sender.dataItem(e.item);
    var id = dataItem.id;
    console.log(id);
}

Could you give this a try and let me know whether you are still having issues getting the item's id?

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.
0
Eric
Top achievements
Rank 1
answered on 18 Apr 2018, 12:05 PM

Hi

 

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);

}

0
Eric
Top achievements
Rank 1
answered on 18 Apr 2018, 12:24 PM

Hi

 

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

 

 

0
Ivan Danchev
Telerik team
answered on 20 Apr 2018, 07:42 AM
Hi Eric,

The element the PanelBar is initialized from is missing in the code snippet you posted. As you can see in this dojo example the id is successfully accessed on clicking the button. I've also added a select event handler, which shows the item id on selection.

As for the PanelBar's MVC wrapper are you using the BindTo method or remote binding? Could you post your PanelBar declaration?

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.
0
Eric
Top achievements
Rank 1
answered on 20 Apr 2018, 07:48 AM

Hi Ivan,

Thanks!!

Will MenuItem now also get an ID?

 

Eric

 

 

 

0
Eric
Top achievements
Rank 1
answered on 20 Apr 2018, 07:55 AM

Hi

 

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?

 


<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>


<h2>ShowApprovals</h2>



<div id="panelBar"></div>
<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 }
            ],
            select: function (e) {
                var dataItem = e.sender.dataItem(e.item);
                alert(dataItem.id);
            }
        })

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

 

 

 

0
Eric
Top achievements
Rank 1
answered on 20 Apr 2018, 08:06 AM

Hi

 

You say:The element the PanelBar is initialized from is missing in the code snippet you posted

I checked my code but do not see any difference with the dojo code

Can you tell me what was exactly missing?

Eric

 

0
Eric
Top achievements
Rank 1
answered on 20 Apr 2018, 08:08 AM

Hi

 

Even when i copy the whole dojo code i get the same error on the buttonclick :-(

 

Eric

0
Ivan Danchev
Telerik team
answered on 20 Apr 2018, 08:22 AM
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.
0
Eric
Top achievements
Rank 1
answered on 20 Apr 2018, 08:34 AM

Hi

 

The dojo is working correctly.

 

Browser using is Chrome..

See image

Eric

 

 

 

 

 

Eric

0
Ivan Danchev
Telerik team
answered on 20 Apr 2018, 08:40 AM
Hi Eric,

If the exact same code is used in your page then there should be any difference. Could you check the jQuery loaded and verify that the kendo.all.min.js file you are loading is version 2018.1.221? If you can post a runnable page or an example that contains that page I would be able to investigate further where that difference in behavior comes from.


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.
0
Eric
Top achievements
Rank 1
answered on 20 Apr 2018, 08:43 AM

Hi

Using Kendo UI v2017.3.913 

Eric

0
Ivan Danchev
Telerik team
answered on 20 Apr 2018, 08:50 AM
Hi,

With regard to the dataItem method I see no difference between this version and 2018.1.221: dojo with v2017.3.913 loaded.

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.
0
Eric
Top achievements
Rank 1
answered on 20 Apr 2018, 09:04 AM

Hi

 

Yes really strange, i cant upload my project to big

Eric

0
Ivan Danchev
Telerik team
answered on 20 Apr 2018, 09:11 AM
Hi,

Just attach the page/view where the PanelBar is declared and if the data is coming from a controller attach it as well. I will test them in a sample project and attach it for you to modify it if I am not able to reproduce the issue.

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.
0
Eric
Top achievements
Rank 1
answered on 20 Apr 2018, 09:15 AM

Hi

 

The controller just returns the view

The cshtml is added

 

Eric

0
Eric
Top achievements
Rank 1
answered on 20 Apr 2018, 09:15 AM
0
Ivan Danchev
Telerik team
answered on 23 Apr 2018, 07:26 AM
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.
0
Eric
Top achievements
Rank 1
answered on 23 Apr 2018, 08:25 AM

Hi

 

Works fine! But copied cshml into my page , the button still does not work, Some version issues?

 

Eric

0
Ivan Danchev
Telerik team
answered on 23 Apr 2018, 08:41 AM
Hi,

It is a possibility. Could you post the _Layout.cshtml or only the section in it where the jQuery and Kendo js files are registered?


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.
0
Eric
Top achievements
Rank 1
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"));
        }
    }
}

 

0
Ivan Danchev
Telerik team
answered on 25 Apr 2018, 08:55 AM
Hi Eric,

Version 1.10.2 of jQuery does not cause any issue at my end, so could you verify the kendo js files (kendo.all.min.js and kendo.aspnetmvc.min.js) are version 2017.3.913? And if so can you add the respective js and CSS files to the example and modify the Layout accordingly so that the issue is reproduced?

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.
0
Brook
Top achievements
Rank 1
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.
0
Ivan Danchev
Telerik team
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.
Tags
PanelBar
Asked by
Eric
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Eric
Top achievements
Rank 1
Brook
Top achievements
Rank 1
Share this question
or