I need to use a 3 state checkbox in my app. I am RadButton control whose ToggleType property I have set to "CustomToggle" to make it behave as a 3 state checkbox control.
I need to check/uncheck/partially check the above radbutton in javascript. I have used below javascript code. But it doesn’t work-
var varb= document.getElementById ("RadButton1");
varb.checked=true;
This is the control declaration-
<telerik:RadButton ToggleType="CustomToggle" ID="RadButton1" runat="server"> <ToggleStates> <telerik:RadButtonToggleState Text="Unchecked" PrimaryIconCssClass="rbToggleCheckbox" /> <telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxFilled" Text="Filled" /> <telerik:RadButtonToggleState Text="Checked" PrimaryIconCssClass="rbToggleCheckboxChecked" /> </ToggleStates> </telerik:RadButton>
Please provide inputs?
Thanks,Tanima
3 Answers, 1 is accepted
To achieve the required functionality you need to use the RadButton's client-side method .set_selectedToggleStateIndex(stateIndex) where the stateIndex parameter is an integer value corresponding to the order of the custom state. Also, to get reference to the RadButton's client-side object you need to use $find() method, e.g.:
<script type="text/javascript"> function setButtonIntoFilledState() { var button = $find("<%=RadButton1.ClientID %>"); button.set_selectedToggleStateIndex(1);//set the button in the second registered custom state }</script>Additional information regarding the RadButton's Client-Side API is available in the following help article:
Client-side basics
Please let us know if this helps.
Kind regards,
Dobromir
the Telerik team
Rank 1
Hi, Thanks Dobromir, I have following 2 requirements-
First- I need to use a RADBUTTON to create a treeview structure having 3 state checkbox in it. On clicking any childnode, the related parent should become checked i.e. 'partially filled' /filled and on clicking parent the related children should all be checked. This is the aspx code and the related javascript functions,but it is not working.
ASPX code
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="smScriptMgr" runat="server">
</asp:ScriptManager>
<div style="margin-left: 20px; padding-left: 20px;">
<table>
<tr>
<td valign="top">
<telerik:RadButton AutoPostBack="false"
ButtonType="ToggleButton" runat="server" OnClientClicked ="AfterCheck(this)" ToggleType="CustomToggle" ID="RadButton2">
<ToggleStates>
<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" Text="Unchecked" />
<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxFilled" Text="Filled" />
<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" Text="Checked" />
</ToggleStates>
</telerik:RadButton>
</td>
<td align="left">2-door ('06 model)
</td>
</tr>
</table>
<div style="margin-left: 20px; padding-left: 20px;">
</div>
<table>
<tr>
<td valign="top">
<telerik:RadButton AutoPostBack="false"
ButtonType="ToggleButton" runat="server" OnClientClicked ="AfterCheck(this)" ToggleType="CustomToggle" ID="RadButton3">
<ToggleStates>
<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" Text="Unchecked" />
<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxFilled" Text="Filled" />
<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" Text="Checked" />
</ToggleStates>
</telerik:RadButton>
</td>
<td align="left">
4-door ('06 model)
</td>
</tr>
</table>
<div style="margin-left: 20px; padding-left: 20px;">
</div>
</div>
</form>
</body>
JS Code
function AfterCheck(obj) {
var src =obj;
var isChkBoxClick=true ;
if (isChkBoxClick) {
var parentTable = GetParentByTagName("table", src);
var nxtSibling = parentTable.nextSibling;
if (nxtSibling && nxtSibling.nodeType == 1)//check if nxt sibling is not null & is an element node
{
if (nxtSibling.tagName.toLowerCase() == "div") //if node has children
{
//check or uncheck children at all levels
CheckUncheckChildren(parentTable.nextSibling, src.checked);
}
}
//check or uncheck parents at all levels
if (src.checked==true )
CheckUncheckParents(src, src.checked);
}
}
function CheckUncheckChildren(childContainer, check) {
var childChkBoxes = childContainer.getElementsByTagName("input");
var childChkBoxCount = childChkBoxes.length;
for (var i = 0; i < childChkBoxCount; i++) {
childChkBoxes[i].checked = check;
}
}
function CheckUncheckParents(srcChild, check) {
var parentDiv = GetParentByTagName("div", srcChild);
var parentNodeTable = parentDiv.previousSibling;
if (parentNodeTable) {
var checkUncheckSwitch;
var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
if (isAllSiblingsChecked)
checkUncheckSwitch = true;
else
checkUncheckSwitch = false ;
var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
if (inpElemsInParentTable.length > 0) {
var parentNodeChkBox = inpElemsInParentTable[0];
parentNodeChkBox.checked = checkUncheckSwitch;
//do the same recursively
CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
}
}
}
function AreAllSiblingsChecked(chkBox) {
var parentDiv = GetParentByTagName("div", chkBox);
var childCount = parentDiv.childNodes.length;
var bIsNotchecked=false ;//tanima
for (var i = 0; i < childCount; i++) {
if (parentDiv.childNodes[i].nodeType == 1) //check if the child node is an element node
{
if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {
var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
//if any of sibling nodes are not checked, return false
if (prevChkBox !=null )
{
if( prevChkBox.checked)
return true ;
}
else
{ bIsNotchecked=true ; }
}
}
}
if (bIsNotchecked) { return false ;}
}
//utility function to get the container of an element by tagname
function GetParentByTagName(parentTagName, childElementObj) {
var parent = childElementObj.parentNode;
while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
parent = parent.parentNode;
}
return parent;
}
Secondly this RADBUTTON needs to be created via XSLT.
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:telerik="remove">
<xsl:template match="/">
<telerik:RadButton AutoPostBack="false" OnClientCheckedChanged="AfterCheck" ButtonType="ToggleButton" runat="server"
ToggleType="CustomToggle" ID="RadButton1">
<ToggleStates>
<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" Text="Unchecked" />
<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxFilled" Text="Filled" />
<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" Text="Checked" />
</ToggleStates>
</telerik:RadButton>
</xsl:template>
</xsl:stylesheet>
Please guide for the same
PS – I cannot use RadTreeView as I have to bind the RadTreeView.Datasource to an XML file whose structure is -
<?xml version="1.0" encoding="utf-8"?>
<TOC> <Section UID="1002" PUID="1002" LEVEL="1" TITLE="DESCRIPTION AND OPERATION">
<Section UID="1003" PUID="1002" LEVEL="2" TITLE="Driveline System">
<Section UID="1004" PUID="1002" LEVEL="3" TITLE="Driveline System">
</Section>
<Section UID="1005" PUID="1002" LEVEL="3" TITLE="Driveshaft">
</Section>
<Section UID="1006" PUID="1002" LEVEL="3" TITLE="U-joints">
</Section>
</Section>
</Section>
</TOC>
However, RadTreeView requires ”Node” tags in the XML structure.
PLEASE GUIDE FOR THE SAME
I have answered your support ticket on the subject. For convenience I will paste my answer here as well.
Please note that our support services cover the functionality of our controls only and we don't provide custom solutions. I checked your code and I see the following problems in it:
- RadButton's OnClientClicked property accepts string value which should be the name of the JavaScript function that should handle the event, e.g.:
-
<telerik:RadButtonAutoPostBack="false"ButtonType="ToggleButton"runat="server"OnClientClicked="AfterCheck"ToggleType="CustomToggle"ID="RadButton3">
- The ClientClicked event handler accepts two parameters, first parameter is the RadButton's client-side object, and the second parameter is the event arguments object. In the provided sample code you are using the parameter of AfterCheck function as a DOM element. To get reference to the RadButton's DOM element you need to use its get_element() client-side method, e.g.:
<script type="text/javascript">functionAfterCheck(sender, args){varobj = sender.get_element();varsrc = obj;
Regarding the XSL Templates, I am not quite sure what you are trying to achieve. Register RadButton control on the page using the template it is not a trivial task. Server control may have a client-side object creation which is created during the client-side lifecycle of the page. I believe the following article will be of help for your scenario:
http://www.codeproject.com/KB/aspnet/server-control-using-xslt.aspx
On a side note, RadTreeView can be bound to a XmlDataSource, thus you can use the XML file that you have to create a XmlDataSource object to provide the required structure. Please review the following help article and live demo:
Binding to ASP.NET DataSource Components
TreeView / Programmatic Data Binding
Greetings,
Dobromir
the Telerik team