Item command not firing in Chrome, Safari

[cwk]

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.
               
            }
        }

[Pavlina]

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

[Brian]

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.

[Brian]

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!

[Brian]

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, :)

[Brian]

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.  :)

[Maria Ilieva]

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

[Brian]

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.

 

[Maria Ilieva]

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

[Paul Potter]

What is the status of this issue? If I can't rely upon a product to fire basic events what good is this framework?

[Paul Potter]

Site works fine in IE 11 and breaks in Chrome and Edge. Wonderful Telerik...

[Pavlina]

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

[Emad]

Hello,

 

I have a rad grid with automatic delete, and delete button type is font

Its working fine on IE where it's not working on chrome.

Please advise.

<p></p><p></p><p><telerik:GridButtonColumn ConfirmText="Are you sure?" HeaderText="Delete" <br>                    ConfirmDialogType="RadWindow" ConfirmTitle="Delete" ButtonType="FontIconButton" <br>                    CommandName="Delete" Text="Delete" UniqueName="Delete"><br>                    <HeaderStyle Width="70px" Font-Bold="true" /><br>                </telerik:GridButtonColumn><br></p>

 

[Pavlina]

Hi,

The delete button type in the demo linked below is also FontIconButton and it works as expected in Chrome:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/automatic-crud-operations/defaultcs.aspx

Could you specify what is the difference on your end?

Regards,
Pavlina
Telerik by Progress

[Emad]

Dear Pavlina,

 

Please note that delete button is not working when there is confirm dialog is there, the example you shared doesn't have confirm dialog.

Awaiting your feedback.

 

Thanks.

Emad

[Pavlina]

Hello,

This demo is with confirm dialog and it is also working without problems:
http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/batch-editing/defaultcs.aspx

Regards,
Pavlina
Telerik by Progress

[Emad]

Dear Pavlina,

Thank you for your reply.

Yes it's working in your example because you use ConfirmDialogType="Classic",where I'm using RadWindow !! 

[Emad]

Hi,

I have figured out that you use RadWindow in your demo but there is no RadWindowManager

In my code I'm using RadWindowManager  and confirm dialog in delete button is RadWindow.

If I remove RadWindowManager delete is working !!!

But the issue still I'm in need for RadWindowManger !!

 

<telerik:RadWindowManager ID="RadWindowManager1" runat="server" EnableShadow="true" RenderMode="Auto" AutoSize="true">
        </telerik:RadWindowManager>

[Pavlina]

Hello,

Please open a support ticket and attach a project with the exact scenario you have there. We will debug it locally and will advice you further.

Looking forward to your reply.

Regards,
Pavlina
Telerik by Progress

[Marco Piumi]

The problem with the new release in 2017, also occurs on Firefox.
When ConfirmDialogType = "RadWindow" does not work !!

Thanks

[Marco Piumi]

Here is the error detail in javascript.

[Pavlina]

Hi,

I can confirm that there is a problem when ConfirmDialogType = "RadWindow" and I can assure you that we are working on fixing it. As a temporary solution until the fix is available you can set ConfirmDialogType to Classic. Please excuse us for the inconvenience caused by this bug.

Regards,
Pavlina
Telerik by Progress

[Simon]

I've just tried the workaround in 2017.3 and it has stopped working. We need a fix for this ASAP, please.

[Pavlina]

Hi Simon,

This bug is fixed as of R1 2017 SP1 release, so if you are using the latest version workaround should not be needed.

Regards,
Pavlina
Progress Telerik