PDA

View Full Version : [CLOSED] Three state checkbox in tree panel



ajaythakor
Sep 25, 2017, 3:44 PM
I have a treepanel and i want its nodes to set in three states: checked, unchecked and other (show hifen in checkbox).

I have tried the link https://www.sencha.com/forum/showthread.php?28096-2-x-Tri-state-checkbox-and-themed-checkbox-and-radio, but its not working for me.

Below is my code with treepanel:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testMessageBoxParent.aspx.cs" Inherits="DocDataUI.testMessageBoxParent" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ext:ResourceManager ID="supportResourceManager" runat="server" DirectMethodNamespace="DM">
</ext:ResourceManager>

<ext:TreePanel ID="treeAdminProtocol" runat="server"
Title="Three state tree nodes" Frame="true"
UseArrows="true" AutoScroll="true"
Animate="true" RootVisible="false"
Layout="FitLayout" MarginSpec="15 15 0 15">
<Root>
<ext:Node Expanded="true">
<Children>
<ext:Node Text="Node 1" Expanded="true" Checked="true" NodeID="Node 1" Cls="parent">
<Children>
<ext:Node Text="Child 1" Checked="true" Cls="parent">
<Children>
<ext:Node Text="Sub Child 1" Leaf="true" Checked="true" />
<ext:Node Text="Sub Child 2" Leaf="true" Checked="true" />
</Children>
</ext:Node>
<ext:Node Text="Child 2" Leaf="true" Checked="true" Cls="parent" />
<ext:Node Text="Child 3" Leaf="true" Checked="true" Cls="parent" />
<ext:Node Text="Child 4" Leaf="true" Checked="true" Cls="parent" />
</Children>
</ext:Node>
</Children>
<Children>
<ext:Node Text="Node 1" Expanded="true" Checked="true" NodeID="Node 2" Cls="parent">
<Children>
<ext:Node Text="Child 5" Leaf="true" Checked="true" Cls="parent" />
<ext:Node Text="Child 6" Leaf="true" Checked="true" Cls="parent" />
</Children>
</ext:Node>
</Children>
<Children>
<ext:Node Text="Node 3" Expanded="true" Checked="true" NodeID="Node 3" Cls="parent">
<Children>
<ext:Node Text="Child 7" Leaf="true" Checked="true" Cls="parent" />
<ext:Node Text="Child 8" Leaf="true" Checked="true" Cls="parent" />
</Children>
</ext:Node>
</Children>
</ext:Node>
</Root>
</ext:TreePanel>
</div>
</form>
</body>
</html>


Can you please help me in this.

fabricio.murta
Sep 25, 2017, 8:57 PM
Hello @ajaythakor! Welcome to Ext.NET forums!

I am afraid this is a feature not supported by Ext.NET v2 and there's not much we can help you with.

To begin with, the checkbox's checked status is a boolean, so it can only come server-side with either check or uncheck. To attain such a functionality at least client-side should be changed (and then you can pass the tri-state setting via the customConfig server-side property. But then there will be the need for the theme-specific .png figure for the "mid-state" checkbox and server logic to switch betweeen the three checkbox states.

I believe it would instead be possible if you used a cycle button (10th example here) (http://examples2.ext.net/#/Buttons/Basic/Overview/) or a dropdown/combo box in a dedicated compontent column (http://examples2.ext.net/#/GridPanel/ComponentColumn/Overview/).

I hope this helps!

ajaythakor
Sep 26, 2017, 3:36 PM
@fabricio.murta thanks for your quick response.

Sorry but the suggestion did not work for me, i am using a tree panel and checkbox is needed for the nodes.

Is there a way to make the checkbox in three state with css styles ?

If so, can you please share the sample code, it will be very helpfull.

fabricio.murta
Sep 26, 2017, 5:47 PM
Hello @ajaythakor!

There's no way out-of-the-box to support that. With CSS alone, you can't, because there is the code logic to switch from unchecked to checked, and additional code would be necessary to allow the third state.

If any starting point for that, that would be studying the extension from the Sencha forum thread you shared on your initial post.

I hope this helps!

ajaythakor
Sep 28, 2017, 10:26 AM
I will try to find out some way, if i get a solution i will post it here.

Thanks a lot for your support.