Access RadGrid Row and Column on Client Side

Get Client Data key on Client

<telerik:radcodeblock id="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function AccessOnclient() {
                var grid = $find("<%= RadGrid1.ClientID %>");
                if (grid) {
                    var MasterTable = grid.get_masterTableView();
                    var Rows = MasterTable.get_dataItems();
                    for (var i = 0; i < Rows.length; i++) {
                        var row = Rows[i];
                        var ClientDataKey_ID = row.getDataKeyValue("ID");
                    }
                }
                return false;
            }
        </script>
    </telerik:radcodeblock>

Get Template Column Control

<telerik:radcodeblock id="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function AccessOnclient() {
                var grid = $find("<%= RadGrid1.ClientID %>");
                if (grid) {
                    var MasterTable = grid.get_masterTableView();
                    var Rows = MasterTable.get_dataItems();
                    for (var i = 0; i < Rows.length; i++) {
                        var row = Rows[i];
                        // Method1
                        var lblName_1 = $(row.get_element()).find("span[id*='lblName']").get(0);
                        // Method2
                        var lblName_2 = $telerik.findControl(row.get_element(), "lblName");
                        // Method3
                        var lblName_3 = row.findControl("lblName");
                    }
                }
                return false;
            }
        </script>
    </telerik:radcodeblock>

Access Column Text

<telerik:radcodeblock id="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function AccessOnclient() {
                var grid = $find("<%= RadGrid1.ClientID %>");
                if (grid) {
                    var MasterTable = grid.get_masterTableView();
                    var Rows = MasterTable.get_dataItems();
                    for (var i = 0; i < Rows.length; i++) {
                        var row = Rows[i];
                        // Method1
                        var getCellText_1 = row.get_element().cells[0].innerHTML;
                        // Method2
                        var getCellText_2 = row.get_cell("ID").innerHTML;
                        // Method3
                        var getCellText_2 = row.get_cell("Name").getElementsByTagName("span")[0].innerHTML; //this code also work for Checkboxcolunm, hyperlinkcolumn...etc
                    }
                }
                return false;
            }
        </script>
    </telerik:radcodeblock>

Access Column's property here

<telerik:radcodeblock id="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function AccessOnclient() {
                var grid = $find("<%= RadGrid1.ClientID %>");
                if (grid) {
                    var MasterTable = grid.get_masterTableView();
                    var Columns = MasterTable.get_columns();
                    for (var i = 0; i < Columns.length; i++) {
                        var column = Columns[0];
                        var columnUniqueName = column.get_uniqueName();
                        var columnDataField = column.get_dataField();
                        var columnfilterFunction = column.get_filterFunction();
                    }
                }
                return false;
            }
        </script>
    </telerik:radcodeblock>

Access Control in Edit mode

<telerik:radcodeblock id="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function AccessOnclient() {
                var grid = $find("<%= RadGrid1.ClientID %>");
                if (grid) {
                    var EditItems = grid.get_editItems();
                    for (var i = 0; i < EditItems.length; i++) {
                        var editItem = EditItems[0];
                        var checkbox1 = $(editItem.get_editFormItem()).find("input[id*='CheckBox1']").get(0)
                    }

                }
                return false;
            }
        </script>
    </telerik:radcodeblock>

Access Control in insert mode

<telerik:radcodeblock id="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function AccessOnclient() { 
            var grid = $find("<%= RadGrid1.ClientID %>");
            if (grid) {
                var MasterTable = grid.get_masterTableView();
                var insertRow = MasterTable.get_insertItem();
                var checkbox1 = $(insertRow).find("input[id*='CheckBox1']").get(0);
                //You can access other controls from below container
                //$(insertRow)
            }
            return false;
        }
    </script>
</telerik:radcodeblock>

ASPX

<telerik:radscriptmanager id="RadScriptManager1" runat="server">
        </telerik:radscriptmanager>
        <telerik:radajaxmanager id="RadAjaxManager1" runat="server">
        </telerik:radajaxmanager>
        <telerik:radajaxloadingpanel id="RadAjaxLoadingPanel1" runat="server">
        </telerik:radajaxloadingpanel>
        <asp:button id="Button1" onclientclick="return AccessOnclient();" runat="server" text="Access On Client"></asp:button>
       
        <telerik:radgrid allowfilteringbycolumn="true" autogeneratecolumns="false" id="RadGrid1" onneeddatasource="RadGrid1_NeedDataSource" runat="server">
            <mastertableview clientdatakeynames="ID" commanditemdisplay="Top">
                <columns>
                    <telerik:gridboundcolumn datafield="ID" headertext="ID" uniquename="ID">
                    </telerik:gridboundcolumn>
                    <telerik:gridtemplatecolumn headertext="Name" uniquename="Name">
                        <itemtemplate>
                            <asp:label id="lblName" runat="server" text="&lt;%# Eval(&quot;Name&quot;) %&gt;"></asp:label>
                        </itemtemplate>
                        <edititemtemplate>
                            <asp:checkbox id="CheckBox1" runat="server">
                        </asp:checkbox></edititemtemplate>
                    </telerik:gridtemplatecolumn>
                    <telerik:grideditcommandcolumn uniquename="EditColumn">
                    </telerik:grideditcommandcolumn>
                </columns>
            </mastertableview>
        </telerik:radgrid>

ASPX.CS

 protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            dynamic data = new[] {
               new { ID = 1, Name ="Name_1"},
               new { ID = 2, Name = "Name_2"},
               new { ID = 3, Name = "Name_3"},
               new { ID = 4, Name = "Name_4"},
               new { ID = 5, Name = "Name_5"}
           };
            RadGrid1.DataSource = data;
        }

Visual Studio 2012 and ASP.NET 4.5 Features

You can find information about new features and enhancements in Visual Studio 2012 and ASP.NET 4.5 by reviewing the below Ebook.

Download the Free Ebook

Access Another control which was in same level or in row

 function YourFunctionName(sender, args) {
                // Do not forget to add jquery in reference
                var SenderId = sender.id;
                //var SenderId = sender.get_element().id;
                //var SenderId =  sender.get_id();
                var RadTextBox1 = $("#" + SenderId).get(0);
                var RadTextBox2 = $("#" + SenderId.replace("RadTextBox1", "RadTextBox2")).get(0);
               // for telerik /radcontrols
                var RadTextBox2 = $telerik.findTextBox(SenderId.replace("RadTextBox1", "RadTextBox2"));

            }

Space added in autoGenerated column header problem in Radgrid

protected void RadGrid1_ColumnCreated(object sender, GridColumnCreatedEventArgs e)
{
        if (!string.IsNullOrEmpty(e.Column.UniqueName) && !string.IsNullOrEmpty(e.Column.HeaderText))
            e.Column.HeaderText = e.Column.UniqueName;
        //OR
        e.Column.HeaderText = e.Column.HeaderText.Replace(" ", "");
}

Customizing items of RadGrid page size combo based on total records

Telerik provides the easy to use RadGrid control with inbuilt paging feature.

By default paging combo includes 10, 20 and 50 page sizes, regardless of number of records displayed in the grid (i.e. if records counts to 11 then also page size combo displays 10, 20 and 50).

If we want to customize the page size combo items to show

•         Records count > 10 then page size items should show 10 and 20
•         Records count >= 20 then page size items should show 10, 20 and 50

In order to achieve the above functionality, we will be using RadGrid ItemCreated and ItemEvent events, refer the below code.

private int totalItemCount;

protected void RadGrid1_ItemEvent(object sender, GridItemEventArgs e)
{
        if (e.EventInfo is GridInitializePagerItem)
        {
            totalItemCount = (e.EventInfo as GridInitializePagerItem).PagingManager.DataSourceCount;
        }
}

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
        if (e.Item is GridPagerItem)
        {
            GridPagerItem pagerItem = (GridPagerItem)e.Item;
            RadComboBox pageSizeCombo = (RadComboBox)pagerItem.FindControl("PageSizeComboBox");

            for (int i = 0; i < pageSizeCombo.Items.Count; i++)
            {
                RadComboBoxItem item = pageSizeCombo.Items[i];

                if (Convert.ToInt32(item.Value) > totalItemCount)
                {
                    i--;
                    pageSizeCombo.Items.Remove(item.Index);
                }
            }

            if (totalItemCount != Convert.ToInt32(pageSizeCombo.Items[pageSizeCombo.Items.Count - 1].Value))
            {
                RadComboBoxItem item = new RadComboBoxItem();
                item = new RadComboBoxItem(totalItemCount.ToString(), totalItemCount.ToString());
                item.Attributes.Add("ownerTableViewId", e.Item.OwnerTableView.ClientID);
                pageSizeCombo.Items.Add(item);
            }
// If you lost selected value in Pagesize combo
//pageSizeCombo.FindItemByValue(e.Item.OwnerTableView.PageSize.ToString()).Selected = true;

        }

}

Displaying page combo always regardless of number of records, refer below code

<telerik:radgrid allowpaging="true" id="RadGrid1" runat="server">
    <mastertableview>
         <pagerstyle alwaysvisible="true"></pagerstyle>
              . . . . 
              . . . . 
    </mastertableview>
</telerik:radgrid>

Showing "Show All" option in page size combo, refer below combo

private int totalItemCount;
protected void RadGrid1_ItemEvent(object sender, GridItemEventArgs e)
{
        if (e.EventInfo is GridInitializePagerItem)
        {
            totalItemCount = (e.EventInfo as GridInitializePagerItem).PagingManager.DataSourceCount;
        }
}

protected void RadGrid1_ItemCreated(object sender, Telerik.Web.UI.GridItemEventArgs e)
{
        if (e.Item is GridPagerItem)
        {   
            GridPagerItem pagerItem = (GridPagerItem)e.Item;
            RadComboBox PageSizeCombo = (RadComboBox)pagerItem.FindControl("PageSizeComboBox");
            RadComboBoxItem item1 = new RadComboBoxItem();
            item1 = new RadComboBoxItem("Show All", totalItemCount.ToString());
            item1.Attributes.Add("ownerTableViewId", e.Item.OwnerTableView.ClientID);
            PageSizeCombo.Items.Add(item1);

        }
}