RadGrid Issue in Edge Browser.

[Sachita]

Hi,

I am using .Netframework -4.8

with apppool-4.0 and upgraded telerik controls from Q32015.3.1111.35 to R32020.3.915(BIN 45).

We are performing a sorting , attached screenshot has the details .so once we click on data, source we get a processing window and sort function gets completed.

But after upgrade of telerik controls, when we try to click on data, source ,name tabs after completing sorting also processing window continuously running. 

This issue is observed in Edge Browser with new(2020.3.915) and old Telerik controls(2015.3.1111.35) as well.

Attached errors observed in Console.

Can anyone please help on this issue?

 

 

 

[Doncho]

Could you please clarify whether this issue is only occurring in Edge? Please give it a try in other browsers like Chrome, Firefox.
Also please note that only the current Chromium-based version of Edge is supported with the Telerik AJAX suite, see Browser Support.

[Sachita]

This issue is seen in both IE11,Edge Browser,Chrome as well.

[Sachita]

I have tried by Migrarting RadGrid Classic to RadGrid Ajax suite , but now OnRequestStart and OnRequest End not able to add as it depricated.
Below is my code
<ClientEvents OnRequestStart="PendingRadGridRequestStart" OnRequestEnd="PendingRadGridRequestEnd" OnRowMouseOut="RowMouseOut" OnRowMouseOver="RowMouseOver" OnRowSelected="RowSelected" OnRowSelecting="RowSelecting" />

Tried with below code But no luck,
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="PendingRadGrid" />
</AjaxSettings>
<ClientEvents OnRequestStart="RadGridRequestStart" OnResponseEnd="RadGridRequestEnd" />
</telerik:RadAjaxManager>

Below is my javascript code:
function RadGridRequestStart() {
var grid = $find("<%=RadAjaxManager1.ClientID%>").get_masterTableView();;
ClearSortColumns();
var radWindow = Test.Utilities.WindowUtil.openRADWindow("PendingProcessingWindow", 'Portlets/ConnectTest/Processing.htm');
radWindow.Center();
}

function PendingItemRadGridRequestEnd() {
RestoreSortColumns();
Test.Utilities.WindowUtil.closeRADWindow("PendingProcessingWindow");
if (itemsWithRelatedLocations != '')
ShowLocationsWindow();
}

Can you please help ?

[Doncho]

Hi Kumar,

As the OnRequestStart and OnRequestEnd are not valid client-side events of the RadGrid you can use either RadAjaxManager or RadAjaxPanel to Ajaxify the RadGrid and use their OnRequestStart and OnResponseEnd events to capture the start and the end of the Ajax call. As you have already tried. 

You can find some useful information about using the RadAjax controls in the Understanding AJAX Controls article and the dedicated sections for the components in our documentation.

Here is a sample code demonstrating the usage of RadAjaxManager:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
            <ClientEvents OnRequestStart="requestStart" OnResponseEnd="responseEnd" />
        </telerik:RadAjaxManager>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
            <script>
                function requestStart(sender, args) {
                    var grid = $find('<%= RadGrid1.ClientID %>');
                    var masterTable = grid.get_masterTableView();
                    alert("OnRequestStart fired!\n MasterTable ID: " + masterTable.get_id());
                }
                function responseEnd(sender, args) {
                    var grid = $find('<%= RadGrid1.ClientID %>');
                    var masterTable = grid.get_masterTableView();
                    alert("OnResponseEnd fired!\n MasterTable ID: " + masterTable.get_id());
                }
            </script>
        </telerik:RadCodeBlock>
        <telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">

In the code you have shared I noticed you are getting a reference to the AjaxManager instead of the RadGrid:

var grid = $find("<%=RadAjaxManager1.ClientID%>").get_masterTableView();;

This line of code would get a reference to the control object with ID "RadAjaxManager1"  and try to invoke the get_masterTableView() method which is exposed by the RadGrid API. Instead, you can get a reference to the RadGrid as shown in the sample snippet above.

More about how to get a client-side reference to a control object you can find in our Get Client-side Reference to a Control Object article.

I hope this information will help you get a better understanding and achieve the desired behavior.

Kind regards,
Doncho
Progress Telerik

[Sachita]

Thanks For the Help and Response.It worked.

[Sachita]

Below are the errors:
1. Uncaught TypeError: Cannot read property '[object Object]' of undefined
at Array.ItemRowMouseOver (Shell.aspx?Portlet=ConnectManager:270)
at ScriptResource.axd?)
at Telerik.Web.UI.RadGrid.raiseEvent (ScriptResource.axd?d)
at Telerik.Web.UI.RadGrid.raise_rowMouseOver (ScriptResource.axd?)
at Telerik.Web.UI.RadGrid._mouseover (ScriptResource.axd?
at HTMLDivElement.<anonymous> (ScriptResource.axd?
at HTMLDivElement.browserHandler (ScriptResource.axd?)


Code For RadGrid:
function ItemRowMouseOut(rowIndex) {
this.Rows[rowIndex].Control.style.backgroundColor = "";
}

function ItemRowMouseOver(rowIndex) {
if (this.Rows[rowIndex].Control.className.indexOf("disabled") == -1) {
this.Rows[rowIndex].Control.style.backgroundColor = "#DFDFDF";
this.Rows[rowIndex].Control.style.cursor = "hand";
}
}

function ItemRowSelecting(row) {
if (row.Control.className.indexOf("disabled") != -1)
return false;
}

function ItemRowSelected(row) {
var radWindow = Test.Utilities.WindowUtil.openRADWindow("ItemEditWindow", "Portlets/ConnectTest/Edit.aspx?id=" + row.KeyValues["Guid"]);
radWindow.Restore();

var close = document.getElementById("CloseButton" + radWindow.Id);
close.onclick = CloseRadWindow;
}



Can you please help what is causing issue ?

[Doncho]

Based on the provided code I would assume the javascript functions are client-side event listeners wired to the RadGrid Items (rows). If so, you should have in mind that the arguments passed by default to RadGrid's built-in client events are the client-side control object of the RadGrid and the event arguments for the specific events.

Basic samples of handling some of the client-side events of the Grid you can find in the dedicated articles like OnRowMouseOver and OnRowMouseOut.

I would also suggest you check out the Improve Your Debugging Skills with Chrome DevTools blog post as it shows nice and useful tips that will help you debug the JavaScript code directly in the Browser's DevTools.

Note: Your question is not directly related to the initial topic of this thread, and I would ask you to open a new ticket on each different issue you need assistance with so we can keep the ticket history subject-oriented.