Find Row Index of radgrid on client side

18 posts, 2 answers
  1. Lokesh
    Lokesh avatar
    89 posts
    Member since:
    Jul 2012

    Posted 17 Oct 2012 Link to this post

    Hi Team,
    I have a radgrid with some bound columns. In one of the bound columns, I have DataFormatString property set to call a javascript function. The same bound column shows numeric values.
    I did this because I wanted to open a popup on click of the numeric values.
    Now I want to find the row index of the radgrid so that I can use 
    MasterTable.getCellByColumnUniqueName(MasterTable.get_dataItems()[0], "ChartOfAccountSetDetailDescription").innerHTML

    Here, in MasterTable.get_dataItems()[0], I always get the values in the first row because of the [0] ,
    which is the rowindex.

    So, I want to find out the row index of the current cell.

    Here is my aspx :
    <telerik:RadGrid ID="rgProjectBudget" OnNeedDataSource="rgProjectBudget_NeedDataSource"  runat="server" AutoGenerateColumns="False" AllowSorting="True" ShowFooter="true">
           <MasterTableView>
                <Columns>                                                 
                         <telerik:GridBoundColumn DataField="ChartOfAccountSetDetailValueCode" DataType="System.String" HeaderText="Project Heads"  AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" UniqueName="ChartOfAccountSetDetailValueCode">                                                       
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn UniqueName="COARequisitionAmount" HeaderText="Commited" DataField="COARequisitionAmount" FooterText="Commited: " FooterAggregateFormatString=" {0:N}" FooterStyle-Font-Bold="true" CurrentFilterFunction="Contains"   DataFormatString="<a href='javascript:MyFunction()'>{0:N}</a>" AutoPostBackOnFilter="true" Aggregate="Sum">                                                       
                         </telerik:GridBoundColumn>
                    </Columns>
           </MasterTableView>
    </telerik:RadGrid>
     
    <script>
    function MyFunction() {
    var grid = $find("<%=rgProjectBudget.ClientID %>");
    var MasterTable = grid.get_masterTableView();
    var contactName = MasterTable.getCellByColumnUniqueName(MasterTable.get_dataItems()[0], "ChartOfAccountSetDetailValueCode").innerHTML;
    }
    </script>


    And, I am not using RowSelected client side event

    Any help appreciated,
    Thanks,
    Lok..
  2. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 17 Oct 2012 Link to this post

    Hello,

    var grid = $find("<%= RadGrid1.ClientID %>");
                   if (grid) {
                       debugger;
                       var MasterTable = grid.get_masterTableView();
                       var Rows = MasterTable.get_dataItems();
                       for (var i = 0; i < Rows.length; i++) {
                           var row = Rows[i];
                           var contactName = row.get_cell("ChartOfAccountSetDetailDescription").innerHTML;
                            
                       }
                   }


    Thanks,
    Jayesh Goyani
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Lokesh
    Lokesh avatar
    89 posts
    Member since:
    Jul 2012

    Posted 18 Oct 2012 Link to this post

    Hi Jayesh,
    Thanks for your reply..
    You solved my problem to some extent.
    I want to find find the row index of the current row.
    Your solution gives me the entire row collection.
    How can I get the particular row?

    Please see the attached image.

    Thanks again for your reply.
    Waiting for the answer.
    Lok..
  5. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 18 Oct 2012 Link to this post

    Hello,

    Access row index by using below code.
    row.get_itemIndexHierarchical();
    row._element.sectionRowIndex;

    OR
    // i have used 0 as Index
    grid.get_masterTableView().get_dataItems()[0].get_cell("YourColumnUniqueName").innerHTML;



    Thanks,
    Jayesh Goyani
  6. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 18 Oct 2012 Link to this post

    Hi,

    One suggestion is that you can pass the index from code behind as shown below.
    C#:
    protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)
    {
     if (e.Item is GridDataItem)
     
       foreach (GridColumn col in RadGrid1.MasterTableView.Columns)
       {
         GridDataItem dataItem = (GridDataItem)e.Item;
         dataItem["UniqueName"].Attributes.Add("onclick", "CellClick('" + dataItem.ItemIndex + "','" + col.UniqueName + "');");
       }
     }
    }
    JS:
    function CellClick(index)
    {
     alert(index);
    }

    Thanks,
    Shinu.
  7. Lokesh
    Lokesh avatar
    89 posts
    Member since:
    Jul 2012

    Posted 18 Oct 2012 Link to this post

    Hi Jayesh,
    Thanks for your quick reply.
    I still don't get the Current Row Index.
    Your current solution gives me the same result.

    See, If you run a for loop till Rows.Lenght, the values of the varibale " i ", are nothing but the row indices.
    All I want is a particular row, and not the entire collection.

     "  grid.get_masterTableView().get_dataItems()[0].get_cell("YourColumnUniqueName").innerHTML;  "

    always returns the 0th row of the grid.


    I hope you understand what I mean.

    Waiting for reply.
    Lok..
  8. Lokesh
    Lokesh avatar
    89 posts
    Member since:
    Jul 2012

    Posted 18 Oct 2012 Link to this post

    Thank you so much Shinu.. :) It worked.
    Thank you Jayesh for all your help.
  9. ALEXANDER
    ALEXANDER avatar
    3 posts
    Member since:
    Nov 2013

    Posted 17 Oct 2014 in reply to Jayesh Goyani Link to this post

    Hi, I have a desire problem get the value of Textbox for GridBoundColumn , from the client , when I am inserting a new record , I can not find it I tried several JavaScript functions but can not find the control , I sent you below some my code.


    For example, in Insert mode data Column " DescriptionDocument " has a value, I want to capture.

    <MasterTableView AutoGenerateColumns="false" ClientDataKeyNames="id_provision" CommandItemDisplay="Top">
                                                            <Columns>
                                                                <telerik:GridEditCommandColumn ButtonType="ImageButton">
                                                                </telerik:GridEditCommandColumn>
                                                                <telerik:GridTemplateColumn HeaderText="TipoDocumento" UniqueName="idTipoDocumento"
                                                                    DataField="idTipoDocumento">
                                                                    <ItemTemplate>
                                                                        <%#DataBinder.Eval(Container.DataItem, "idTipoDocumento")%>
                                                                    </ItemTemplate>
                                                                    <EditItemTemplate>
                                                                        <telerik:RadComboBox ID="cmbTipoDcto" runat="server" AutoPostBack="true" DropDownWidth="200px"
                                                                            Width="200px" Skin="Hay">
                                                                        </telerik:RadComboBox>
                                                                    </EditItemTemplate>
                                                                </telerik:GridTemplateColumn>
                                                                <telerik:GridBoundColumn UniqueName="DescripcionDocumento" HeaderText="DescripcionDocumento"
                                                                    DataField="DescripcionDocumento" MaxLength="50" >
                                                                </telerik:GridBoundColumn>  Thank you for what you can help me.

  10. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 22 Oct 2014 Link to this post

    Hi Alexander,

    Depending on the functionality you would like to implement you can use various approaches.

    If you would like to validate the input for the field you can add a Validator control explicitly for the DescripcionDocumento column. In order to do this you need to handle the ItemCreated event for RadGrid. The approach is illustrated in the following article:

    Alternatively, you could use the blur client-side event of the TextBox to get the entered value. In order to attach a blur handler you can use the following approach:

    Code-behind:

    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridEditableItem && e.Item.IsInEditMode )
        {
            GridEditableItem editFormItem = e.Item as GridEditableItem;
            TextBox textBox = editFormItem["Name"].Controls[0] as TextBox;
             
            textBox.Attributes.Add("onblur", "onBlur(this, event);");
        }
    }

    JavaScript:

    function onBlur(sender, args) {
        alert(sender.value);
    }

    On a side note, it is recommended to submit a separate thread for every unrelated query. This way we would be able to provide an answer quicker. Additionally, it will be easier for anyone with a similar issue to find a solution.

    Regards,
    Viktor Tachev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  11. ALEXANDER
    ALEXANDER avatar
    3 posts
    Member since:
    Nov 2013

    Posted 22 Oct 2014 in reply to Viktor Tachev Link to this post

    Viktor Thanks for the reply, My scenario is this : I have a RadGrid that Don't Has ItemTemplate to edit or insert new fields, 
    Just GridBoundColumn , what I want is to capture the value of the text boxes before inserting into the database those values.
    In the CodeBehind add the javascript function to lanze confirmation window , in this window I wish to present the captured values.

    protected void grvProvisionDctos_ItemCreated(object sender, GridItemEventArgs e)
    {
    if (e.Item is GridEditableItem && e.Item.IsInEditMode)
    {
                if (!e.Item.OwnerTableView.IsItemInserted)
                {
                    ImageButton updateButton = (ImageButton)e.Item.FindControl("UpdateButton");
                    updateButton.Attributes["href"] = "javascript:void(0);";
                    updateButton.Attributes["onclick"] = String.Format("return ConfirmUpdateProvision('{0}','{1}');", e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["NumeroInicial"], e.Item.ItemIndex);
                   
                }
                else
                {
                    ImageButton insertButton = (ImageButton)e.Item.FindControl("PerformInsertButton");
                    insertButton.Attributes["onclick"] = String.Format("return ConfirmUpdateProvision('{0}','{1}');", e.Item.OwnerTableView.DataKeyValues[0]["NumeroInicial"], 0); //Alone is Zero.
                }
    }

    }


    //The problem I have is not how to find the text box that has the data I want to insert. This is my JavaScript function .

    function ConfirmUpdateProvision(id, rowIndex) {
                    var confirm_value = document.getElementById("ctl00_MainContent_hdnConfirmValue");
                    confirm_value.value = "";
                    var grid = $find("<%=grvProvisionDctos.ClientID %>");
                    if (grid) {
     var MasterTable = grid.get_masterTableView();
     var Rows = MasterTable.get_dataItems();
     var EditItems = grid.get_editItems();
                        
                        var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
                        grid.get_masterTableView().selectItem(rowControl, true);
    \
                        if (confirm("El rango a Insertar es:" + id + ".")) {
                            confirm_value.value = "Yes";
                        } else {
                            confirm_value.value = "No";
                        }
                        //document.forms[0].appendChild(confirm_value);
                    }
                }

    thanks for your help
  12. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 27 Oct 2014 Link to this post

    Hi Alexander,

    For your convenience I have prepared a sample project where the functionality is implemented. I am attaching it to this post.

    Try using similar approach and you should be able to implement the functionality you are looking for.

    Regards,
    Viktor Tachev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  13. Hari
    Hari avatar
    2 posts
    Member since:
    Feb 2015

    Posted 31 Mar 2015 in reply to Lokesh Link to this post

    Hi Lokesh,

    Can you please let me know how could you find the selected (or) current row index of the column.

    I ma using also having the same requirement and get all the list of item when looping the items.
    I am using below code:

    var t_tblLinks = Gett_tblLinkTableGridClientID();
    var masterTable = $find(t_tblLinks).get_masterTableView();
    var count = masterTable.get_dataItems().length;
    var Rows = masterTable.get_dataItems();
    for (var i = 0; i < Rows.length; i++) {
    var row = Rows[i];
    var contactName = row.get_cell("Link").innerHTML;
    alert(contactName);
    }

    can you please let me know how did you find the current row index.

    .aspx page rad column
    <telerik:GridBoundColumn UniqueName="Link" HeaderText="Link" DataField="Link"
    DataFormatString="<a href='javascript:MyFunction()' >{0:N}</a>" >
    </telerik:GridBoundColumn>
  14. Hari
    Hari avatar
    2 posts
    Member since:
    Feb 2015

    Posted 31 Mar 2015 in reply to Jayesh Goyani Link to this post

    Hi Jayesh,

    I am having a column in rad grid name Links. I need to open thee links column in a new tab when the user clicks on the links section.
    I have tryed to use GridHyperLinkColumn , GridBoundColumn and GridTemplateColumn. I am able to bind the links to rad grid but i am not able to open the links in new window. I need to do this entirely on client side that is in javascript. can you please help he out in resolving this.

    I have attached the files and screen shot for your furthere reference.


  15. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 31 Mar 2015 Link to this post

    Hi Hari,

    In order to retrieve the index of an item client-side you can use the get_itemIndex() property of a GridDataItem.

    function getItemIndex() {
        var grid = $find("<%=RadGrid1.ClientID %>");
        var masterTableView = grid.get_masterTableView();
        var dataItems = masterTableView.get_dataItems();
         
        alert(dataItems[0].get_itemIndex());
    }

    Regarding you other query. If you would like to open the links from a GridTemplateColumn in a new tab you need to set the Target property of GridHyperLinkColumn to _blank.

    <telerik:GridHyperLinkColumn NavigateUrl="http://google.com" Text="google" Target="_blank"></telerik:GridHyperLinkColumn>


    However, have in mind that the behavior for opening a new tab can be overridden by the browser settings.


    Regards,
    Viktor Tachev
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  16. Abitar
    Abitar avatar
    22 posts
    Member since:
    May 2015

    Posted 26 Aug 2015 in reply to Shinu Link to this post

    Hello,

    Passing the row index as parameter for the javascript function on itemDataBound worked for me. But I am using a RadGrid with Batch Edit Mode, so when I call the OnItemDataBound I loose unsaved data in the RadGrid. Is there any other way to retreive the row index without causing a RadGrid rebind ?

  17. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 28 Aug 2015 Link to this post

    Hello Abitar,

    The approach suggested in my last post is using only client-side logic to retrieve the index of an item.

    With that said, as you know when Batch Editing is enabled all operations are done initially on the client. If there is a postback before the modifications are saved all changes will be lost.

    Would you describe in more detail on what functionality you would like to implement? What are you using the ItemDataBound event for?

    Regards,
    Viktor Tachev
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
  18. Abitar
    Abitar avatar
    22 posts
    Member since:
    May 2015

    Posted 28 Aug 2015 in reply to Viktor Tachev Link to this post

    Hello Viktor,

    The approach using get_itemindex() worked for me without server postback.

    Thank You for your help :) 

    Abitar

  19. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1488 posts

    Posted 01 Sep 2015 Link to this post

    Hi Abitar,

    I am glad that the suggestion was working for you. Thank you for sharing the information with the community. This can be helpful to someone facing similar behavior.

    Regards,
    Viktor Tachev
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017