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.

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

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,

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.