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
Hi Patric,
In a SR of 11.2 I believe, the web slider got touch support for the iPad. So 12.1 RTM will definitely have this.
regards,
David Young
Hello David,
i used the jQuery Mobile Slider because the page is for Mobile Devices and i think the WebSlider of Version 10.2 is not touch enabled. Is there the same problem with Version 12.1 ?
Thanks
I am just following up to see if you need any further assistance regarding the sample I have provided.
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.
I have tried this out and have gotten the same error. It seems that jQuery Mobile (not the core) causes some conflict/problem in the ajax extensions. This is on top of the fact that the input that is 'hidden' that is used for keyboard navigation of the tree is actually enhanced by jQuery Mobile. Is there a reason that you cannot use the WebSlider to do this in your template?
regards,David Young