This is a migrated thread and some comments may be shown as answers.

Unable to get RadGrid on button Click in client side

3 Answers 245 Views
Grid
This is a migrated thread and some comments may be shown as answers.
RB
Top achievements
Rank 1
RB asked on 09 Jun 2014, 10:26 PM
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 %>"); 
v
ar MasterTable = g.get_masterTableView();
}

Suggest me if you have a better approach.

3 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 10 Jun 2014, 06:03 AM
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
0
RB
Top achievements
Rank 1
answered on 10 Jun 2014, 03:47 PM
 $find(gridId); still returns null. Though the gridId="RadGrid1" but it cant find it!
0
Shinu
Top achievements
Rank 2
answered on 11 Jun 2014, 04:54 AM
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
Tags
Grid
Asked by
RB
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
RB
Top achievements
Rank 1
Share this question
or