Clientside item select

[sitefinitysteve]

How can I select an item clientside?

I want to use it as a callback from a RadWindow, so Id like to click an item and have my button become active...now I can do the second part myself... :)

Any ideas?

[Rosen]

Hi Steve,

RadListView does not support pure client-side selection, however you may use selectItem client-side  method passing the index of the item which should be selected. Similar to the following:

$find("<%=RadListView1.ClientID %>").selectItem(0);

This will trigger a postback and select the first DataItem.

Greetings,
Rosen
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Bhavya]

hi Rosen,

Good day!

i have created list view in the client side. binded data from client side. 

and i surprised that selection is not happening in my case i dont no, what wrong i have done.

please help me from this.

i am attaching my code in this.

Thanks in advance.

<telerik:RadPane runat="server" ID="pane_AcessGrant" Height="300px" Width="100%" BackColor="#C9DCF2">
                        <asp:UpdatePanel runat="server" ID="Updatepanel" UpdateMode="Conditional">
                            <ContentTemplate>
                                <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" AllowPaging="true" AllowCustomSorting="true" ItemPlaceholderID="itemPlaceHolder">
                                    <ClientSettings>                                       
                                        <DataBinding ItemPlaceHolderID="itemPlaceHolder">                                           
                                            <LayoutTemplate>                                                 
                                                <div  id="scroller" class="RadListView RadListView_#= owner.Skin #" style="width:130%">
                                                    <table cellspacing="0">
                                                        <colgroup>
                                                            <col style="width:130px">
                                                            <col>
                                                            <col style="width:130px">
                                                            <col style="width:130px">
                                                        </colgroup>
                                                        <thead>                                                           
                                                            <tr style="background-color:lavender;border:1pt solid DarkBlue">
                                                                <th data-field="SLN_Grant_Logs">SLN_Grant_Logs</th>
                                                                <th data-field="UID">UID</th>
                                                                <th data-field="CardNumber">CardNumber</th>
                                                                <th data-field="EmployeeCode">EmployeeCode</th>
                                                                <th data-field="EmpName">EmpName</th>
                                                                <th data-field="Reader_Name">Reader_Name</th>
                                                                <th data-field="Entry_OR_Exit">Entry_OR_Exit</th>
                                                                <th data-field="Msg_Date">Msg_Date</th>
                                                                <th data-field="Msg_Time">Msg_Time</th>                                                                
                                                            </tr>                                                               
                                                        </thead>                                                        
                                                        <tbody id="itemPlaceHolder">                                                           
                                                        </tbody>                                                         
                                                        <tfoot>
                                                            <tr>
                                                                <td id="pagerContainer" colspan="4">
                                                                </td>
                                                            </tr>
                                                        </tfoot>
                                                    </table>
                                                </div>
                                            </LayoutTemplate>                                           
                                            <ItemTemplate>                                                                                                                                                                                                   
                                                <tr class="border_bottom">
                                                     <td>#= SLN_Grant_Logs #</td>                                                                                                             
                                                     <td>#= UID #</td>
                                                     <td>#= CardNumber #</td>
                                                     <td>#= EmployeeCode #</td>
                                                     <td>#= EmpName #</td>
                                                     <td>#= Reader_Name #</td>
                                                     <td>#= Entry_OR_Exit #</td>
                                                     <td>#= Msg_Date #</td>
                                                     <td>#= Msg_Time #</td>                                                                             
                                                </tr>                                                                               
                                            </ItemTemplate>                                                                                       
                                        </DataBinding>
                                    </ClientSettings>
                                </telerik:RadListView>
                            </ContentTemplate>
                        </asp:UpdatePanel>                         
                    </telerik:RadPane>

[Eyup]

Hi Manu,

You will need to define the SelectedItemTemplate:
http://demos.telerik.com/aspnet-ajax/listview/examples/selecting/defaultcs.aspx

I'm also sending a sample RadListView web site with implemented selection.

Regards,
Eyup
Telerik

[Bhavya]

hi Eyup,

Good day!

i have little modified the code what i have sent. before i have given click event for span which is in td so i am able to do click event.

but now i am stuck with some problem that i am trying to flip the div as shown in this link

"http://demos.telerik.com/aspnet-ajax/listview/examples/client/webservicedatabinding/defaultcs.aspx"

here i want to append data based on timer so i am using ajax to bind. 

but click is not working for me. Can you please let me know what wrong i am doing. 

<telerik:RadListView ID="RadListView_accessGrant" runat="server" RenderMode="Lightweight" ClientDataKeyNames="SLNO" DataKeyNames="SLNO">                                        
                                        <ClientSettings>                                                                                        
                                            <DataBinding ItemPlaceHolderID="itemPlaceHolder">  
                                                <LayoutTemplate>                                                 
                                                <div  id="scroller" class="RadListView RadListView_#= owner.Skin #">
                                                    
                                                      <div id="itemPlaceHolder" Width="450px">
                                                        </div>                                        
                                                </div>
                                                </LayoutTemplate>
                                                <ItemTemplate>   
                                                    <div class="item" id="Div_ListViewItems" value="SLNO">  
                                                        <div id="div_minInfo" class="visible">                                                    
                                                       <div id="detailsLeft">
                                                            <img id="img_empPhoto" runat="server" src="../Handler.ashx?id=#=EmpID#" alt="#=EmpID#" style="height: 50px; width: 70px; margin: 4px" />
                                                        </div>
                                                        <div id="detailsCenter">
                                                            <telerik:RadLabel runat="server" ID="lbl_slNumb" CssClass="floatLeft pointer" onclick="selectRow(this)">#= SLNO #</telerik:RadLabel>
                                                            <br />
                                                            <telerik:RadLabel runat="server" ID="lbl_BehalfOf" CssClass="floatLeft">#= EmpID #</telerik:RadLabel>
                                                            <br />
                                                            <telerik:RadLabel runat="server" ID="lbl_employeCode" CssClass="floatLeft">#= DOOR #</telerik:RadLabel>
                                                            <br />                  
                                                                <telerik:RadLabel runat="server" ID="lbl_Role" CssClass="floatLeft">#= UID #</telerik:RadLabel>
                                                            <br />                
                                                        </div>  
                                                       </div>  
                                                                                          
                                                        </div>                                                                                                                       
                                                </ItemTemplate>
                                               <SelectedItemTemplate>
                                                    <div class="item selected">
                                                        <table class="details">
                                                            <tr>
                                                                <th>EmpID:</th>
                                                                <td><div class="addr">#= EmpID #</div></td>
                                                            </tr>
                                                            <tr>
                                                                <th>EmpID:</th>
                                                                <td>#= EmpID #</td>
                                                            </tr>
                                                            <tr>
                                                                <th>EmpID:</th>
                                                                <td>#= EmpID #</td>
                                                            </tr>                                                            
                                                        </table>
                                                    </div>
                                            </SelectedItemTemplate>
                                                <EmptyDataTemplate>
                                                <div class="empty">
                                                    No Matching Data
                                                </div>
                                                </EmptyDataTemplate>                                    
                                            </DataBinding>
                                        </ClientSettings>
                                    </telerik:RadListView>

[Kostadin]

Hi Manu,

I would recommend you to examine the following live example which demonstrates how to append data on the client. I believe this is the solution that you are looking for.

Regards,
Kostadin
Telerik by Progress