CODEWITHSUNDEEP
javascriptjqueryasp.nettelerik
Aless Hosry
Aless Hosry

Reputation: 1189

Get value of selected row in telerik grid from client side

I am trying to get the value of GridBoundColumn which DataField="id" using javascript in client side. Whenever the user clicks on the image button of the row, I should retrieve the id of this row and call a web method passing this id... I have tried this script block in the same aspx page: 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
      function test(object) {
         try {
           var master = $find('<%= RadGrid1.ClientID %>').get_masterTableView(); 
           var selectedItems= master.get_selectedItems()[0].getDataKeyValue("id"); 
           alert(selectedItems);
         } catch (err) {alert(err);}
      }
    </script>
</telerik:RadCodeBlock>

But an error is thrown: cannot read property getDataKeyValue of undefined... I found that length of selected items is 0 :

var selectedItems= master.get_selectedItems().length;  // selectedItems = 0

What is missed here? how can I get the id value? below is my telerik grid code:

    <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AllowPaging="True" AutoGenerateColumns="False" Width="100%" ShowFooter="true" ItemStyle-Wrap="false" FooterStyle-Wrap="false" FooterStyle-Width="100px" PagerStyle-Wrap="false" EnableEmbeddedSkins="false"                        GridLines="None" EnableViewState="false">
     <HeaderContextMenu EnableEmbeddedSkins="False"></HeaderContextMenu>
     <FooterStyle Wrap="False"></FooterStyle>
     <ItemStyle Wrap="False"></ItemStyle>
     <PagerStyle Visible="true" PagerTextFormat="Change page: {4}    <b>{5}</b> items in <b>{1}</b> pages" />

     <MasterTableView DataKeyNames="id" ClientDataKeyNames="id"  PageSize="15" TableLayout="Fixed">

       <NoRecordsTemplate>
         <div> No records to display.</div>
       </NoRecordsTemplate>

       <Columns>
         <telerik:GridBoundColumn DataField="id" ReadOnly="True" UniqueName="id"
                                        Visible="false">
         </telerik:GridBoundColumn>
         <telerik:GridTemplateColumn UniqueName="TemplateColumn" ItemStyle-Width="35px" HeaderStyle-Width="35px">
           <ItemTemplate>
             <asp:ImageButton ID="imgUpload" runat="server" CausesValidation="False" ClientIDMode="Static" data-id='<%# Eval("id") %>' ImageUrl="~/Images/Misc/File-Upload-icon.png"  OnClientClick="test(this);" TabIndex="-1" ToolTip="Upload" />
           </ItemTemplate>                                    
           <HeaderStyle Width="35px"></HeaderStyle>
           <ItemStyle Width="35px"></ItemStyle>
         </telerik:GridTemplateColumn>
      </Columns>

   </MasterTableView>
   <ClientSettings>
   </ClientSettings>
   <FilterMenu EnableEmbeddedSkins="False" EnableEmbeddedBaseStylesheet="False">
   </FilterMenu>
   <SortingSettings EnableSkinSortStyles="False" />
 </telerik:RadGrid>

Edit:

I have tried also this solution:

var imgUpload = document.getElementById("imgUpload");
var imgUpload_ID = imgUpload.getAttribute('data-id');
alert(imgUpload_ID);

var Clicked_rowIndex = object.parentNode.parentNode.rowIndex;
alert(Clicked_rowIndex);

Concerning the Clicked_rowIndex: each click is returning the correct rowindex (1,2,3 ....) But for all rows it is displaying the same id (id of the first row); How can I make a combination between Clicked_rowIndex and imgUpload_ID to get the id of the selected row_index?

Upvotes: 0

Views: 7885

Answers (2)

Sen Alexandru
Sen Alexandru

Reputation: 2263

var id = $find("<%= RadGrid1.ClientID %>").get_masterTableView().get_selectedItems()[0].getDataKeyValue("Id");

Upvotes: 0

Aless Hosry
Aless Hosry

Reputation: 1189

Ok finally I found it:

 var Rows = $find('<%= RadGrid1.ClientID %>').get_masterTableView().get_dataItems();
 var Clicked_rowIndex = object.parentNode.parentNode.rowIndex;
 var row = Rows[Clicked_rowIndex-1];
 id = row.getDataKeyValue("id");
 alert(id);

Upvotes: 2

Related Questions