Panelbar ID of item

25 posts, 0 answers
  1. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 17 Apr 2018 Link to this post

    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

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2086 posts

    Posted 18 Apr 2018 Link to this post

    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.
  3. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 18 Apr 2018 in reply to Ivan Danchev Link to this post

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

    }

  4. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 18 Apr 2018 Link to this post

    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

     

     

  5. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2086 posts

    Posted 20 Apr 2018 Link to this post

    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.
  6. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 20 Apr 2018 Link to this post

    Hi Ivan,

    Thanks!!

    Will MenuItem now also get an ID?

     

    Eric

     

     

     

  7. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 20 Apr 2018 in reply to Eric Link to this post

    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>

     

     

     

  8. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 20 Apr 2018 in reply to Eric Link to this post

    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

     

  9. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 20 Apr 2018 in reply to Eric Link to this post

    Hi

     

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

     

    Eric

  10. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2086 posts

    Posted 20 Apr 2018 Link to this post

    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.
  11. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 20 Apr 2018 in reply to Ivan Danchev Link to this post

    Hi

     

    The dojo is working correctly.

     

    Browser using is Chrome..

    See image

    Eric

     

     

     

     

     

    Eric

  12. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2086 posts

    Posted 20 Apr 2018 Link to this post

    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.
  13. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 20 Apr 2018 in reply to Ivan Danchev Link to this post

    Hi

    Using Kendo UI v2017.3.913 

    Eric

  14. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2086 posts

    Posted 20 Apr 2018 Link to this post

    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.
  15. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 20 Apr 2018 in reply to Ivan Danchev Link to this post

    Hi

     

    Yes really strange, i cant upload my project to big

    Eric

  16. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2086 posts

    Posted 20 Apr 2018 Link to this post

    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.
  17. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 20 Apr 2018 in reply to Ivan Danchev Link to this post

    Hi

     

    The controller just returns the view

    The cshtml is added

     

    Eric

  18. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 20 Apr 2018 in reply to Eric Link to this post

    The file
  19. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2086 posts

    Posted 23 Apr 2018 Link to this post

    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.
  20. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 23 Apr 2018 in reply to Ivan Danchev Link to this post

    Hi

     

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

     

    Eric

  21. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2086 posts

    Posted 23 Apr 2018 Link to this post

    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.
  22. Eric
    Eric avatar
    17 posts
    Member since:
    Sep 2017

    Posted 23 Apr 2018 in reply to Ivan Danchev Link to this post

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

     

  23. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2086 posts

    Posted 25 Apr 2018 Link to this post

    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.
  24. Brook
    Brook avatar
    1 posts
    Member since:
    May 2017

    Posted 28 Aug 2019 Link to this post

    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.
  25. Ivan Danchev
    Admin
    Ivan Danchev avatar
    2086 posts

    Posted 30 Aug 2019 Link to this post

    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.
Back to Top