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

EnablePostBackOEnablePostBackOnRowClick="true" & other button on grid

15 Answers 305 Views
Grid
This is a migrated thread and some comments may be shown as answers.
binbin
Top achievements
Rank 1
binbin asked on 21 Aug 2008, 08:26 AM
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.

15 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 21 Aug 2008, 05:18 PM
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.
0
binbin
Top achievements
Rank 1
answered on 22 Aug 2008, 02:50 AM
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
0
Daniel
Telerik team
answered on 26 Aug 2008, 07:06 AM
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.
0
John Snyder
Top achievements
Rank 1
answered on 08 Oct 2008, 09:02 PM
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
0
John Snyder
Top achievements
Rank 1
answered on 08 Oct 2008, 09:25 PM
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 ObjectByVal 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)?
0
Daniel
Telerik team
answered on 10 Oct 2008, 04:48 PM
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.
0
Sean
Top achievements
Rank 1
answered on 26 Nov 2008, 05:50 PM
Hello Dustin,

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

EnablePostBackOnRowClick="true"


Thanks
0
Daniel
Telerik team
answered on 26 Nov 2008, 06:45 PM
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.
0
Sean
Top achievements
Rank 1
answered on 26 Nov 2008, 08:04 PM
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
0
Princy
Top achievements
Rank 2
answered on 27 Nov 2008, 07:14 AM
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.
0
Daniel
Telerik team
answered on 01 Dec 2008, 09:16 AM
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.
0
Sean
Top achievements
Rank 1
answered on 01 Dec 2008, 04:24 PM
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
0
Daniel
Telerik team
answered on 01 Dec 2008, 05:19 PM
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.
0
Sean
Top achievements
Rank 1
answered on 10 Dec 2008, 09:52 PM
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






0
Daniel
Telerik team
answered on 15 Dec 2008, 03:31 PM
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.
Tags
Grid
Asked by
binbin
Top achievements
Rank 1
Answers by
Daniel
Telerik team
binbin
Top achievements
Rank 1
John Snyder
Top achievements
Rank 1
Sean
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Share this question
or