How to add a Custom Button to the CommandItem of my RadGrid control and enable it to postback its click event?

[Pooya]

How to add a Custom Button to the CommandItem TableRow of my RadGrid control which is inside an updatepanel and enable it to have a Click event and full postback?

Thanks,

[Pooya]

I fixed it:

 this.RadGrid.MasterTableView.Init += MasterTableViewInit;

 void MasterTableViewInit(object sender, EventArgs e)
        {
            if (!this.EnablePdfExport) return;


            var commandItem = this.RadGrid.MasterTableView.GetItems(GridItemType.CommandItem).SingleOrDefault();


            if (commandItem == null) return;


            AddPdfButton(commandItem as GridCommandItem);
        } 

[Pooya]

That's not the right event apparently.

I added it on MasterTableView.Load and it appears correctly on page refreshes, etc. However, the button disappears when sorting is enabled and a column is selected to be sorted. why sorting makes it disappear? how to fix it?

I also tried adding it in the RadGrid.ItemCreated event. The problem is that the click event of my button is never raised in this case.

Still it's not resolved properly.

[Vasil]

Hi Pooya,

Here is an example how to place a button inside the command item that to make a full postback when the grid is in update panel.

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
</telerik:RadScriptManager>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
  <script type="text/javascript">
    function RequestStart(sender, eventArgs)
    {
      var eventTarget = eventArgs.get_eventTarget();
      if (eventTarget.indexOf("Button1") != -1)
      {
        eventArgs.set_enableAjax(false);
      }
    }
  </script>
</telerik:RadCodeBlock>
<div>
  <telerik:RadAjaxPanel runat="server" ClientEvents-OnRequestStart="RequestStart">
    <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource">
      <MasterTableView CommandItemDisplay="Top">
        <CommandItemTemplate>
          <asp:Button ID="Button1" Text="Add new item" runat="server" OnClick="ButtonClicked">
          </asp:Button>
        </CommandItemTemplate>
      </MasterTableView>
    </telerik:RadGrid>
  </telerik:RadAjaxPanel>
</div>

C#:

protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
    RadGrid1.DataSource = new int[] { 1, 2, 3, 4, 5 };
}

protected void ButtonClicked(object sender, EventArgs e)
{

}

Check these help topics for more information:
http://www.telerik.com/help/aspnet-ajax/grid-commanditemtemplate.html
http://www.telerik.com/help/aspnet-ajax/ajax-force-controls-to-postback.html

Kind regards,
Vasil
the Telerik team

[Pawan]

How to find in the button click event which row got clicked and how to get the contents of the other columns in the row.

Thanks

[Shinu]

Hi Pawan,

I guess you want to access selected row on button click event.Please try the below code snippet,to access the contents of the selected row,here multirow selection is enabled so that you can access all selected rows.Let me know if any concern.

ASPX:

<telerik:RadScriptManager ID="RadScriptManager2" runat="server">
</telerik:RadScriptManager>
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false"
    AllowPaging="true" AllowMultiRowSelection="true">
    <MasterTableView DataKeyNames="OrderID">
      <CommandItemTemplate>
        <asp:Button ID="Button1" Text="Select" runat="server" OnClick="Button1_Click">
        </asp:Button>
      </CommandItemTemplate>
        <Columns>
            <telerik:GridBoundColumn UniqueName="OrderID" DataField="OrderID" HeaderText="OrderID" />
            <telerik:GridBoundColumn DataField="ShipCity" HeaderText="ShipCity" UniqueName="ShipCity" />
            <telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" UniqueName="CustomerID" />
        </Columns>
    </MasterTableView>
    <ClientSettings Selecting-AllowRowSelect="true">
    </ClientSettings>
</telerik:RadGrid>

C#:

protected void Button1_Click(object sender, EventArgs e)
{
    foreach (GridDataItem dataItem in RadGrid1.SelectedItems)//To loop through all selected rows
    {
        int index = dataItem.ItemIndex;// Get Row Index
        string id = dataItem.GetDataKeyValue("OrderID").ToString();//Accessing the datakey value
        //Accessing Other Columns
        string ShipCity = dataItem["ShipCity"].Text;
        string CustomerID = dataItem["CustomerID"].Text;
    }
}

Thanks,
Shinu

[Pawan]

Thanks Shanu.

When i do this, on the postback all the values are lost. i am binding my datagrid on client side and my datasource is Array list(javascript). so the method in Button1_click the value for shipcity and others come as blank. also after the post back(button clikc), datagrid shows 2 records and both the records are empty. The array list which i am binding has only one row but the ondemand client event creates an empty table with  2 records as i have set page size to 1.Do you know why these values are getting lost and a way to retain those. i even tried enabling enableviewstate but still did not help.
Any help will be greatly appreciated.

[Vasil]

Hi Pawan,

When you bind the grid client side, the values will not be accessible server side. If you need the data server side, you should bind server side.
And if you need to bind client side, then do your further logic on client button click using JavaScript.

Regards,
Vasil
Telerik