EnablePostBackOEnablePostBackOnRowClick="true" & other button on grid

[binbin]

Hi ,
I have a grid. two button on my grid one is "Edit" another is "Delete"

i set EnablePostBackOnRowClick="true" ,because  i want on click event the item state is change to Edit.

 protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)
    {
        if (e.CommandName == "RowClick")
        {
            e.Item.Edit = true;
            (source as RadGrid).Rebind();
        }
    }

The problem is .when i click delete button. we also get row click event. can we stop it.

We i use RowClick event

 <ClientEvents OnRowClick="RowClick2"

 function RowClick2(sender, args) {
        $find("<%= RadAjaxPanel1.ClientID %>").ajaxRequest("Edit:" + args._itemIndexHierarchical);
    }

That is correct. when i click the delete button. i don't get the RowClick event that is correct.

Btw: when you use DetailTable with EnablePostBackOnRowClick="true" . when click the DetailTable button. it is collapsing.

[Daniel]

Hello binbin,

Could you please share some details about the functionality you are trying to achieve?

If you want to perform edit on row click you may use the following code:

if(e.CommandName == "RowClick")
    e.Item.FireCommandEvent("Edit", e);

 
Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[binbin]

Let me give some explain.

  <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
            EnableAJAX="True" GridLines="None" Skin="Web20" EnableEmbeddedSkins="False" EnableAJAXLoadingTemplate="True"
            OnDeleteCommand="RadGrid1_DeleteCommand" OnInsertCommand="RadGrid1_InsertCommand"
            OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand"
            OnPageIndexChanged="RadGrid1_PageIndexChanged" OnItemCommand="RadGrid1_ItemCommand">
            <MasterTableView CommandItemDisplay="None" DataKeyNames="ID">
                <CommandItemSettings AddNewRecordImageUrl="AddRecord.gif" RefreshImageUrl="Refresh.gif">
                </CommandItemSettings>
                <RowIndicatorColumn Visible="False">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </RowIndicatorColumn>
                <ExpandCollapseColumn Visible="False" Resizable="False">
                    <HeaderStyle Width="20px"></HeaderStyle>
                </ExpandCollapseColumn>
                <Columns>
                    <telerik:GridBoundColumn DataField="Name" HeaderText="Name">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn HeaderText="On/Off Line">
                        <ItemTemplate>
                            <asp:CheckBox runat="server" ID="chbOnline" Checked='<%#Eval("Online")??false%>'
                                Enabled="false" />
                            <asp:HiddenField runat="server" ID="hfID" Value='<%#Eval("ID")%>' />
                        </ItemTemplate>
                        <ItemStyle HorizontalAlign="Left" />
                    </telerik:GridTemplateColumn>
                    <telerik:GridButtonColumn Text="Edit" HeaderText="Edit" ImageUrl="../../images/Edit.gif"
                        CommandName="Edit" ButtonType="ImageButton">
                        <ItemStyle Width="40px" />
                        <HeaderStyle Width="40px" />
                        <FooterStyle Width="40px" />
                    </telerik:GridButtonColumn>
                    <telerik:GridButtonColumn ConfirmText="Are you sure delete it" Text="Delete" ButtonType="ImageButton"
                        HeaderText="Delete" CommandName="Delete" ImageUrl="../../images/Delete.gif">
                        <ItemStyle Width="40px" />
                        <HeaderStyle Width="40px" />
                        <FooterStyle Width="40px" />
                    </telerik:GridButtonColumn>
                </Columns>
                <EditFormSettings EditFormType="Template">
                    <EditColumn InsertImageUrl="Update.gif" UpdateImageUrl="Update.gif" EditImageUrl="Edit.gif"
                        CancelImageUrl="Cancel.gif" FilterImageUrl="Filter.gif" SortAscImageUrl="SortAsc.gif"
                        SortDescImageUrl="SortDesc.gif">
                    </EditColumn>
                    <FormTemplate>
                        <table>
                            <tr>
                                <td>
                                    Name:
                                </td>
                                <td>
                                    <asp:TextBox ID="txtName" Text='<%#Eval("Name") %>' runat="server" CssClass="inputbox"></asp:TextBox>
                                    <asp:RequiredFieldValidator ID="rfvName" runat="server" ErrorMessage="*" ControlToValidate="txtName"></asp:RequiredFieldValidator>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    IsOnline:
                                </td>
                                <td>
                                    <asp:CheckBox runat="server" ID="chbOnline" Checked='<%# (Container is GridEditFormInsertItem) ? true :(Eval("Online")??false)%>' />
                                </td>
                            </tr>
                            <tr>
                                <td>
                                </td>
                                <td>
                                    <asp:Button ID="btnUpdate" ToolTip='<%# (Container is GridEditFormInsertItem) ? "Insert" : "Update" %>'
                                        runat="server" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'
                                        Text="Save"></asp:Button>&nbsp;
                                    <asp:Button ID="btnCancel" ToolTip="Cancel" runat="server" CausesValidation="False"
                                        CommandName="Cancel" Text="Cancel"></asp:Button>
                                </td>
                            </tr>
                        </table>
                    </FormTemplate>
                </EditFormSettings>
            </MasterTableView>
            <PagerStyle PagerTextFormat="Pagina:{4}   Pagina {0} van {1}, items {2} tot {3} van {5}"
                Mode="NextPrevAndNumeric" NextPageText="" PrevPageText="" AlwaysVisible="True" />
            <ClientSettings>

                <ClientEvents OnRowMouseOver="RowMouseOver"></ClientEvents>
                 <ClientEvents OnRowMouseOut="RowMouseOut"></ClientEvents>
            </ClientSettings>
              <ClientSettings EnablePostBackOnRowClick="true">
            </ClientSettings>
 </telerik:RadGrid>

The behind code .i was paste. the functionality is simple. you code and my code is correct. the problem is , once you click "delete" then Confirm it.  RadGrid1_ItemCommand will be call two times, the events are "RowClick and delete" that is no right. i am just need delete event, stop RowClick.

if you cancel  delete fucntion. RadGrid1_ItemCommand aslo be call one times.
the event is  "RowClick"

Can you help me stop "RowClick" Event . when i click "delete" button. may be that is bug

[Daniel]

Hello binbin,

You don't need to rebind RadGrid on RowClick event. Please remove Rebind() method from your ItemCommand event handler.

protected void RadGrid1_ItemCommand(object source, GridCommandEventArgs e)

{

if (e.CommandName == "RowClick")

e.Item.Edit = true;

}

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[John Snyder]

Daniel,

The issue is that when you have a grid that has the ClientSettings -> EnablePostBackOnRowClick set to true and you also have a button column, or a template column with a hyperlink in it, the ItemCommand is being fired when you click on the button or hyperlink.  Ideally, if you click on the hyperlink or link button it will do what it is supposed to do without making a postback for the rowclick.

In my scenario if you click on the row I want to redirect to a different page.  If you click on the hyperlink I want to show an alert box.  What happens is when I click on the hyperlink it opens the alert box and then also executes the rowclick event thus redirecting me to the next page (which I did not want to do). 

Is there a way to get it so you can have a hyperlink or button that will only perform it's desired click actions and then have the rest of the row handle the desired row click action?

Dustin

[John Snyder]

Per this KB article I thought I might be able to get it to work properly, but still no luck. 

Partial HTML of the grid:

<ClientSettings EnablePostBackOnRowClick="True" EnableRowHoverStyle="true">

<telerik:GridTemplateColumn>
    <ItemTemplate>
      <asp:HyperLink ID="hlHistory" runat="server" Text="Show History" onclick="CancelRowSelection(event); alert('Oops!');" NavigateUrl="#" />
    </ItemTemplate>
</telerik:GridTemplateColumn>

VB.Net Code

    Private Sub rg_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rg.ItemCommand
        Select Case e.CommandName
            Case "RowClick"
                '' Redirect to the desired page
                Response.Redirect("~/Page2.aspx")
        End Select
    End Sub

Any other ideas on how you can click on the row to go to a page but click on a button to just do what the button is supposed to do (and not calling the row click)?

[Daniel]

Hello Dustin,

Please test the attached sample webpage I created to fulfill your requirement:

"Any other ideas on how you can click on the row to go to a page but click on a button to just do what the button is supposed to do (and not calling the row click)?"

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Sean]

Hello Dustin,

Did you find a fix for this? I am having the same issue when I set

EnablePostBackOnRowClick="true"

Thanks

[Daniel]

Hello Sroun,

Could you please elaborate a bit? Dustin asked for an alternative approach and therefore I created an example illustrating how to achieve the same functionality client-side.

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Sean]

Hi Daniel,

Client side rowclick event works fine since it's not called when i click in my columnbutton. But now i have to get the ID of the row that i just clicked. how would i do that?

Thanks

[Princy]

Hello Sroun,

You can try out the following javascript code to get the row id  on row click.
aspx:

 <ClientSettings >
   <ClientEvents OnRowClick="RowClicked" />
 </ClientSettings>

js:

function RowClicked(sender, eventArgs)
 {

   //[eventArgs.get_id()] gets the client id of the row
   var dataItem = $get(eventArgs.get_id());
   var grid = sender;
   var MasterTable = grid.get_masterTableView();

   //[eventArgs.get_itemIndexHierarchical()] gets the index of the row
   var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];

   // to get the ID field(cell text) using columnUniqueName for a row
   var cell = MasterTable.getCellByColumnUniqueName(row, "ID");
   alert(cell.innerHTML)

 }

Thanks
Princy.

[Daniel]

Hello Sroun,

You can get the ID of the row as shown below:

function RowClick(sender, eventArgs)
{
    alert(eventArgs.get_id());
}

If you mean to get the cell contents you can test the code shared by Princy or test an alternative approach:

function RowClick(sender, eventArgs)
{
    alert(eventArgs.get_domEvent().target.innerHTML);
}

Let us know if you need additional information.

Kind regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Sean]

Thank you for your reply.

Now I want to set my first 2 columns not clickable. So when the user click on them, it shouldn't do anything except if it has a button or a link inside. How would you do that?

Thank you

[Daniel]

Hello Sroun,

It is possible to prevent the row selection when the user clicks on the first two columns:

<script type="text/javascript">
    function RowSelecting(sender, eventArgs)
    {
        var cellIndex = eventArgs.get_domEvent().target.cellIndex;
        if (cellIndex == 0 || cellIndex == 1)
            eventArgs.set_cancel(true);
    }
</script>

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Sean]

Hello daniel,

I still have some bugs with the RowClick event.
I followed your instruction and write this javascript:

function RowClick2(sender, args) {
          
                var dataItem = $get(args.get_id());
                var grid = sender;
                var MasterTable = grid.get_masterTableView();
                var row = MasterTable.get_dataItems()[args.get_itemIndexHierarchical()];
                var cell = MasterTable.getCellByColumnUniqueName(row, "ID");
                var rid = cell.innerHTML;
                sender.get_masterTableView().fireCommand("RowClick", rid);
           
        }





this should let ItemCommand Event knows the command name and the id value. So i did this:

protected void RadGrid1_ItemCommand(object source, Telerik.Web.UI.GridCommandEventArgs e)
    {
        if (e.Item.ItemType.Equals(Telerik.Web.UI.GridItemType.Item) || e.Item.ItemType.Equals(Telerik.Web.UI.GridItemType.AlternatingItem))
        {
            Telerik.Web.UI.GridDataItem dataItem = (Telerik.Web.UI.GridDataItem)e.Item;
            dataItem.Selected = true;
            switch (e.CommandName.ToUpper())
            {
                case "ROWCLICK":
                   string temp =  dataItem["ID"].Text.Trim());
                    break;
            }
        }
    }


But the value of temp is the id value of the FIRST row in a radGrid page instead of the id value of the row clicked.
Do you have any idea?
Thank you

[Daniel]

Hello Sroun,

Please download the attached example and let me know whether it's working on your end. I will gladly provide more information if needed.

Best regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.