Item command not firing in Chrome, Safari

12 posts, 0 answers
  1. cwk
    cwk avatar
    31 posts
    Member since:
    Apr 2007

    Posted 23 Apr Link to this post

    Hi, I have the following button in the radgrid

     

      <telerik:GridButtonColumn CommandName="CustomDelCommand" ConfirmText="Delete this record?" ConfirmDialogType="RadWindow" ItemStyle-Width="18" HeaderStyle-Width="18"
                            ConfirmTitle="Delete" ButtonType="FontIconButton" >
                        </telerik:GridButtonColumn>

    My item command code is here, the problem is the event not firing for chrome, safari. IE no problem. Anyone any idea?

     protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
            {
                if (e.CommandName == "CustomDelCommand")
                {
                    MailAddress addr = new MailAddress(User.Identity.Name);
                    string username = addr.User;
              var Id = (int)((GridDataItem)e.Item).GetDataKeyValue("id");

    //del id record.
                   
                }
            }

  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 27 Apr Link to this post

    Hi,

    I have tested the provided code and on my side the custom delete command event fires as expected after Ok button is clicked in the confirm window. Therefore, if the issue still persists on your end elaborate a bit more 
    what is the exact version of UI for ASP.NET AJAX in the project, if possible send the complete grid declaration and also confirm if you are not receiving any error in the browser console.

    Regards,
    Pavlina
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Brian
    Brian avatar
    6 posts
    Member since:
    Apr 2016

    Posted 12 Aug Link to this post

    I have the same issue, and the responder didn't exactly address the issue.  The problem is not if it will work, but if there is a difference in behavior between IE and Chrome.

    In my case, on the same row, I have an update button, and a delete button. Event fires in both browsers for the update, but not for the delete in Chrome.

    So, yes, I can confirm that this is an issue, the custom code behind is not being reached from the grid icon, in Chrome. Do we need to create some sort of old school javascript hack to detect browsers and run ajax?  That sort of defeats the purpose of having these nice grids with built in functionality.  Has there been an update to Chrome that broke the code in the telerik binary? For now I will have to put a note on the page to just use IE until I can find a fix, or the library is updated, or you can post a work-around.

  5. Brian
    Brian avatar
    6 posts
    Member since:
    Apr 2016

    Posted 12 Aug in reply to Brian Link to this post

    so, I thought I would follow up with some actual code.... so here it is:

    header for radgrid:

    <telerik:RadGrid ID="rgViewExistingEvent" EnableTheming="false" MasterTableView-ClientDataKeyNames="EventID" MasterTableView-DataKeyNames="EventID" RenderMode="Lightweight" runat="server" AllowPaging="True" AllowFilteringByColumn="True" PagerStyle-AlwaysVisible="true" OnPageIndexChanged="rgViewExistingEvent_PageIndexChanged"
                    AllowSorting="True" MasterTableView-NoMasterRecordsText="No Events to Display" OnItemCreated="rgViewExistingEvent_ItemCreated" OnUpdateCommand="rgViewExistingEvent_UpdateCommand" OnDeleteCommand="rgViewExistingEvent_DeleteCommand" OnNeedDataSource="rgViewExistingEvent_NeedDataSource" OnItemCommand="rgViewExistingEvent_ItemCommand">
                    <GroupingSettings CaseSensitive="false" />
                    <MasterTableView AutoGenerateColumns="false" TableLayout="Fixed">
                        <Columns>  .....

    IE : (version 11)

    edit button:

    aspx script:
    <telerik:GridEditCommandColumn HeaderText="Edit" UniqueName="EditColumn">
    <HeaderStyle Width="35px" />
    </telerik:GridEditCommandColumn>

    rendered source:
    <td><button type="button" name="rgViewExistingEvent$ctl00$ctl07$EditButton" value="Edit" onclick="javascript:__doPostBack(&#39;rgViewExistingEvent$ctl00$ctl07$EditButton&#39;,&#39;&#39;)" id="rgViewExistingEvent_ctl00_ctl07_EditButton" title="Edit" class="t-button rgActionButton rgEdit"><span class="t-font-icon rgIcon rgEditIcon"></span></button></td>



    delete button - GridClientDeleteColumn:

    aspx script:
    <telerik:GridClientDeleteColumn HeaderText="Delete" UniqueName="DeleteColumn" CommandName="Delete" ConfirmDialogType="RadWindow" ConfirmTextFields="EventTitle" ConfirmTextFormatString="Delete this Master Event: {0}? This will also delete all Scheduled Events associated with this Master Event" ConfirmTitle="Delete?" >
    <HeaderStyle Width="35px" />
    </telerik:GridClientDeleteColumn>

    rendered source:
    <td><button type="button" name="rgViewExistingEvent$ctl00$ctl07$ctl00" value="Delete" onclick="if(!$find(&#39;rgViewExistingEvent&#39;).confirm(&#39;Delete this Master Event: test 11? This will also delete all Scheduled Events associated with this Master Event&#39;, event, &#39;Delete?&#39;))return false;$find(&#39;rgViewExistingEvent_ctl00&#39;)._clientDelete(event); return false;__doPostBack(&#39;rgViewExistingEvent$ctl00$ctl07$ctl00&#39;,&#39;&#39;)" title="Delete" class="t-button rgActionButton rgDel"><span class="t-font-icon rgIcon rgDelIcon"></span></button></td>



    delete button - GridButtonColumn:

    aspx script:
    <telerik:GridButtonColumn ButtonType="FontIconButton" HeaderText="Delete" UniqueName="DeleteColumn" CommandName="Delete" ConfirmDialogType="RadWindow" ConfirmTextFields="EventTitle" ConfirmTextFormatString="Delete this Master Event: {0}? This will also delete all Scheduled Events associated with this Master Event" ConfirmTitle="Delete?" >
    <HeaderStyle Width="35px" />
    </telerik:GridButtonColumn>

    rendered source:
    <td><button type="button" name="rgViewExistingEvent$ctl00$ctl07$ctl00" value="" onclick="if(!$find(&#39;rgViewExistingEvent&#39;).confirm(&#39;Delete this Master Event: test 11? This will also delete all Scheduled Events associated with this Master Event&#39;, event, &#39;Delete?&#39;))return false;__doPostBack(&#39;rgViewExistingEvent$ctl00$ctl07$ctl00&#39;,&#39;&#39;)" title="Delete" class="t-button rgActionButton rgDel"><span class="t-font-icon rgIcon rgDelIcon"></span></button></td>





    Chrome : Version 52.0.2743.116 m (has icon that says its up to date)

    "Edit"....
    <td><button type="button" name="rgViewExistingEvent$ctl00$ctl07$EditButton" value="Edit" onclick="javascript:__doPostBack(&#39;rgViewExistingEvent$ctl00$ctl07$EditButton&#39;,&#39;&#39;)" id="rgViewExistingEvent_ctl00_ctl07_EditButton" title="Edit" class="t-button rgActionButton rgEdit"><span class="t-font-icon rgIcon rgEditIcon"></span></button></td



    <telerik:GridButtonColumn.....
    <td><button type="button" name="rgViewExistingEvent$ctl00$ctl07$ctl00" value="" onclick="if(!$find(&#39;rgViewExistingEvent&#39;).confirm(&#39;Delete this Master Event: test 11? This will also delete all Scheduled Events associated with this Master Event&#39;, event, &#39;Delete?&#39;))return false;__doPostBack(&#39;rgViewExistingEvent$ctl00$ctl07$ctl00&#39;,&#39;&#39;)" title="Delete" class="t-button rgActionButton rgDel"><span class="t-font-icon rgIcon rgDelIcon"></span></button></td>


    <telerik:GridClientDeleteColumn ....
    <td><button type="button" name="rgViewExistingEvent$ctl00$ctl07$ctl00" value="Delete" onclick="if(!$find(&#39;rgViewExistingEvent&#39;).confirm(&#39;Delete this Master Event: test 11? This will also delete all Scheduled Events associated with this Master Event&#39;, event, &#39;Delete?&#39;))return false;$find(&#39;rgViewExistingEvent_ctl00&#39;)._clientDelete(event); return false;__doPostBack(&#39;rgViewExistingEvent$ctl00$ctl07$ctl00&#39;,&#39;&#39;)" title="Delete" class="t-button rgActionButton rgDel"><span class="t-font-icon rgIcon rgDelIcon"></span></button></td>

     

    so to explain, I wanted to compare the differences between IE and Chrome, and aslo see if there was a difference is using a GridButtonColumn vs. a GridClientDeleteColumn, so I list first the aspx script, and then what gets rendered in the browser.

    The versions of the browsers are listed above.

    if it helps, Chrome has a nifty feature to not only view the HTML, but also edit it in place, so this change in the rendered delete button script caused the postback and code behind to run like it did in IE:

    ...  onclick="javascript: __doPostBack('rgViewExistingEvent$ctl00$ctl07$ctl00','')" title="Delete" ...

    but, this is a manual change and I'm not sure if I can effect that kind of change on the fly, ... easily :)

    Anyway, this should fully document the issue and if there is nothing I'm doing wrong, perhaps you can take this information and create a support ticket.

    Thanks!

  6. Brian
    Brian avatar
    6 posts
    Member since:
    Apr 2016

    Posted 12 Aug in reply to Brian Link to this post

    ok, so here's another little wrinkle in the mystery.... I thought perhaps there is too much script going on, so I removed the script to challenge the user if they were sure and here is the result - it's interesting.

    Chrome:
    does not work:
    <telerik:GridClientDeleteColumn HeaderText="Delete" UniqueName="DeleteColumn" CommandName="Delete">

    <td><button type="button" name="rgViewExistingEvent$ctl00$ctl07$ctl00" value="Delete" onclick="$find(&#39;rgViewExistingEvent_ctl00&#39;)._clientDelete(event); return false;__doPostBack(&#39;rgViewExistingEvent$ctl00$ctl07$ctl00&#39;,&#39;&#39;)" title="Delete" class="t-button rgActionButton rgDel"><span class="t-font-icon rgIcon rgDelIcon"></span></button></td>

    !!works!!
    <telerik:GridButtonColumn HeaderText="Delete" UniqueName="DeleteColumn" CommandName="Delete">

    <td><button type="button" name="rgViewExistingEvent$ctl00$ctl04$ctl00" value="" onclick="javascript:__doPostBack(&#39;rgViewExistingEvent$ctl00$ctl04$ctl00&#39;,&#39;&#39;)" title="Delete" class="t-button rgActionButton rgDel"><span class="t-font-icon rgIcon rgDelIcon"></span></button></td>

    -- somehow the 'javascript:' popped back in!  
    IE:
    works!:
    <telerik:GridButtonColumn...
    <td><button type="button" name="rgViewExistingEvent$ctl00$ctl04$ctl00" value="" onclick="javascript:__doPostBack(&#39;rgViewExistingEvent$ctl00$ctl04$ctl00&#39;,&#39;&#39;)" title="Delete" class="t-button rgActionButton rgDel"><span class="t-font-icon rgIcon rgDelIcon"></span></button></td>

    works!:
    <telerik:GridClientDeleteColumn..
    <td><button type="button" name="rgViewExistingEvent$ctl00$ctl07$ctl00" value="Delete" onclick="$find(&#39;rgViewExistingEvent_ctl00&#39;)._clientDelete(event); return false;__doPostBack(&#39;rgViewExistingEvent$ctl00$ctl07$ctl00&#39;,&#39;&#39;)" title="Delete" class="t-button rgActionButton rgDel"><span class="t-font-icon rgIcon rgDelIcon"></span></button></td>

    so, taking the pop-up out, makes it work in both, as long as you use the GridButtonColumn, not the GridClientDeleteColumn. Now,.. I need to figure out how to get the pop-up back. joy.

    oh, and if you are curious, I'm using VS 2015, update 2, and the website is targeting framework 4.5, and yes, I did a clean and rebuild between each iteration of test.

    So, hope this helps someone out, if I get the pop-up back, I'll post that solution also. 

    cheers, :)

  7. Brian
    Brian avatar
    6 posts
    Member since:
    Apr 2016

    Posted 12 Aug in reply to Brian Link to this post

    so just as a followup - it looks like the GridClientDeleteColumn is using a jquery to look for a custom javascript function to run on the client side - makes sense, given the title.  But it also looks like the telerik code is assuming other code somewhere will be inserting the "javascript" word, or assuming the browser will automatically know its javascript, which IE seems to do. But chrome doesn't want to play nice, so back to the drawing board.  :)
  8. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 17 Aug Link to this post

    Hello,

    Can you please try to change the Image type of the GridDeleteButton to font icon for example and see if this makes the behaviour in the both browsers equal?

    Regards,
    Maria Ilieva
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  9. Brian
    Brian avatar
    6 posts
    Member since:
    Apr 2016

    Posted 17 Aug Link to this post

    So, I said I would follow up with a fix if I found it, and here's the work-around I found - after changing the column type back to GridButtonColumn and backing all the features out to the bare minimum, the code behind was being reached (via the word "javascript: __doPostBack.... being added as it should), so then, to get the confirmation process back, i started adding features back in and found that if I use ConfirmDialogType="Classic", rather than ConfirmDialogType="RadWindow", then the rendered html plus javascript is created correctly and everything works. Not ideal as the old classic window is not as nice on the eyes, but it works, and that's  what counts. :)

    So, to be clear, this is a Radgrid + delete function + ConfirmDialogType="RadWindow" + Chrome problem - clearly a bug.  Hope this helps someone. Haven't tested this in Safari or any other browsers.

     

  10. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 22 Aug Link to this post

    Hi,

    Thank you for sharing your solution for this case. We will continue digging on the described problem locally and will post back in case any updates on this issue are available.

    Regards,
    Maria Ilieva
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  11. Paul Potter
    Paul Potter avatar
    2 posts
    Member since:
    Jun 2005

    Posted 28 Nov Link to this post

    What is the status of this issue? If I can't rely upon a product to fire basic events what good is this framework?
  12. Paul Potter
    Paul Potter avatar
    2 posts
    Member since:
    Jun 2005

    Posted 28 Nov Link to this post

    Site works fine in IE 11 and breaks in Chrome and Edge. Wonderful Telerik...
  13. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 5 days and 13 hours ago Link to this post

    Hello,

    I have tested the ItemCommand with the latest R3 2016 SP2 release and the event fires as expected in Chrome when custom command button is clicked. Please find attached my test project, give it a try and let me know what differs on your end.
     
    Regards,
    Pavlina
    Telerik by Progress
    Telerik UI for ASP.NET AJAX is ready for Visual Studio 2017 RC! Learn more.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017