Friday, 27 July 2012

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;
        }

29 comments:

  1. ("input[id*='CheckBox1']")

    is that a typo?

    ReplyDelete
    Replies
    1. sorry my mystake i got it now..

      it's not a typ0

      Delete
  2. How do you access a control in Edit mode in an .ascx control inside an .aspx page?

    ReplyDelete
  3. very good,
    Can you please explain how to set values to bound columns and template columns on client side

    ReplyDelete
  4. Can you please provide your code here or any other forum and provide forum link here?

    ReplyDelete
  5. Can you please provide your code here or any other forum and provide forum link here?

    ReplyDelete
  6. Hi Jayesh,

    Please provide me the code to get the control inside CommandItemTemplate.

    Thanks,
    Rajesh

    ReplyDelete
  7. Thank you Jayesh! Very helpful as always!

    ReplyDelete
  8. Thanks Jayesh. I struggled for more than 3 hours and once i found this article I could able to fix my issue

    ReplyDelete
  9. Thank You it is very useful to me

    ReplyDelete
  10. Thank you .we found nothing.

    ReplyDelete
  11. @chamarti, Could you please provide your code and explain your requirement?

    ReplyDelete
  12. I am using your "Access Control in Edit mode example" having a radtextbox control instead of your checkbox and I want to hide it (or disable it). I do: var textBox1 = $(editItem.get_editFormItem()).find("input[id*='EditCommentsTxtBox']").get(0); and then: textBox1.set_visible(false); But it is not working!!!

    ReplyDelete
  13. I get the RadtextBox, the set_visible does not work...

    ReplyDelete
  14. Please try with '$telerik.findControl(editItem.get_editFormItem(), "RadTextBox1").set_visible(false)'

    ReplyDelete
  15. Hi, i tried this but always see this message:

    "Object does not support property or method _get_eventHandlerList"

    I just want to show in a message the content of a cell when the user clicks on a command button of the RadGrid.

    Best Regards

    ReplyDelete
  16. Could you please share your code with me? my email-id: jayeshgoyani@gmail.com

    ReplyDelete
  17. in the aspx doc





















    in the JS code

    function GridCreated(sender, args) {
    var grid = sender;
    var master = sender.get_masterTableView();
    master.selectAllItems(true);
    }

    function OnClick(index) {
    //var master = document.getElementById("ctl00_ContentPlaceHolder1_rgd_Lista_Items").get_masterTableView();
    var row = master.get_dataItems()[index]; //accessing row with the Row index
    var cell = master.getCellByColumnUniqueName(row, "Codigo"); // Accessing the cell using its UniqueName
    alert(cell.innerHTML);
    }

    The RadGrid contains several rows, the column Codigo contains a string and the goal is obtain a message with that code.

    Best Regards

    ReplyDelete
  18. Could you please provide your full code to me, I have already shared my address in above.

    ReplyDelete
  19. hi Jayesh

    how to access template column value server side? Because i want to send from grid data to sql table.

    ReplyDelete
  20. Please check below link I have already provided solution for same. http://stackoverflow.com/questions/7989193/findcontrol-gridtemplatecolumn-outside-of-radgrid-events

    ReplyDelete
  21. Thank you Jayesh! your blog is very helpful as always! 'Access Control in Edit mode' section is work perfectly in my radgrid Edit mode but its not working in the insert mode. so please provide your thoughts.

    ReplyDelete
  22. I have updated my code for insert mode.

    ReplyDelete
  23. Thank's jayesh it's work fine in my code. thanks for your great help.

    ReplyDelete
  24. superb sample code thanks lot.

    ReplyDelete