Performance Edit Pop Up

[Steve Todd]

Hi Guys

I've hit a major issue with the performance of the edit popup on a grid. I am editing 2 RadComboBox and 7 RadTimePicker controls. In IE 7 (maybe in other versions of IE)  this popup takes 30 seconds to load, whereas in Google Chrome and Firefox it takes 5 seconds. I am happy with the Google Chrome and Firefox load times, however as a majority of clients use IE 7 I cannot force them to download and use Chrome and I cannot put a system live with a 30 second load time to edit one row of a grid. 

What is Chrome doing to load these controls that IE finds immpossible to do?  Is there a setting in IE 7 that slows the telerik controls down?

Steve

[Georgi Krustev]

Hello Steve,

The difference between the browsers stated below is that they interpret the JavaScript code with different speed due to their different engines.

RadControls for ASP.NET AJAX use JavaScript code to support client-side functionality. Hence in the depicted scenario the FF and Chrome interprets the JavaScript code faster than the IE. The only way to speed up the edit PopUp form is to try to disable the client functionality you do not need or consider migrating to IE 8 which has faster javascript engine.

Please review these online help topics for more info on how to optimize the RadControls overall performance:
http://www.telerik.com/help/aspnet-ajax/optimizing_output_and_page_load_time_by_using_radscriptmanager_and_radstylesheetmanager.html
http://www.telerik.com/products/aspnet-ajax/resources/top-performance.aspx

Kind regards,
Georgi Krustev
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

[Shweta]

Hi, 

Even I am facing this loading time while loading edit pop up page when clicked on edit. I tried using Chrome and Firefox but still facing the issue. Please help me out for the same.

Here is my aspx code for reference:

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <%--Needed for JavaScript IntelliSense in VS2010--%>
            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel runat="server" Skin="Outlook" ID="RadAjaxLoadingPanel1">
        </telerik:RadAjaxLoadingPanel>
     <telerik:RadAjaxPanel ID="RadAjaxPanel1" ClientEvents-OnRequestStart="onRequestStart" runat="server"  LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadGrid RenderMode="Lightweight" Skin="Outlook" ID="RadGrid1" OnDetailTableDataBind="RadGrid1_DetailTableDataBind" OnNeedDataSource="RadGrid1_NeedDataSource"
           AllowMultiRowSelection="true" AllowMultiRowEdit="true"
      OnPreRender="RadGrid1_PreRender" GridClientSelectColumns="true" OnUpdateCommand="RadGrid1_UpdateCommand"  runat="server" AutoGenerateColumns="true" PageSize="10" AllowPaging="True">

            <MasterTableView  EditMode="PopUp" DataKeyNames="TrackID" Name="GetUpdate_Oppty" AllowAutomaticUpdates="true" AllowFilteringByColumn="true" AutoGenerateColumns="false">
                <DetailTables>
                   <telerik:GridTableView DataKeyNames="Tracker" Name="Get_Tagss" >
                   </telerik:GridTableView>
                </DetailTables>

                <Columns>
                    <telerik:GridEditCommandColumn> 
                    </telerik:GridEditCommandColumn> 
                </Columns>

                <EditFormSettings ColumnNumber="2" CaptionFormatString="Update records for TrackID {0}"
                   CaptionDataField="TrackID"> 
                  <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                  <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                  <FormMainTableStyle CellSpacing="0" CellPadding="3" Width="100%" />
                  <FormTableStyle  CellSpacing="0" CellPadding="2" CssClass="module"
                    Height="110px" Width="100%" />
                  <FormTableAlternatingItemStyle Wrap="true"></FormTableAlternatingItemStyle>
                  <FormStyle Width="100%" BackColor="white"></FormStyle>
                  <EditColumn UpdateText="Update"  CancelText="Cancel" >
                  </EditColumn>
                  <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
               </EditFormSettings>

                <Columns>
                    <telerik:GridBoundColumn SortExpression="TrackID" HeaderText="TrackID" HeaderButtonType="TextButton"
                        DataField="TrackID">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="Oppty_Name" HeaderText="Oppty Name" HeaderButtonType="TextButton"
                        DataField="Oppty_Name" ReadOnly="true">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn SortExpression="Customer_Name" HeaderText="Customer Name" HeaderButtonType="TextButton"
                        DataField="Customer_Name" ReadOnly="true">
                    </telerik:GridBoundColumn>
                      <telerik:GridBoundColumn SortExpression="Partner_Name" HeaderText="Partner Name" HeaderButtonType="TextButton"
                        DataField="Partner_Name" ReadOnly="true">
                    </telerik:GridBoundColumn>
                      <telerik:GridBoundColumn SortExpression="Forecast_amt_USD" HeaderText="Forecast_amt_USD" HeaderButtonType="TextButton"
                        DataField="Forecast_amt_USD">
                    </telerik:GridBoundColumn>
                      <telerik:GridBoundColumn SortExpression="Forecast_Status" HeaderText="Forecast_Status" HeaderButtonType="TextButton"
                        DataField="Forecast_Status">
                    </telerik:GridBoundColumn>
                      <telerik:GridBoundColumn SortExpression="Expected_Closed_Date" HeaderText="Expected_Closed_Date" HeaderButtonType="TextButton"
                        DataField="Expected_Closed_Date" ReadOnly="true">
                    </telerik:GridBoundColumn>
                      <telerik:GridBoundColumn SortExpression="Tags_Count" HeaderText="Tags_Count" HeaderButtonType="TextButton"
                        DataField="Tags_Count" ReadOnly="true">
                    </telerik:GridBoundColumn>
                </Columns>  

        </MasterTableView>
             <ClientSettings EnablePostBackOnRowClick="false">
            <Selecting AllowRowSelect="true" />
        </ClientSettings>
      </telerik:RadGrid>

         </telerik:RadAjaxPanel>
   <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function onRequestStart(sender, args) {
                if (args.get_eventTarget().indexOf("Button") >= 0) {
                    args.set_enableAjax(false);
                }
            }

            function OnRequestStart(sender, args) {
                args.set_enableAjax(false);
            }
        </script>
    </telerik:RadCodeBlock>

 

Thanks,

Shweta

                 

[Vessy]

Hi Shweta,

Using both AjaxManager and AjaxPanel on the page leads to nesting Ajax requests which are cancelling each other, especially when they are updating the same control. That's why this scenario is strongly not recommended and not supported. Can you remove the AjaxPanel wrapping the grid, keeping only the updates of the AjaxManager (or vice versa) and see if the issue persists?

[Shweta]

Hi Vessy,

Thanks for your quick response. 

Now I have removed the AjaxManager and only using the AjaxPanel but facing the load time when clicked on Edit .

Below is my aspx code and cs code as well.

 <telerik:RadAjaxPanel ID="RadAjaxPanel1" EnableAJAX="false" ClientEvents-OnRequestStart="onRequestStart" runat="server"  LoadingPanelID="RadAjaxLoadingPanel1">
        <telerik:RadGrid RenderMode="Auto" Skin="Outlook" ID="RadGrid1" OnDetailTableDataBind="RadGrid1_DetailTableDataBind" OnNeedDataSource="RadGrid1_NeedDataSource"
           AllowMultiRowSelection="true" AllowMultiRowEdit="true" OnItemCreated="RadGrid1_ItemCreated"
      OnPreRender="RadGrid1_PreRender"  OnUpdateCommand="RadGrid1_UpdateCommand"  runat="server" AutoGenerateColumns="true" PageSize="10" AllowPaging="True">

            <MasterTableView DataKeyNames="TrackID" Name="GetUpdate_Oppty" AllowAutomaticUpdates="true" AllowFilteringByColumn="true" AutoGenerateColumns="false">
                <DetailTables>
                   <telerik:GridTableView DataKeyNames="Tracker" Name="Get_Tagss" >
                   </telerik:GridTableView>
                </DetailTables>

               <Columns>  <telerik:GridEditCommandColumn UniqueName="EditColumn"> 
                </telerik:GridEditCommandColumn> </Columns>


             <EditFormSettings ColumnNumber="2" CaptionFormatString="Update records for TrackID {0}"
                   CaptionDataField="TrackID"> 
                  <FormTableItemStyle Wrap="False"></FormTableItemStyle>
                  <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle>
                  <FormMainTableStyle CellSpacing="0" CellPadding="3" Width="100%" />
                  <FormTableStyle  CellSpacing="0" CellPadding="2" CssClass="module"
                    Height="110px" Width="100%" />
                  <FormTableAlternatingItemStyle Wrap="true"></FormTableAlternatingItemStyle>
                  <FormStyle Width="100%" BackColor="white"></FormStyle>
                  <EditColumn UpdateText="Update"  CancelText="Cancel" >
                  </EditColumn>
                  <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle>
               </EditFormSettings>
                <ExpandCollapseColumn Visible="False">  
                    <HeaderStyle Width="19px"></HeaderStyle> 
                </ExpandCollapseColumn> 
                <RowIndicatorColumn Visible="False">  
                    <HeaderStyle Width="20px" /> 
                </RowIndicatorColumn> 


             <Columns> 
                    <telerik:GridBoundColumn DataField="TrackID" HeaderText="TrackID" UniqueName="TrackID" >  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="Oppty_Name" HeaderText="Oppty_Name" UniqueName="Oppty_Name" ReadOnly="True">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="Customer_Name" HeaderText="Customer_Name" UniqueName="Customer_Name" ReadOnly="True">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="Partner_Name" HeaderText="Partner_Name" UniqueName="Partner_Name" ReadOnly="True">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="Forecast_amt_USD" HeaderText="Forecast_amt_USD" UniqueName="Forecast_amt_USD">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="Forecast_Status" HeaderText="Forecast_Status" UniqueName="Forecast_Status">  
                    </telerik:GridBoundColumn> 
                  <telerik:GridBoundColumn DataField="Expected_Closed_Date" HeaderText="Expected_Closed_Date" UniqueName="Expected_Closed_Date">  
                    </telerik:GridBoundColumn>
                  <telerik:GridBoundColumn DataField="Tags_Count" HeaderText="Tags_Count" UniqueName="Tags_Count" ReadOnly="True"> 
                    </telerik:GridBoundColumn>
             </Columns>

        </MasterTableView>
              <ClientSettings AllowColumnsReorder="true" AllowColumnHide="true" AllowDragToGroup="true">
                <Selecting AllowRowSelect="true" />
                <Scrolling AllowScroll="true" UseStaticHeaders="true" />
            </ClientSettings>
      </telerik:RadGrid>

         </telerik:RadAjaxPanel>
   <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function onRequestStart(sender, args) {
                if (args.get_eventTarget().indexOf("Button") >= 0) {
                    args.set_enableAjax(false);
                }
            }   
        </script>
    </telerik:RadCodeBlock>

 

CS: (Update Function)

  protected void RadGrid1_UpdateCommand(object source, GridCommandEventArgs e)
    {

        //Get the GridEditableItem of the RadGrid 
        GridEditableItem editItem = e.Item as GridEditableItem;
        
        //Get the primary key value using the DataKeyValue. 
        string TrackID = editItem.OwnerTableView.DataKeyValues[editItem.ItemIndex]["TrackID"].ToString();
        //Access the textbox from the edit form template and store the values in string variables. 
        string Forecast_amt_USD = (editItem["Forecast_amt_USD"].Controls[0] as TextBox).Text;

        string Forecast_Status = (editItem["Forecast_Status"].Controls[0] as TextBox).Text;

      //  string Expected_Closed_Date = (editItem["Expected_Closed_Date"].Controls[0] as TextBox).Text;
      


        try
        {
            //Open the SqlConnection 
            conn.Open();
            //Update Stored Procedure to update the Datatable  
            SqlCommand cmd = new SqlCommand("Update_Oppty", conn);
            cmd.CommandType = CommandType.StoredProcedure;
            cmd.Parameters.AddWithValue("@Forecast_amt_USD", Forecast_amt_USD);
            cmd.Parameters.AddWithValue("@Forecast_Status", Forecast_Status);
          //  cmd.Parameters.AddWithValue("@Expected_Closed_Date", Expected_Closed_Date);
            cmd.Parameters.AddWithValue("@TrackID", TrackID);

            cmd.ExecuteNonQuery();

            //Close the SqlConnection 
            conn.Close();


        }
        catch (Exception ex)
        {
            RadGrid1.Controls.Add(new LiteralControl("Unable to update records. Reason: " + ex.Message));
            e.Canceled = true;
        }
    }

 

                                                               

[Vessy]

Shweta, can you please elaborate on the exact issue that you are facing with the provided setup? I tested it but it behaves properly at my end. Can you send me a runnable project (including some test data) containing the whole setup needed to replicate the issue? A short video demonstrating the exact issue will be also very helpful.

[Shweta]

Hi Vessy,

I have a RadGrid displaying on my page and I want to perform insert and update on it. I am using the GridEditCommandColumn for that purpose. My only concern is when I click on the edit or add record, the popup takes more than 20 seconds to open up which should not happen. The radgrid is doing the updation and insertion operations, its just that takes time to load the pop up window else everything is working fine.

I am attaching a screenshot of the radgrid and pasting the aspx and cs code below. 

ASPX :

 <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    <div>
        <telerik:RadGrid ID="RadGrid2"  runat="server"  RenderMode="Lightweight"
            GridLines="None" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False" 
            Width="97%" OnNeedDataSource="RadGrid1_NeedDataSource" OnDeleteCommand="RadGrid1_DeleteCommand" OnInsertCommand="RadGrid1_InsertCommand" OnUpdateCommand="RadGrid1_UpdateCommand" EnableAJAX="True"  > 
            <PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>
             <MasterTableView EditMode="PopUp" DataKeyNames="TrackID" GridLines="None" Width="100%" CommandItemDisplay ="Top" >
                   <Columns> 
                    <telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="Delete">  
                    </telerik:GridButtonColumn> 
                    <telerik:GridBoundColumn DataField="TrackID" HeaderText="TrackID" UniqueName="TrackID" ReadOnly="false">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="Oppty_Name" HeaderText="Oppty_Name" UniqueName="Oppty_Name" ReadOnly="true">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="Customer_Name" HeaderText="Customer_Name" UniqueName="Customer_Name"  ReadOnly="true">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="Partner_Name" HeaderText="Partner_Name" UniqueName="Partner_Name"  ReadOnly="true">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="Forecast_amt_USD" HeaderText="Forecast_amt_USD" UniqueName="Forecast_amt_USD">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridBoundColumn DataField="Forecast_Status" HeaderText="Forecast_Status" UniqueName="Forecast_Status">  
                    </telerik:GridBoundColumn> 
                         <telerik:GridBoundColumn DataField="Expected_Closed_Date" HeaderText="Expected_Closed_Date" UniqueName="Expected_Closed_Date"  ReadOnly="true">  
                    </telerik:GridBoundColumn> 
                         <telerik:GridBoundColumn DataField="Tags_Count" HeaderText="Tags_Count" UniqueName="Tags_Count"  ReadOnly="true">  
                    </telerik:GridBoundColumn> 
                    <telerik:GridEditCommandColumn> 
                    </telerik:GridEditCommandColumn> 
                </Columns> 
                <EditFormSettings ColumnNumber="2" CaptionFormatString="Edit details for employee with ID {0}" 
                    CaptionDataField="TrackID">  
                    <FormTableItemStyle Wrap="False"></FormTableItemStyle> 
                    <FormCaptionStyle CssClass="EditFormHeader"></FormCaptionStyle> 
                    <FormMainTableStyle CellSpacing="0" CellPadding="3" Width="100%" /> 
                    <FormTableStyle GridLines="Horizontal" CellSpacing="0" CellPadding="2" CssClass="module" 
                        Height="110px" Width="100%" /> 
                    <FormTableAlternatingItemStyle Wrap="False"></FormTableAlternatingItemStyle> 
                    <FormStyle Width="100%" BackColor="#EEF2EA"></FormStyle> 
                    <EditColumn UpdateText="Update record" UniqueName="EditCommandColumn1" CancelText="Cancel edit">  
                    </EditColumn> 
                    <FormTableButtonRowStyle HorizontalAlign="Right" CssClass="EditFormButtonRow"></FormTableButtonRowStyle> 
                </EditFormSettings> 
                <ExpandCollapseColumn Visible="False">  
                    <HeaderStyle Width="19px"></HeaderStyle> 
                </ExpandCollapseColumn> 
                <RowIndicatorColumn Visible="False">  
                    <HeaderStyle Width="20px" /> 
                </RowIndicatorColumn> 
            </MasterTableView> 
       </telerik:RadGrid>

    </div>
    </form>

CS:

public partial class Default : System.Web.UI.Page 
{
    //Declare a global DataTable dtTable    
    public static DataTable dtTable;
    //Get the connectionstring from the webconfig and declare a global SqlConnection "SqlConnection"    
    public static string connectionString = ConfigurationManager.ConnectionStrings["COMSEntities"].ConnectionString;
    public SqlConnection SqlConnection = new SqlConnection(connectionString);
    //Declare a global SqlDataAdapter SqlDataAdapter    
    public SqlDataAdapter SqlDataAdapter = new SqlDataAdapter();
    //Declare a global SqlCommand SqlCommand    
    public SqlCommand SqlCommand = new SqlCommand();

    protected void RadGrid1_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
    {
        //Populate the Radgrid    
        dtTable = new DataTable();
        //Open the SqlConnection    
        SqlConnection.Open();
        try
        {
            //Select Query to populate the RadGrid with data from table Employees.    
            string selectQuery = "SELECT * FROM coms_opportunities";
            SqlDataAdapter.SelectCommand = new SqlCommand(selectQuery, SqlConnection);
            SqlDataAdapter.Fill(dtTable);
            RadGrid2.DataSource = dtTable;
        }
        finally
        {
            //Close the SqlConnection    
            SqlConnection.Close();
        }

    }

    protected void RadGrid1_DeleteCommand(object source,GridCommandEventArgs e)
    {
        //Get the GridDataItem of the RadGrid    
        GridDataItem item = (GridDataItem)e.Item;
        //Get the primary key value using the DataKeyValue.    
        string TrackID = item.OwnerTableView.DataKeyValues[item.ItemIndex]["TrackID"].ToString();
        try
        {
            //Open the SqlConnection    
            SqlConnection.Open();
            string deleteQuery = "DELETE from coms_opportunities where TrackID='" + TrackID + "'";
            SqlCommand.CommandText = deleteQuery;
            SqlCommand.Connection = SqlConnection;
            SqlCommand.ExecuteNonQuery();
            //Close the SqlConnection    
            SqlConnection.Close();

        }
        catch (Exception ex)
        {
            RadGrid2.Controls.Add(new LiteralControl("Unable to delete Employee. Reason: " + ex.Message));
            e.Canceled = true;
        }

    }

    protected void RadGrid1_UpdateCommand(object source,GridCommandEventArgs e)
    {
        //Get the GridEditableItem of the RadGrid    
        GridEditableItem editedItem = e.Item as GridEditableItem;
        //Get the primary key value using the DataKeyValue.    
        string TrackID = editedItem.OwnerTableView.DataKeyValues[editedItem.ItemIndex]["TrackID"].ToString();
        //Access the textbox from the edit form template and store the values in string variables.    
        string Forecast_amt_USD = (editedItem["Forecast_amt_USD"].Controls[0] as TextBox).Text;
        string Forecast_Status = (editedItem["Forecast_Status"].Controls[0] as TextBox).Text;
        //string Title = (editedItem["Title"].Controls[0] as TextBox).Text;
        //string Address = (editedItem["Address"].Controls[0] as TextBox).Text;
       // string City = (editedItem["City"].Controls[0] as TextBox).Text;

        try
        {
            //Open the SqlConnection    
            SqlConnection.Open();
            //Update Query to update the Datatable     
            string updateQuery = "UPDATE coms_opportunities set Forecast_amt_USD='" + Forecast_amt_USD + "',Forecast_Status='" + Forecast_Status + "'  where TrackID='" + TrackID + "'";
            SqlCommand.CommandText = updateQuery;
            SqlCommand.Connection = SqlConnection;
            SqlCommand.ExecuteNonQuery();
            //Close the SqlConnection    
            SqlConnection.Close();


        }
        catch (Exception ex)
        {
            RadGrid2.Controls.Add(new LiteralControl("Unable to update Employee. Reason: " + ex.Message));
            e.Canceled = true;
        }

    }

    protected void RadGrid1_InsertCommand(object source, GridCommandEventArgs e)
    {
        //Get the GridEditFormInsertItem of the RadGrid    
        GridEditFormInsertItem insertedItem = (GridEditFormInsertItem)e.Item;

        //string EmployeeID = (insertedItem["EmployeeID"].Controls[0] as TextBox).Text;  

        string Oppty_Name = (insertedItem["Oppty_Name"].Controls[0] as TextBox).Text;
        string Customer_Name = (insertedItem["Customer_Name"].Controls[0] as TextBox).Text;
        string Forecast_amt_USD = (insertedItem["Forecast_amt_USD"].Controls[0] as TextBox).Text;
        string Forecast_Status = (insertedItem["Forecast_Status"].Controls[0] as TextBox).Text;
        string Expected_Closed_Date = (insertedItem["Expected_Closed_Date"].Controls[0] as TextBox).Text;
        string Tags_Count = (insertedItem["Tags_Count"].Controls[0] as TextBox).Text;

        try
        {
            //Open the SqlConnection    
            SqlConnection.Open();
            //Update Query to insert into  the database     
            string insertQuery = "INSERT into  coms_opportunities(Oppty_Name,Customer_Name,Forecast_amt_USD,Forecast_Status,Expected_Closed_Date,Tags_Count) values('" + Oppty_Name + "','" + Customer_Name + "','" + Forecast_amt_USD + "','" + Forecast_Status + "','" + Expected_Closed_Date + "', '" + Tags_Count + "')";
            SqlCommand.CommandText = insertQuery;
            SqlCommand.Connection = SqlConnection;
            SqlCommand.ExecuteNonQuery();
            //Close the SqlConnection    
            SqlConnection.Close();


        }
        catch (Exception ex)
        {
            RadGrid2.Controls.Add(new LiteralControl("Unable to insert Employee. Reason: " + ex.Message));
            e.Canceled = true;
        }

    }
}

 

Thanks,

Shweta

[Vessy]

Hello Shweta, the performance issue might be related to the data itself. I will advise that you go through the suggestions in the folloing help article and implement the applicable ones in your project:

https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/performance/grid-performance-optimizations 

[Shweta]

Thanks Vessy.

It's working properly now.

[Vessy]

You are welcome, Shweta, I am glad to hear that!

[Steve Todd]

Thanks for the reply, I started to tear the page apart to see what was causing the problem. I had put the whole page into a loading panel for numerous reasons e.g. when editing or inserting a grid row using the Pop-up method only the grid is covered by the loading panel leaving a portion of the edit form visible to be typed into while the grid is being updated or the edit form is round tripping and redrawing itself.

When I removed the loading panel the times improved dramtically in IE. Why would the loading panel have such a drastic affect on the page in IE and not in Chrome .. this can't be just down to the javascript that is generated by the popup form? I did notice the RadAjaxLoadingPanel.GetWebResourceUrl line is called a lot of times. 

The main issue here I think is that I have put a loading panel on the whole page causing the lag to happen,if you can suggest a way of applying the loading panel to the grid and its pop-up edit form that could resolve my issue.

Steve

[Georgi Krustev]

Hello Steve,

The RadAjaxLoadingPanel.GetWebResourceUrl method returns the image resource. If the RadAjaxLoadingPanel is going to show itself numerous times on the page, it will call this line of code.

As I explained, the RadControls use JavaScript code to support client-side functionality. Hence the Javascript code which is needed to enable the client functionality, not only the RadAjaxLoadingPanel and Pop-up panel, is executed faster in FF and Chrome than in IE7.

For your convenience I attached a test project which shows how to ajaxify the grid and the popup edit form and how to show the RadAjaxLoadingPanel over the RadGrid.

Best regards,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Steve Todd]

Hi Georgi

Thanks for the quick reply, sadly the project you sent doesn't completely run. I ge the grid appearring but when I click the edit link the projects fails in the following function. The UpdatePanel is shown but it only covers part of the grid. I would appreciate it greatly if you could get me an example where the whole page is covered by a panel. 

 Sys.Net.XMLHttpExecutor = function Sys$Net$XMLHttpExecutor() 

trying to execute the following line

            _this._clearTimer();

            _this._responseAvailable = true;

            try {

                _this._webRequest.completed(Sys.EventArgs.Empty);

            }

            finally {

                if (_this._xmlHttpRequest != null) {

                    _this._xmlHttpRequest.onreadystatechange = Function.emptyMethod;

                    _this._xmlHttpRequest = null;

                }

            }

Iunderstand what you are saying regarding the javascript executing faster in non microsft browser.   

[Georgi Krustev]

Hello Steve,

I am sorry for not providing completely running project. The missing file is added to the solution.
May I ask you what exactly do you have in mind with this statement: "the whole page is covered by a panel"?
In the test project I have centered the RadAjaxLoadingPanel to the page. Thus if other controls use the same RadAjaxLoadingPanel, it will be shown on the center on the page. For further information you can refer to this online help article.

Please find the attached project and examine it.

Kind regards,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Steve Todd]

Hi Georgi

Thanks for the full project, I'll give that a spin.

By the statement "The whole page is covered by the panel" I'll explain a little further;

• I have a grid which will show approximately 10 columns. 
• It has Insert and Edit row options available to the enduser. 
• The EditMode is set to Popup.

Also on the page are a number of other controls, buttons, labels etc which appear below and above the grid.

When I edit or insert a row on the grid the popup appears allowing the 10 columns to be edited in a vertical style hoverring over the page (I have centered this via some script found on this forum) as expected. Whilst waiting for the popup to appear, the loading panel hides the grid and the loading icon appears, as I have set this in the RadAjaxManager.

Now the problem ... When I have finished editing the columns in the popup window, I click Update/Insert link, the loading panel hides the grid and the loading icon appears, however, part of the popup (depending on home many rows have been entered on the grid) still remains visible, plus other controls on the page remain visible allowing the user to randomly click controls whilst waiting for the grid to finish its save and remove the loading panel. 

The solution ... If i can cover the whole browser page with the loading panel whilst the grid is saving I can avoid click happy users causing havoc.

Steve

[Georgi Krustev]

Hello Steve,

The easiest way to achieve your goal is to apply a CSS class which will prohibit the user interaction.
Here is a code snippet which shows how to achieve this:

CSS:

    <style type="text/css">
        .modalBackground {
            background-color:#000;
            filter:alpha(opacity=80);
            opacity:0.8;
            }
    </style>

ASPX:

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
        Width="75px">
        <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
            style="border: 0px;" class="modalBackground"/>
    </telerik:RadAjaxLoadingPanel>

Kind regards,
Georgi Krustev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Steve Todd]

I've resolved my performance problem, due to the number of timepickers on the rid (14 in all) I pointed them all to a SharedTimeViewID which improved performance drammactically. However, one of the timepickers has to have a timeview otherwise none of the icons appear - very odd behaviour.

Steve