CODEWITHSUNDEEP
asp.nettelerik
Vicky
Vicky

Reputation: 257

Prevent postback on Telerik GridButtonColumn click in RadGrid

When I click Image button in GridButtonColumn of RadGrid, the page get refreshed. Is there any solution for this?

<telerik:RadGrid ID="GrdCol" runat="server" Height="200px" Width="970px"
                 CellSpacing="0" GridLines="Horizontal" TabIndex="30"
                 AutoGenerateColumns="False" Skin="WebBlue" Font-Size="8pt"
                 Font-Names="Tahoma" AllowPaging="false" EnableViewState="False">
  <ClientSettings>
    <Scrolling ScrollHeight="300" AllowScroll="true" UseStaticHeaders="true" />
    <ClientEvents OnCommand="GrdCol_OnCommand" OnRowDataBound="GrdCol_RowDataBound" />
    <DataBinding ShowEmptyRowsOnLoad="true" SelectMethod="GetMetrics"/>
  </ClientSettings>
  <MasterTableView ShowFooter="false" EditMode="InPlace"
                   CommandItemDisplay="Top" TableLayout="Fixed">
    <CommandItemSettings ShowRefreshButton="false"/>
    <Columns>
      <telerik:GridButtonColumn HeaderText="Edit" ButtonType="ImageButton"
                                CommandName="Edit" UniqueName="EditColumn"
                                ImageUrl="../Images/Edit.png">
        <HeaderStyle HorizontalAlign="Center" Width="40px" />
        <ItemStyle HorizontalAlign="Center">
        </ItemStyle>
      </telerik:GridButtonColumn>
    </Columns>
  </MasterTableView>
</telerik:RadGrid>

Upvotes: 1

Views: 4609

Answers (2)

Sheldon Neilson
Sheldon Neilson

Reputation: 803

For anyone else out there looking for a solution to this..

<telerik:RadGrid 
    ID="MyRadGrid"        
    runat="server">

    <ClientSettings>
        <ClientEvents OnCommand="onItemCommand"/>
    </ClientSettings>

    <MasterTableView>
        <Columns>
            <telerik:GridButtonColumn
                    ButtonType="PushButton"
                    CommandName="MyCommandName"
                    Text="Click Here"
                    CommandArgument="MyCommandArgument">
            </telerik:GridButtonColumn>        
        </Columns>
    </MasterTableView>
</telerik:RadGrid>


function onItemCommand(sender, eventArgs) {
    try {
        //retrieve the current commandName and commandArgument
        var commandName =  eventArgs.get_commandName();
        var commandArgument = eventArgs.get_commandArgument();

        //cancel the command - this prevents the post back
        eventArgs.set_cancel(true); 
    } catch (e) {
        console.log(e);
    }
}

Upvotes: 4

FeliceM
FeliceM

Reputation: 4219

Attach the onClick event at runtime in code behind and return false. That should work as following:

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
   if (e.Item is GridDataItem)
   {
       GridDataItem item = (GridDataItem)e.Item;
       Button button = (Button)item["EditColumn"].Controls[0];
       button.Attributes.Add("OnClick", "DoSomething(); return false;");
   }
}

Do not forget to attache the RadGrid1_ItemCreated event in the grid.

Upvotes: -2

Related Questions