Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Patric
1840
Complex structure in a tree node
posted

Hello,

i use VS 2010, .Net 4.0 and NetAdvantage 10.2 with a WebDataTree. I want to add a jquery mobile slider to some 'checkbox' tree node (it is a map-application where the user can select some tile layer by check the node, the slider is for the transparency of each layer).

I try to use templates, but get some error from the microsoft ajax js framework (strange). Is it possible to add such element to some tree nodes? What is the best way to do this?

Btw, the tree is static; i set the structure and all behavior in the aspx code.

 

Thanks for help

Patric

Parents
No Data
Reply
  • 8736
    posted

    Hello,

    You can set the template for tree node based on your requirements as shown  below:

    <ig:WebDataTree ID="WebDataTree1" runat="server" Height="322px" Width="600px"> <Nodes> <ig:DataTreeNode TemplateId="Template1"> <Nodes> <ig:DataTreeNode Text="ChildNode0" Value="1"> </ig:DataTreeNode> </Nodes> </ig:DataTreeNode> </Nodes> <Templates> <ig:ItemTemplate ID="WebDataTree1Template1" runat="server" TemplateID="Template1"> <Template> <table id="grid1"></table> </Template> </ig:ItemTemplate> </Templates> </ig:WebDataTree>

    I have used on jQuery iggrid to show as a node template as show below:

    $.ig.loader(function () { var products = []; products[0] = { "ProductID": "1", "Name": "Adjustable Race", "ProductNumber": 0 }; products[1] = { "ProductID": "2", "Name": "Bearing Ball", "ProductNumber": 1 }; products[2] = { "ProductID": "3", "Name": "BB Ball Bearing", "ProductNumber": "" }; products[3] = { "ProductID": "4", "Name": "Headset Ball Bearings", "ProductNumber": 2 }; products[4] = { "ProductID": "316", "Name": "Blade", "ProductNumber": "" }; $("#grid1").igGrid({ autoGenrateColumns: false, columns: [ { headerText: "Product ID", key: "ProductID", dataType: "number" }, { headerText: "Product Name", key: "Name", dataType: "string" }, { headerText: "Product Number", key: "ProductNumber", dataType: "number"}, ], width: '500px', dataSource: products, features:[{name: "Sorting"}] }); });

    I am not certain what type of slider control you are using in your application.

    Run the sample and test. This sample is created as a website. It will show grid as a node template. You can use other controls based on your requirements.

    I hope this helps.

    WebDataTree_Template.zip
Children