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

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

1 Answer 552 Views

PanelBar

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

Ayan asked on 26 Mar 2014, 07:02 AM

panelbarrnd.zip

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

1 Answer, 1 is accepted

answered on 28 Mar 2014, 08:57 AM

PanelBarRnD.zip

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:

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:

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!