This is a migrated thread and some comments may be shown as answers.
Find Row Index of radgrid on client side
18 Answers 903 Views
This is a migrated thread and some comments may be shown as answers.
Lokesh
Top achievements
Rank 1
Lokesh asked on 17 Oct 2012, 01:08 PM
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..

18 Answers, 1 is accepted

Sort by
0
Accepted
Jayesh Goyani
Top achievements
Rank 2
answered on 17 Oct 2012, 01:53 PM
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
0
Lokesh
Top achievements
Rank 1
answered on 18 Oct 2012, 05:13 AM
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..
0
Jayesh Goyani
Top achievements
Rank 2
answered on 18 Oct 2012, 06:21 AM
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
0
Accepted
Shinu
Top achievements
Rank 1
answered on 18 Oct 2012, 06:28 AM
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.
0
Lokesh
Top achievements
Rank 1
answered on 18 Oct 2012, 06:34 AM
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..
0
Lokesh
Top achievements
Rank 1
answered on 18 Oct 2012, 07:14 AM
Thank you so much Shinu.. :) It worked.
Thank you Jayesh for all your help.
0
Alexander
Top achievements
Rank 1
answered on 17 Oct 2014, 03:16 PM
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.

0
Viktor Tachev
Telerik team
answered on 22 Oct 2014, 08:16 AM
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.

 
0
Alexander
Top achievements
Rank 1
answered on 22 Oct 2014, 08:19 PM
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
0
Viktor Tachev
Telerik team
answered on 27 Oct 2014, 01:48 PM
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.

 
0
Hari
Top achievements
Rank 1
answered on 31 Mar 2015, 06:50 AM
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>
0
Hari
Top achievements
Rank 1
answered on 31 Mar 2015, 07:04 AM
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.


0
Viktor Tachev
Telerik team
answered on 31 Mar 2015, 01:24 PM
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.

 
0
Abitar
Top achievements
Rank 1
answered on 26 Aug 2015, 08:30 AM

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 ?

0
Viktor Tachev
Telerik team
answered on 28 Aug 2015, 11:52 AM
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
0
Abitar
Top achievements
Rank 1
answered on 28 Aug 2015, 12:19 PM

Hello Viktor,

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

Thank You for your help :) 

Abitar

0
Viktor Tachev
Telerik team
answered on 01 Sep 2015, 02:47 PM
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
Hi ,
Not able to get RowIndex for Client Events, Here is my below code.
Code:
function RowMouseOut(rowIndex) {
this.Rows[rowIndex].Control.style.backgroundColor = "";
}

function RowMouseOver(rowIndex) {
(Showing Error as (Unable to get property '[object Object]' of undefined or null reference in the first this.Rows.RowIndex)
if (this.Rows[rowIndex].Control.className.indexOf("disabled") == -1) {
this.Rows[rowIndex].Control.style.backgroundColor = "#DFDFDF";
this.Rows[rowIndex].Control.style.cursor = "hand";
}
}

function PendingItemRowSelecting(row) {
if (row.Control.className.indexOf("disabled") != -1)
return false;
}

function PendingItemRowSelected(row) {
var radWindow = Test.Utilities.WindowUtil.openRADWindow("PendingEditWindow", "Portlets/ConnectTest/PendingEdit.aspx?id=" + row.KeyValues["Guid"]);
radWindow.Restore();

var close = document.getElementById("CloseButton" + radWindow.Id);
close.onclick = CloseRadWindow;
}

Getting error in Edge , IE and Chrome,
Can anyone please help to how to resolve issue of above Rowindex as per the code?
- by
Sachita
Top achievements
Rank 1
Iron
Iron
Iron
on 02 Jun 2021, 05:08 AM | edited
0
Attila Antal
Telerik team
answered on 04 Jun 2021, 08:57 AM

Hello developers,

To work with the Grid either on Client or on Server, please refer to the following article that shows instructions on how to access controls, rows, cells, and cell values on the Server/Client side: Accessing Values and Controls

Regards,
Attila Antal
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Lokesh
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Lokesh
Top achievements
Rank 1
Shinu
Top achievements
Rank 1
Alexander
Top achievements
Rank 1
Viktor Tachev
Telerik team
Hari
Top achievements
Rank 1
Abitar
Top achievements
Rank 1
Attila Antal
Telerik team
Share this question
or