[Solved] Ajax loading page with RadGrid Webserivce

[Adek]

Hi
I have page with RadGrid WebSrvice but when I added Ajax Loading and Grid didn't bind...
When I don't have Grid with WebService is ok:)

MasterPage

<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release" EnablePageMethods="true">

<Scripts>

<asp:ScriptReference Path="WebUserControl/Raport/AdvancedForm.js" />

<asp:ScriptReference Path="~/JScript.js" />

</Scripts>

</asp:ScriptManager>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function pageLoad(sender, eventArgs) {

if (!eventArgs.get_isPartialLoad()) {

$find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");

}

}

</script>

</telerik:RadScriptBlock>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="vista"

EnableEmbeddedSkins="false">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" ClientEvents-OnRequestStart="OnRequestStart"

OnAjaxRequest="RadAjaxManager1_AjaxRequest" UpdatePanelsRenderMode="Inline" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadScheduler1" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="Panel2" LoadingPanelID="RadAjaxLoadingPanel3" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" Height="175px"

Width="175px" Transparency="0">

<img alt="Loading..." style="border: 0;" id="progress" runat="server" />

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel3" runat="server" Height="75px"

Width="75px" Transparency="0">

<img alt="Loading..." src="LoadingProgressBar.gif" style="border: 0;" />

</telerik:RadAjaxLoadingPanel>

<div id="divStrona" style="display: none;" runat="server">

<telerik:RadSplitter ID="rsTresc" runat="server" Skin="Vista" Orientation="Vertical"

Width="100%" EnableEmbeddedSkins="false" Height="100%" OnClientLoaded="OnClientLoaded">

<telerik:RadPane ID="rpSzukaj" runat="server" Collapsed="False">

<asp:ContentPlaceHolder ID="cphTresc" runat="server">

</asp:ContentPlaceHolder>

</telerik:RadPane>

<telerik:RadSplitBar ID="rsbTrescKalendarz" runat="server" Visible="true" CollapseMode="Forward"

Height="100%" />

<telerik:RadPane ID="rpKalendarz" runat="server" Height="100%">

<telerik:RadScheduler ID="RadScheduler1" runat="server" Width="100%" DataKeyField="idraport"

DataStartField="raportdatastart" DataEndField="raportdatakoniec" DataSubjectField="opis"

Skin="Office2007" Height="400px" ShowFooter="false" RowHeaderWidth="52" CustomAttributeNames="Due, Priority"

OverflowBehavior="Scroll">

<WebServiceSettings Path="SchedulerWebService.asmx" ResourcePopulationMode="ServerSide" />

</telerik:RadScheduler>

</telerik:RadPane>

</telerik:RadSplitter> </div>

MasterPage.cs

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument == "RebindScheduler")
        {
            RadScheduler1.Rebind();
        }
        if (e.Argument == "InitialPageLoad")
        {
            //simulate longer page load
            //System.Threading.Thread.Sleep(5000);

            //divPanel.Attributes["style"] = "";
            //divTresc.Attributes["style"] = "";
            divStrona.Attributes["style"] = "";
        }
    }

Page.aspx:

telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">
            function pageLoad(sender, args) {
                PageMethods.GetData(updateGrid);
            }

            function gridCommand(sender, args) {

            }

            function updateGrid(result) {
                var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
                tableView.set_dataSource(result);
                tableView.dataBind();
            }

            function categoryFetched(category, item) {
                item.get_cell("CategoryID").innerHTML = category.Name;
            }
            function rowDataBound(sender, args) {
                //to jest po to aby dzialaly GridTemplateColumn gdy jest webservice
                var label = args.get_item().findControl("ID"); // find control
                if (label != null) {
                    label.set_value(args.get_dataItem()["ID"]);
                }
            }
        </script>

    </telerik:RadCodeBlock>

 <telerik:RadGrid ID="RadGrid1" runat="server" Skin="Vista" Width="800px" PageSize="200"
        AutoGenerateColumns="false" EnableViewState="false" OnRowDrop="RadGrid1_RowDrop">
        <MasterTableView DataKeyNames="ID" ClientDataKeyNames="ID">
            <Columns>
                <telerik:GridTemplateColumn HeaderText="ID" Display="false" >
                    <ItemTemplate>
                       <asp:Label ID="ID" runat="server" />
                    </ItemTemplate>
                </telerik:GridTemplateColumn>
                <telerik:GridBoundColumn DataField="Imie" HeaderText="Imie">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Nazwisko" HeaderText="Nazwisko">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Specjalizacja" HeaderText="Specjalizacja">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="Status" HeaderText="Status">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowRowsDragDrop="true">
            <%--<DataBinding Location="MyService.asmx" SelectMethod="GetData" SelectCountMethod="GetCount">
                </DataBinding>--%>
            <ClientEvents OnRowDataBound="rowDataBound" OnCommand="gridCommand" />
            <Selecting AllowRowSelect="true" />
            <ClientEvents OnRowDropping="rowDropping" OnRowDragStarted="PobierzKlienta" />
        </ClientSettings>
    </telerik:RadGrid>

Please help :)

[Iana Tsolova]

Hello daw,

Could you please elaborate a bit on your scenario and the functionality you are trying to achieve?

I suggest that you check out this online demo on how to show loading panel over client-side bound grid.
Give it a try and let me know how it goes.

Best wishes,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Adek]

ok but I want making Ajax loading when page is loading but it is'n working with RadGrid WebService

I usually get this exapmle:

http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpaneloninitialpageload.html

[Iana Tsolova]

Hello daw,

The approach show in this help topic is more applicable for server-side bound grid.
The best solution for showing loading over the client-side bound grid is shown in the previously mentioned online demo. Could you please confirm it is not suitable for you?

Best wishes,
Iana
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Adek]

ok I have idea add
$find('<%= Master.FindControl("RadAjaxLoadingPanel2").ClientID %>').show('<%= Master.FindControl("Panel1").ClientID %>');
in pageLoad
and after data bind:
$find('<%= Master.FindControl("RadAjaxLoadingPanel2").ClientID %>').hide('<%= Master.FindControl("Panel1").ClientID %>');
and is ok:)