Find Row Index of radgrid on client side

[Lokesh]

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..

[Jayesh Goyani]

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

[Lokesh]

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..

[Jayesh Goyani]

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

[Shinu]

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.

[Lokesh]

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..

[Lokesh]

Thank you so much Shinu.. :) It worked.
Thank you Jayesh for all your help.

[Alexander]

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.

[Viktor Tachev]

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:

• RadGrid Validation

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

 

 

[Alexander]

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

[Viktor Tachev]

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

 

 

[Hari]

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>

[Hari]

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.

[Viktor Tachev]

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

 

 

[Abitar]

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 ?

[Viktor Tachev]

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

[Abitar]

Hello Viktor,

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

Thank You for your help :) 

Abitar

[Viktor Tachev]

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

[Sachita]

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?

[Attila Antal]

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