Hi all,
I'd like to use the tristate checkbox in a webdatatree but, unlike the default behavior, I've need that the partial state will be explicitly choosen by the user, for example with three click on the check box (one click for selecting, two click for unselecting, the third for making the checkbox partially checked).
Is this possible? If yes any hints?
Thanks in advance.
Hi Costanzo,
Our use of the checkboxes aren't controlled by any CSS for the WebDataTree, so I came up with a solution by editing the html tags for the nodes' check images. You may revert the old checkboxes to keep your style for the grids and keep your custom WDT checkboxes elsewhere.
I recommend adding the following code to the WebDataTree1_NodeChecking event handler. Please be sure to add this code below the node.set_checkState((curCheck + 1) % 3); call to ensure its accuracy. You may change the directory and file names from what I choose to fit your file structure.
// Override the check image that is used.var elem = node.get_element();var img = elem.children[1];
// Set the new images.if (node.get_checkState() == 1) { // Checked img.src = "CustomStyle/my_checkbox_on.gif";} else if (node.get_checkState() == 2) { // Partial img.src = "CustomStyle/my_checkbox_partial.gif";} else { // Unchecked img.src = "CustomStyle/my_checkbox_off.gif";}
If you have any further questions, please let me know.
Hi Michael,
thank you for the code sample, it works and fits my use case.
Now I've the issue to change the checkbox icons. I've tried to save the new images in my theme folder and it works fine for the web data tree, but this affect the images displayed in the webdatagrid defined as follow:
<ig:WebDataGrid ID="groups" runat="server" Height="250px" Width="100%" OnInitializeRow="groups_InitializeRow" AutoGenerateColumns="False" OnRowUpdated="groups_RowUpdated" DataKeyFields="Groups"> <Columns> <ig:BoundCheckBoxField Key="Check" DataFieldName="sel" Header-TemplateId="HeaderTemplateSelectAll" Width="25px" > <Header TemplateId="HeaderTemplateSelectAll" /> </ig:BoundCheckBoxField> <ig:BoundDataField DataFieldName="Groups" Key="Groups" Header-Text="Groups" > <Header Text="Groups" /> </ig:BoundDataField> </Columns> <Templates> <ig:ItemTemplate ID="WebDataGridTemplate1" runat="server" TemplateID="HeaderTemplateSelectAll"> <Template> <asp:CheckBox ID="SelectAll" ToolTip="Select/Toggle All" runat="server" onclick="checkedChangedHandler();" /> </Template> </ig:ItemTemplate> </Templates></ig:WebDataGrid>
The check box in the header is the html default one, but in each rows of the grid it is the ones that I've substitute in the theme folder. Is there a way to set the checkbox images via css for the webdatatree or alternatively for the webdatagrid?
Thank you
Hello Costanzo,
Thank you for the update. I was able to use the following script in the NodeChecking handler to allow cycling through the checked states for each node.
Here is the markup for the tree I am using:<ig:WebDataTree ID="WebDataTree1" runat="server" Height="300px" Width="200px" CheckBoxMode="TriState" DataSourceID="XmlDataSource1"> <ClientEvents NodeChecking="WebDataTree1_NodeChecking" /></ig:WebDataTree>
And using the following function for the handler:
function WebDataTree1_NodeChecking(sender, eventArgs){ ///<summary> /// ///</summary> ///<param name="sender" type="Infragistics.Web.UI.WebDataTree"></param> ///<param name="eventArgs" type="Infragistics.Web.UI.DataTreeNodeEventArgs"></param>
var node = eventArgs.getNode();
// Set the checked state. var curCheck = node.get_checkState(); node.set_checkState((curCheck + 1) % 3);
// Cancel the event so it does not evaluate with your alteration. eventArgs.set_cancel(true);}
This will cycle from (Unchecked > Checked > Partial > Unchecked...).
You can change the images for the checkbox from our styles folder /ig_res/. You would want to change the following images:
ig_res/Default/images/ig_checkbox_off.gifig_res/Default/images/ig_checkbox_on.gifig_res/Default/images/ig_checkbox_partial.gif
You can retrieve the state of the checkboxes on server side as long as you stick to using our API calls on client side as I've posted above. I demonstrate how to retrieve the states below in C#.
private void RecursiveCountNodes(DataTreeNodeCollection nodes){ foreach (DataTreeNode node in nodes) { // Get the state of each node. if (node.CheckState == Infragistics.Web.UI.CheckBoxState.Unchecked) ++numUnchecked; if (node.CheckState == Infragistics.Web.UI.CheckBoxState.Checked) ++numChecked; if (node.CheckState == Infragistics.Web.UI.CheckBoxState.Partial) ++numPartChecked;
// Increase the total node count. ++totalNodes;
// Check the children nodes for their state. if (node.Nodes.Count > 0) RecursiveCountNodes(node.Nodes); }}*When first calling this method, you would use: RecursiveCountNodes(WebDataTree1.Nodes);
For more information, please see the following documentation on our WebDataTree APIs:http://help.infragistics.com/NetAdvantage/ASPNET/2012.1/CLR4.0/?page=WebDataTree~Infragistics.Web.UI_namespace.htmlhttp://help.infragistics.com/NetAdvantage/ASPNET/2012.1/CLR4.0/?page=WebDataTree_API_Overview.htmlhttp://help.infragistics.com/NetAdvantage/ASPNET/2012.1/CLR4.0/?page=Infragistics4.Web.v12.1~Infragistics.Web.UI.NavigationControls.DataTreeNode~CheckState.html
Please let me know if you need further assistance and I will be glad to help you.
Thank you for your quick reply.
For answering your question: yes, I'm looking to allow the user to choose between all three states for every node in the tree.
For my purposes this should also be accomplish changing the icon associated with the node. Is it possible on the client side click event changing the image url of the node? If yes I could rotate three different images (logically associated to tristate). The last question is: if I can easily realize this image changing on user click, do I have server side the image state information when I need to save the tree information on my backend?
Thank you.
Dear Costanzo,
Thank you for contacting Infragistics!
We have received your support request concerning TriState Checkboxes with custom actions, and this case has been assigned to me. Infragistics is dedicated to helping you solve this issue. Our team and I have done an initial review of your case and my first question is are you looking to allow your users to choose between all three states for every node in the tree rather than just for parent nodes?
I am looking into how to allow the user to choose all three states explicitly and will get back to you by sometime tomorrow with more information or questions for you.
Looking forward to hearing from you.