Problem with ClientSettings

[Aaron]

I am having an issue with the following 2 ClientSettings on the RadGrid:

EnablePostBackOnRowClick

 and

EnableRowHoverStyle

.
I am using the code to do a LatePanel on the radgrid so that the page loads and then the radgrid can go out and bind the datasource. This is to give the customer the idea that something is actually loading.
This is working great. My problem occurs on initial page load and the 2 settings above are set to true. After the Grid is populated the grid does not respond to clicks nor does the hoverstyle appear on the rows. However if I then click on the hader column to do a sort or use the filter box and then the grid refreshes...both the row clicking and hoverstyle are enabled.

If I remove the latepanel code the grid functions normally meaning it does the row selecting and hoverstyle right at the get go.

The latepanel code is the exact same that is used in various forum queries found here.

Has anyone run into this issue and know of a way to get these to functions to work?

datagrid code:

<telerik:RadAjaxPanel ID="LatePanel" runat="server" width="100%" height="300px"
                scrollbars="vertical"  >
                <telerik:RadGrid ID="rgOustandingInv" runat="server"
                    OnNeedDataSource="rgOustandingInv_NeedDataSource" EnableViewState="true"
                    OnItemCommand="rgOustandingInv_ItemCommand" AllowFilteringByColumn="True" AllowSorting="True"
                    PageSize="10" AllowPaging="True" EnableNoRecordsTemplate="true">

                    <MasterTableView Width="100%" CommandItemDisplay="Top" CommandItemSettings-ShowAddNewRecordButton="false" CommandItemSettings-ShowRefreshButton="false"
                    AutoGenerateColumns="false" AllowFilteringByColumn="True" TableLayout="Auto" >
                        <PagerStyle Mode="NextPrevNumericAndAdvanced" />
                        <CommandItemSettings ShowExportToWordButton="true" ShowExportToExcelButton="true"
                            ShowExportToCsvButton="true" />
                        <Columns>

                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="invoiceNo" HeaderText="Invoice No" SortExpression="invoiceNo"
                        UniqueName="invoiceNo" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="amount" HeaderText="Amount" SortExpression="amount"
                        UniqueName="amount" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="status" HeaderText="Invoice / Payment Status" SortExpression="status"
                        UniqueName="status" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridDateTimeColumn FilterControlWidth="105px" DataField="schedPayDate" HeaderText="Scheduled Date of Payment" SortExpression="schedPayDate"
                        UniqueName="schedPayDate" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="contractId" HeaderText="Contract" SortExpression="contractId"
                        UniqueName="contractId" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="contractRelease" HeaderText="contractRelease" SortExpression="contractRelease"
                        UniqueName="contractRelease" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" Visible="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="poNo" HeaderText="PO" SortExpression="poNo"
                        UniqueName="poNbr" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="poRelease" HeaderText="poRelease" SortExpression="poRelease"
                        UniqueName="poRelease" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" Visible="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="poRevision" HeaderText="PO" SortExpression="poRevision"
                        UniqueName="poRevision" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" Visible="false"/>

                        </Columns>
                        <NoRecordsTemplate>
                            <div>There are no records to display</div>
                        </NoRecordsTemplate>

                    </MasterTableView>
                    <ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" />
                </telerik:RadGrid>
            </telerik:RadAjaxPanel>

[Marin]

Hello Aaron,

I was not able to reproduce the issue on a standard aspx page, does your scenario involve master/content pages? If so you can have a look at this forum thread on similar problem and also more information on using RadAjax may be found here.

Let me know how this works for you and if you have any other questions.

Sincerely yours,
Marin
the Telerik team

[Aaron]

I am using a Master/content pages. However the ajax is working fine if I don't have the code to delay the load of the grid. So I am just wondering if the delayed loading of the grid is causing the issue
Here is a copy of my master and the content page in question.

I have everything that I can think of in the code.

Thanks for any help.

Master.aspx

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="View.master.cs" Inherits="VIEW.View" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <link rel="stylesheet" href="Includes/main.css" type="text/css" />
    <asp:ContentPlaceHolder ID="cphHead" runat="server">
        <title>VIEW</title>
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">

    <telerik:RadScriptManager ID="rsm" runat="server"/>
    <telerik:RadFormDecorator ID="rfd" runat="server" DecoratedControls="All"  />
    <asp:ContentPlaceHolder ID="cphRAM" runat = "server">
        <telerik:RadAjaxManager ID="ram" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" />
    </asp:ContentPlaceHolder>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="5" EnableSkinTransparency="false">
        <label>Loading...</label>
    </telerik:RadAjaxLoadingPanel>


    <div>

        <div class="divDefTitle">
            <asp:Image ID="imgINL" runat="server" ImageUrl="~/Images/inl.jpg" />
            <center>
            <asp:ContentPlaceHolder ID="cphTitleLabel" runat="server">
                <asp:Label ID="lblTitle" runat="server" Text="VIEW"></asp:Label>
            </asp:ContentPlaceHolder>
            <br />
            <br />
            </center>
        </div>

    </div>

    <div>
        <asp:ContentPlaceHolder ID="cphMenu" runat="server">
            <menu:mainMenu ID="menu1" runat="server" />
        </asp:ContentPlaceHolder>
        <br />
        <br />
    </div>
    <div>
        <asp:ContentPlaceHolder ID="cphMain" runat="server" />
    </div>

    </form>
</body>
</html>

Master.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Telerik.Web.UI;

namespace VIEW
{
    public partial class View : System.Web.UI.MasterPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }
    }
}

Content.aspx

<%@ Page Language="C#" MasterPageFile="~/View.master" AutoEventWireup="true" CodeBehind="outstandingInv.aspx.cs" Inherits="VIEW.outstandingInv" %>

<asp:Content ID="cHead" ContentPlaceHolderID="cphHead" Runat="Server">
    <title>Outstanding Invoices</title>
</asp:Content>
<asp:Content ID="cTitle" ContentPlaceHolderID="cphTitleLabel" Runat="Server">
    <asp:Label ID="lblTitle" runat="server" Text="Outstanding Invoices"></asp:Label>
</asp:Content>

<asp:Content ID="cMain" ContentPlaceHolderID="cphMain" Runat="Server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">
            function onRequestStart(sender, args)
            {
                if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0 ||
                        args.get_eventTarget().indexOf("ExportToWordButton") >= 0 ||
                        args.get_eventTarget().indexOf("ExportToCsvButton") >= 0)
                {
                    args.set_enableAjax(false);
                }

            }

            var isInitialLoad = true;

            function pageLoad(sender, args)
            {
                if (isInitialLoad)
                {
                    isInitialLoad = false;

                    setTimeout(function()
                    {
                        var manager = $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>');
                        manager.ajaxRequest("RebindLatePanel");
                    }, 1000);
                }
            }
        </script>
    </telerik:RadCodeBlock>




    <div>
        <center>
            <vid:mainDisplay id="vid1" runat="server" visible="false"/>
        </center>
    </div>
    <br />
    <br />
    <div>
        <center>
            <telerik:RadAjaxPanel ID="LatePanel" runat="server" width="100%" height="300px"
                scrollbars="vertical"  >
                <telerik:RadGrid ID="rgOustandingInv" runat="server"
                    OnNeedDataSource="rgOustandingInv_NeedDataSource" EnableViewState="true"
                    OnItemCommand="rgOustandingInv_ItemCommand" AllowFilteringByColumn="True" AllowSorting="True"
                    PageSize="10" AllowPaging="True" EnableNoRecordsTemplate="true">

                    <MasterTableView Width="100%" CommandItemDisplay="Top" CommandItemSettings-ShowAddNewRecordButton="false" CommandItemSettings-ShowRefreshButton="false"
                    AutoGenerateColumns="false" AllowFilteringByColumn="True" TableLayout="Auto" >
                        <PagerStyle Mode="NextPrevNumericAndAdvanced" />
                        <CommandItemSettings ShowExportToWordButton="true" ShowExportToExcelButton="true"
                            ShowExportToCsvButton="true" />
                        <Columns>

                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="invoiceNo" HeaderText="Invoice No" SortExpression="invoiceNo"
                        UniqueName="invoiceNo" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="amount" HeaderText="Amount" SortExpression="amount"
                        UniqueName="amount" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="status" HeaderText="Invoice / Payment Status" SortExpression="status"
                        UniqueName="status" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridDateTimeColumn FilterControlWidth="105px" DataField="schedPayDate" HeaderText="Scheduled Date of Payment" SortExpression="schedPayDate"
                        UniqueName="schedPayDate" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="contractId" HeaderText="Contract" SortExpression="contractId"
                        UniqueName="contractId" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="contractRelease" HeaderText="contractRelease" SortExpression="contractRelease"
                        UniqueName="contractRelease" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" Visible="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="poNo" HeaderText="PO" SortExpression="poNo"
                        UniqueName="poNbr" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="poRelease" HeaderText="poRelease" SortExpression="poRelease"
                        UniqueName="poRelease" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" Visible="false"/>
                        <telerik:GridBoundColumn FilterControlWidth="105px" DataField="poRevision" HeaderText="PO" SortExpression="poRevision"
                        UniqueName="poRevision" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" ShowFilterIcon="false" Visible="false"/>

                        </Columns>
                        <NoRecordsTemplate>
                            <div>There are no records to display</div>
                        </NoRecordsTemplate>

                    </MasterTableView>
                    <ClientSettings EnablePostBackOnRowClick="true" EnableRowHoverStyle="true" />
                </telerik:RadGrid>
            </telerik:RadAjaxPanel>
        </center>
    </div>

</asp:Content>

content.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using Telerik.Web.UI;

namespace VIEW
{
    public partial class outstandingInv : System.Web.UI.Page
    {
        private RadAjaxManager manager;
        private RadAjaxLoadingPanel loadingPanel;
        protected void Page_Load(object sender, EventArgs e)
        {
            string strUser = User.Identity.Name.ToString();
            strUser = strUser.Substring(strUser.IndexOf(@"\") + 1);
            if (!strUser.Equals("BLYAD"))
                Response.Redirect("Default.aspx");

            if (SessionHandler.VendorCode.Length > 0)
            {
                this.vid1.Visible = true;
            }
            //increase script timeout for this page as the searchinvoice can take some time every once and awhile.
            ScriptManager sman = RadScriptManager.GetCurrent(Page);
            sman.AsyncPostBackTimeout = 1200;

            //To use this control on a page please include a radajaxmanager on the parent page.
            manager = RadAjaxManager.GetCurrent(Page);
            loadingPanel = (RadAjaxLoadingPanel)this.Master.FindControl("RadAjaxLoadingPanel1");

            manager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(manager_AjaxRequest);
            manager.ClientEvents.OnRequestStart = "onRequestStart";
            manager.AjaxSettings.AddAjaxSetting(rgOustandingInv, rgOustandingInv);
            manager.AjaxSettings.AddAjaxSetting(manager, LatePanel, loadingPanel);
            manager.AjaxSettings.AddAjaxSetting(LatePanel, LatePanel, loadingPanel);
        }

        protected void manager_AjaxRequest(object sender, AjaxRequestEventArgs e)
        {
            if (e.Argument == "RebindLatePanel")
            {
                rgOustandingInv.Rebind();
            }
        }

        private void loadGrid()
        {

            if (ViewState["rgOustandingInv"] == null)
            {
                if (SessionHandler.VendorCode.Length > 0)
                {
                    DataTable dt = createDataTable();
                    DataRow row;

                    INLInvoiceWS.INLInvoiceWS iws = new INLInvoiceWS.INLInvoiceWS();
                    INLInvoiceWS.Invoice[] invoices;

                    invoices = iws.searchInvoices(null, null, SessionHandler.VendorCode, SessionHandler.SuffixCode, null, null, null, null, null);



                    if (invoices != null && invoices.Length >= 1)
                    {
                        foreach (INLInvoiceWS.Invoice inv in invoices)
                        {
                            if (!inv.paymentStatus.Equals("PAID"))
                            {
                                row = dt.NewRow();

                                row["invoiceNo"] = inv.invoiceNo;
                                row["amount"] = inv.paymentAmt;
                                row["status"] = inv.invoiceStatus + "/" + inv.paymentStatus;
                                row["schedPayDate"] = inv.paymentDt.Date;
                                row["contractId"] = inv.contractId;
                                row["contractRelease"] = inv.contractRelease;
                                row["poNbr"] = inv.purchaseOrderNbr;
                                row["poRevision"] = inv.poRevisionNbr;
                                row["poRelease"] = inv.poReleaseNbr;

                                dt.Rows.Add(row);
                            }
                        }

                    }
                    ViewState["rgOustandingInv"] = dt;
                }
                rgOustandingInv.DataSource = (DataTable)ViewState["rgOustandingInv"];
            }
            else
            {
                rgOustandingInv.DataSource = (DataTable)ViewState["rgOustandingInv"];
            }
            if (((DataTable)ViewState["rgOustandingInv"]).Rows.Count == 0)
            {
                rgOustandingInv.MasterTableView.AllowFilteringByColumn = false;
            }
        }

        private DataTable createDataTable()
        {
            DataTable myDataTable = new DataTable();

            DataColumn myDataColumn;

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "invoiceNo";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.Double");
            myDataColumn.ColumnName = "amount";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "status";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.DateTime");
            myDataColumn.ColumnName = "schedPayDate";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "contractId";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "contractRelease";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "poNbr";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "poRelease";
            myDataTable.Columns.Add(myDataColumn);

            myDataColumn = new DataColumn();
            myDataColumn.DataType = Type.GetType("System.String");
            myDataColumn.ColumnName = "poRevision";
            myDataTable.Columns.Add(myDataColumn);

            return myDataTable;
        }

        protected void rgOustandingInv_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
        {
            if (Page.IsPostBack)
            {
                loadGrid();
            }
        }

        protected void rgOustandingInv_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
        {
            if (e.CommandName == Telerik.Web.UI.RadGrid.ExportToExcelCommandName ||
                e.CommandName == Telerik.Web.UI.RadGrid.ExportToWordCommandName ||
                e.CommandName == Telerik.Web.UI.RadGrid.ExportToCsvCommandName)
            {
                configureExport();
            }
            if (e.CommandName == "RowClick")
            {
                GridDataItem item = (GridDataItem)e.Item;
                if(item["poNbr"].Text.Equals(" "))
                    SessionHandler.PONbr = "";
                else
                    SessionHandler.PONbr = item["poNbr"].Text;

                if (item["poRelease"].Text.Equals(" "))
                    SessionHandler.PORelease = "";
                else
                    SessionHandler.PORelease = item["poRelease"].Text;

                if (item["poRevision"].Text.Equals(" "))
                    SessionHandler.PORevision = "";
                else
                    SessionHandler.PORevision = item["poRevision"].Text;

                if (item["contractId"].Text.Equals(" "))
                    SessionHandler.ContractId = "";
                else
                    SessionHandler.ContractId = item["contractId"].Text;

                if (item["contractRelease"].Text.Equals(" "))
                    SessionHandler.ContractRelease = "";
                else
                    SessionHandler.ContractRelease = item["contractRelease"].Text;

                Response.Redirect("Default.aspx");
            }
        }

        public void configureExport()
        {
            rgOustandingInv.ExportSettings.ExportOnlyData = true;
            rgOustandingInv.ExportSettings.IgnorePaging = true;
            rgOustandingInv.ExportSettings.OpenInNewWindow = true;
            rgOustandingInv.ExportSettings.FileName = SessionHandler.VendorName + "_" + DateTime.Now.ToShortDateString() + "_Oustanding_Invoices";
        }
    }
}

[Marin]

Hello Aaron,

Thank you for the code sample.

The problem was that you were trying to ajaxify a RadAjaxPanel:

manager.AjaxSettings.AddAjaxSetting(manager, LatePanel, loadingPanel);
manager.AjaxSettings.AddAjaxSetting(LatePanel, LatePanel, loadingPanel);

This is not needed since RadAjaxPanel ajaxifies all controls inside it and works as a standard UpdatePanel. But when you add it in the AjaxSettings for the RadAjaxManager, it is wrapped in another update panel on top of the previous one which is not needed and might cause problems. You can simply use the standard asp panel and ajaxify it with the RadAjaxManager. Thus it will work as expected.
Also I recommend keeping up to date with the latest version of RadControls since lots of issues might have been fixed there.

Let me know how this woks for you and if you have any other questions.

Kind regards,
Marin
the Telerik team