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.
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.
Hi Michael,
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.
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 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
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.
thanks for the example it works very well.
Now I've the following issue: when loading the tree I need to fill it with the checkbox state that I read from the datasource. This operation is server side for me. How can I change the checkbox icon in this case?
Thank you in advance.
I am following up to see if the information and sample provided has resolved this matter.
Please let me know if I may be of further assistance with this matter.
Sincerely,
Mike P.
Developer Support Engineer
Infragistics, Inc.
www.infragistics.com
Hi Mike,
thank you very much for the example.
Currently, my issues regarding webdatatree and changing checkbox images are solved.
Many thanks.
Thank you for your patience. I have modified the sample to demonstrate this behavior. In the client side Initialize event I loop though the nodes and check the state if they and set the image. At the top of the event I have some test code to demonstrate this on the first node.
Please let me know if you have any questions concerning this matter.
Thank you for the update. In theory this can be achieved by handling the client side Initialize event which should occur after that data has been loaded and the state of the checkboxes have been set. After this you would loop through you nodes checking the value and if they are set to the state you want change the image. I am working on a sample to demonstrate this behavior. I will continue to look into this matter and give you a progress update by the end of the day tomorrow.