Unable to get RadGrid on button Click in client side

[RB]

I have a RadGrid in a RadAjaxPanel. The RadAjaxPanel also has a text box and button. RadAjaxPanel is then added to a Panel. Which in turn is added to an UpdatePanel.
A value needs to be entered in the textbox and based on selections, on click of button, the value is added to all the selected rows.
Radgrid is as follows:

this._RadGrid1.ID = "RadGrid1";
this._RadGrid1.AllowSorting = true;
this._RadGrid1.AllowFilteringByColumn = true;
this._RadGrid1.AutoGenerateColumns = false;
this._RadGrid1.EnableLinqExpressions = false;
this._RadGrid1.ClientSettings.Selecting.AllowRowSelect = true;

this._RadGrid1.MasterTableView.DataKeyNames = "...";
this._RadGrid1.MasterTableView.ClientDataKeyNames = "..";
this._RadGrid1.NeedDataSource += RadGrid1_NeedDataSource;

I have added checkboxtemplate to the grid.

The following are added to RadAjaxPanel.
 this.RadAjaxPanel.Controls.Add(this._RadLoadingPanel);
 this.RadAjaxPanel.Controls.Add(this._RadGrid1);
 this.RadAjaxPanel.Controls.Add(this._textBox1);
 this.RadAjaxPanel.Controls.Add(this._button1);

onClientClick of button I want to call a javascript function to know the rows selected and read the value of the textbox and update DB accordingly. Please help me figure how to do this. I tried the following but the js is unable to find the RadGrid!

function GetSelectedItems() {   

var g = $find("<%=RadGrid1.ClientID %>"); 
var MasterTable = g.get_masterTableView();
}

Suggest me if you have a better approach.

[Shinu]

Hi,

You can attach the button click client event from server side and pass the RadGrid ClientID along with it.

ASPX:

<asp:Button ID="btnSelect" runat="server" Text="Select"/>

C#:

btnSelect.Attributes.Add("OnClick", "OnClientClick('"+_RadGrid1.ClientID+"');return false;");

JS:

<script type="text/javascript">
    function OnClientClick(gridId) {
        var grid = $find(gridId);
        var MasterTable = grid.get_masterTableView();
    }
</script>

Thanks,
Shinu

[RB]

 $find(gridId); still returns null. Though the gridId="RadGrid1" but it cant find it!

[Shinu]

Hi,

Please take a look at the sample code snippet. Provide your full code snippet if this doesn't help.

ASPX:

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Height="600px" Width="600px">
</telerik:RadAjaxPanel>

C#:

RadGrid _RadGrid1;
protected void Page_Init(object source, System.EventArgs e)
{
    _RadGrid1 = new RadGrid();
    _RadGrid1.ID = "RadGrid1";
    _RadGrid1.MasterTableView.DataKeyNames = new string[] { "OrderID" };
    _RadGrid1.PageSize = 15;
    _RadGrid1.AllowPaging = true;
    _RadGrid1.AutoGenerateColumns = false;
    _RadGrid1.AllowSorting = true;
    _RadGrid1.AllowMultiRowSelection = true;
    _RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(_RadGrid1_NeedDataSource);
    _RadGrid1.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top;

    GridBoundColumn boundColumn;
    boundColumn = new GridBoundColumn();
    boundColumn.DataField = "OrderID";
    boundColumn.HeaderText = "OrderID";
    boundColumn.SortExpression = "OrderID";
    _RadGrid1.MasterTableView.Columns.Add(boundColumn);

    boundColumn = new GridBoundColumn();
    boundColumn.DataField = "ShipCountry";
    boundColumn.HeaderText = "ShipCountry";
    boundColumn.SortExpression = "ShipCountry";
    _RadGrid1.MasterTableView.Columns.Add(boundColumn);

    //Other columns

    Button btnSelect = new Button();
    btnSelect.ID = "btnSelect";
    btnSelect.Text = "Click";

    RadAjaxPanel1.Controls.Add(_RadGrid1);
    RadAjaxPanel1.Controls.Add(btnSelect);

    btnSelect.Attributes.Add("OnClick", "OnClientClick('" + _RadGrid1.ClientID + "');return false;");
}

void _RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = GetDataTable("SELECT * FROM Orders");
}
public DataTable GetDataTable(string query)
{
    String ConnString = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString;
    SqlConnection conn = new SqlConnection(ConnString);
    SqlDataAdapter adapter = new SqlDataAdapter();
    adapter.SelectCommand = new SqlCommand(query, conn);

    DataTable myDataTable = new DataTable();

    conn.Open();
    try
    {
        adapter.Fill(myDataTable);
    }
    finally
    {
        conn.Close();
    }

    return myDataTable;
}

JS:

<script type="text/javascript">
    function OnClientClick(gridId) {
        var grid = $find(gridId);
        var MasterTable = grid.get_masterTableView();
    }
</script>

Thanks,
Shinu