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 .
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 .
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
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
1 Answer, 1 is accepted
0
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:
Also, note that:
Regards,
Daniel
Telerik
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")- 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.
- 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:
The correct approach is to get the already existing instance:varpanelBar = $("#creatorSelect").kendoPanelBar().data("kendoPanelBar");
varpanelBar = $("#creatorSelect").data("kendoPanelBar");
Regards,
Daniel
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!