EnablePostBackOEnablePostBackOnRowClick="true" & other button on grid

16 posts, 0 answers
  1. binbin
    binbin avatar
    26 posts
    Member since:
    Sep 2006

    Posted 21 Aug 2008 Link to this post

    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.
  2. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 21 Aug 2008 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. binbin
    binbin avatar
    26 posts
    Member since:
    Sep 2006

    Posted 21 Aug 2008 Link to this post

    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
  5. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 26 Aug 2008 Link to this post

    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.
  6. John Snyder
    John Snyder avatar
    43 posts
    Member since:
    Mar 2006

    Posted 08 Oct 2008 Link to this post

    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
  7. John Snyder
    John Snyder avatar
    43 posts
    Member since:
    Mar 2006

    Posted 08 Oct 2008 Link to this post

    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)?
  8. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 10 Oct 2008 Link to this post

    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.
  9. Sean
    Sean avatar
    20 posts
    Member since:
    Oct 2008

    Posted 26 Nov 2008 Link to this post

    Hello Dustin,

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

    EnablePostBackOnRowClick="true"


    Thanks
  10. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 26 Nov 2008 Link to this post

    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.
  11. Sean
    Sean avatar
    20 posts
    Member since:
    Oct 2008

    Posted 26 Nov 2008 Link to this post

    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
  12. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 27 Nov 2008 Link to this post

    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.
  13. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 01 Dec 2008 Link to this post

    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.
  14. Sean
    Sean avatar
    20 posts
    Member since:
    Oct 2008

    Posted 01 Dec 2008 Link to this post

    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
  15. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 01 Dec 2008 Link to this post

    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.
  16. Sean
    Sean avatar
    20 posts
    Member since:
    Oct 2008

    Posted 10 Dec 2008 Link to this post

    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






  17. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 15 Dec 2008 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017