C1ViewScrollerItems bound to C1NavigationListItems using jQuery

In the last blog I discussed how to access Componentone iPhone controls through jQuery. To discuss more about this issue, I want to take up adding C1ViewScrollerItems corresponding to the "ListItems" in C1NavigationList at client side. To dynamically add C1ViewScrollerItem at client side, we need to find "ListItems" present inside C1NavigationList so that corresponding items for C1ViewScroller can be added. As mentioned in my previous blog this can be easily achieved using jQuery if one understands how controls are being rendered in the browser. Let's start implementing by finding how many ListItems C1NavigationList contains; i.e. how many* tags are present in C1NavigationList. After finding how many tags are there we will have to look for their "id" attribute which can be passed as value to "ScrollToId" property of "C1ScrollViewerItems" to be added, which will bind ListItems to ViewScoller Items. To add C1ViewScrollerItems, we will simply append 'C1ScrollerItem' class to 'C1ScrollerItemsContainer' , setting it to "ScrollToId" and "Text" property. Below is the complete code for the same :

$(document).ready(function () { var count = 1; // finds all

• tags inside C1ViewPort1_CntPnl_C1NavigationList1_LevelContainer_r and loops through it var listItems = $("#C1ViewPort1_CntPnl_C1NavigationList1_LevelContainer_r li").each(function () { var id = ($(this).attr("id")); //finds the "id" attribute of listItems var text = "L" count; count ; addScrollerItemByID(text, id); //method call to add C1ScrollerItems }); function addScrollerItemByID(text, scrollId) { //Code line below appends "C1ScrollerItemsContainer" adding "C1ScrollerItem" class setting its "scrollId" property to "id" of //C1NavigationListItem. It also sets text for added C1ScrollItem by setting value for div tag with "C1TextNode" class. $("div.C1ScrollerItemsContainer").append("

" text "

"); } }); To have clearer understanding, please run the attached sample. -C1NavigationList_PhoneBookSearch One will see C1NavigationList rendered on the page with 4 ListItems added inside it. Now right click and select "View Source" to see how the controls are getting rendered. While scrolling down the code, it will be seen that "C1NavigationList" gets rendered with class "C1NavigationList_IPhone C1NavigationList C1NavigationList_IPhone-SimpleList". It contains 4 tags.

• When dealing with tags, we will have to dig down to the level of "ListItems" and find "id" attribute which can then be assigned to "ScrollToId" Property.

For this purpose we will have to iterate over tags using $.each function() of jQuery. The $.each() function can be used to iterate over any collection, whether it is a map (JavaScript object) or an array. In the case of an array, the callback is passed an array index and a corresponding array value each time. While iterating "id" of "ListItems" will be extracted by using the "attr" method, the .attr() method gets the attribute value for the first element in the matched set. The value of "id" attribute will then be assigned to "ScrollToId" property of C1ViewScrollerItems. Here is the code which will help in attaining what we just talked about: var listItems = $("#C1ViewPort1_CntPnl_C1NavigationList1_LevelContainer_r li").each(function () { // finds all* tags inside C1ViewPort1_CntPnl_C1NavigationList1_LevelContainer_r and loops through it var id = ($(this).attr("id")); //finds the "id" attribute of listItems } This "id" property will then be assigned to "ScrollToId" property of C1ViewScrollItems. For every ListItem in C1NavigationList we have a single C1ScrollerItem in correspondence. We will have to add "C1ViewScrollertem" in C1ViewScroller. This is how C1ViewScrollItem gets rendered inside under a tag with class "C1ScrollerItemsContainer", which, in turn, is rendered inside a tag applied with class "C1ViewScroller C1ViewScroller_IPhone".

A

Therefore, to add C1ViewScrollItem using jQuery, we will add this code: $("div.C1ScrollerItemsContainer").append("

" text "

"); This appends the parent div tag of C1ViewScroller control with C1ScrollItems. Value of "scrollId" is obtained by extracting "id" of "ListItem" . It corresponds to as menioned earlier in this blog. Now if we have a look at our website, we will see 4 ViewScrollerItems corresponding to 4 ListItems inside C1NavigationList. Clicking any of the C1ViewScrollerItem will jump to the "ListItem" it refers to. For example, if the user clicks "L4" it jumps to "ListIemo4". Thus, with this we achieve adding C1ViewScrollerItems bound to C1NavigationListItems at client side using jQuery.