How to fetch the values of selected check box items inside PanelBar

2 posts, 0 answers
  1. Ayan
    Ayan avatar
    1 posts
    Member since:
    Mar 2014

    Posted 26 Mar 2014 Link to this post

    Hi ,
    I am trying to create a panelbar which will have children containing checkboxes along with a text .
    I have been able create such a structure where the page is rendering the checkboxes propely  .
    Below is the code snippet for the panelbar with dummy data .

    <body ng-app="connectUIApp">
    <div ng-controller="BrowseContentController">
        <button class="k-button" id="applyFilter" ng-click="handleApplyClick(message);">Apply</button>
        <div id="creatorSelect" ></div>
    </div
         
         
        <script>
        var app = angular.module('connectUIApp', ['kendo.directives']);
         
        $(document).ready(function()
        {
            $("#creatorSelect").kendoPanelBar(
            {
                dataSource:
                [
                {
                    text:"Item1",
                    value:"Item1 Value",
                    items:[
                        {
                            text:"<input type='checkbox' value='type'> Child1</input>",
                            encoded:false
                        },
                        {
                            text:"<input type='checkbox' value='type'> Child2</input>",
                            encoded:false
                        },
                        {
                            text:"<input type='checkbox' value='type'> Child3</input>",
                            encoded:false
                        }
                ]},
                {
                    text:"Item2",
                    value:"Item2 Value",
                    items:[
                        {
                            text:"<input type='checkbox' value='type'> Child1</input>",
                            encoded:false
                        },
                        {
                            text:"<input type='checkbox' value='type'> Child2</input>",
                            encoded:false
                        }
                ]}
                ]
            });
        });
    </script>


    The requirement is that different checkboxes will be selected and once a button is clicked (the apply button in this case ) ,all the selected  values  (Child1,Child2 etc) needs to be passed to the backend.

    I have written a java script method to iterate over the chil items of the panelbar ,but I have not been able to select the checkbox values (true,false etc).

    Below is the javascript method for your reference .

    function BrowseContentController($scope)
        {
                 
            $scope.handleApplyClick = function()
            {
                 
                var panelBar = $("#creatorSelect").kendoPanelBar().data("kendoPanelBar");
                 
                var children = panelBar.element.children();
                 
                for (var i = 0; i < children.length; i++)
                {
                    var child = children[i];
                    var textContent=child.textContent;
                    //var item=child.item();
                    alert('textContent:'+textContent);
                }
                 
              
            };
                 
             
        }

    Please note ,I am using angular and kendo together and the code is to some extent mixed a bit .
    I have attached all the required files in the attachment .Please unzip the attached file and run the PanelBar.html file .

    I have checked the existing Kendo UI documentation ,but have not found something useful till now in this regard .
    I need some help to get the values of the selected checkboxes .
    Please help me if any one has some idea on how to proceed in this case .


    Regards,
    Ayan




  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 28 Mar 2014 Link to this post

    Hello Ayan,

    The checkboxes in the template are not direct childs of the panelbar element so a different selector needs to be used in order to get the checked checkboxes:
    panel.element.find(":checkbox:checked")
    Also, note that:
    1. Input elements cannot have content. You should close the input tag and add the text after the input. To retrieve the text for the checkbox, you should  get the next sibling value.

    2. The widget should be initialized only once(or destroyed before initialized again) and the code that you are currently using will reinitialize it before getting the panelbar instance:
      var panelBar = $("#creatorSelect").kendoPanelBar().data("kendoPanelBar");
      The correct approach is to get the already existing instance:
      var panelBar = $("#creatorSelect").data("kendoPanelBar");
    For convenience, I attached the file with the suggested modifications added.


    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top