This is a migrated thread and some comments may be shown as answers.

Ajax panel is not working

4 Answers 91 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
ritesh
Top achievements
Rank 1
ritesh asked on 09 Aug 2011, 12:34 PM
Hi,
    I am new to the telerik control. Today i started working on this control. I made a web site page with radgrid control using the dummy database. I used the code given by telerik.com and my page is working fine. The problem i am facing is when ever i am clicking on any control of grid for which page post back is needed. My website page become black and after loading completely it is displaying again with desired data. Means grid is working fine but the ajax control applied on that grid is not working.
    I am using Hierarchy with template grid type. And i might miss some ajax control and image also thats why my ajax panel is not working.
   So please suggest what i have to do to get ajax control working in the web site.

Ritesh

4 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 09 Aug 2011, 12:56 PM
Hello Ritesh.

Check the following demo which implements the similar scenario.Hope this helps.
Ajax / First Look.

Thanks,
Shinu
0
ritesh
Top achievements
Rank 1
answered on 09 Aug 2011, 01:32 PM
Hi,
   My problem is i am not able to get ajax effect. I am not getting what i have to add to get this effect. I saw your link and tried to make some changes but still not getting. One reason is i am not adding ajax loading image but i dont know where to add that image and how to give that path to ajax control panel. So i am not getting ajax effect in my page.
 Below i am pasting my code. plz have a look onto my code


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadGrid.aspx.cs" Inherits="RadGrid" %>


<%@ Register TagPrefix="telerik" Namespace="Telerik.Charting" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!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 id="Head1" runat="server">
    <%--<telerik:HeadTag runat="server" ID="Headtag2">
    </telerik:HeadTag>--%>
    <!-- custom head section -->
    <style type="text/css">
        .viewWrap
        {
            padding: 15px;
            background: #2291b5 0 0 url(Img/bluegradient.gif) repeat-x;
        }
        .contactWrap
        {
            padding: 10px 15px 15px 15px;
            background: #fff;
            color: #333;
        }
        .contactWrap td
        {
            padding: 0 20px 0 0;
        }
        .contactWrap td td
        {
            padding: 3px 20px 3px 0;
        }
        .contactWrap img
        {
            border: 1px solid #05679d;
        }
         .module1
        {
            background-color: #dff3ff;
            border: 1px solid #c6e1f2;
        }
    </style>
    <!-- end of custom head section -->
</head>
<body class="BODY">
    <form runat="server" id="mainForm" method="post">
    <%--<telerik:Header runat="server" ID="Header1" NavigationLanguage="CS">
    </telerik:Header>--%>
    <!-- content start -->
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadGrid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    
    <fieldset class="module1">
    <telerik:RadGrid ID="RadGrid1" OnPreRender="RadGrid1_PreRender" DataSourceID="SqlDataSource1"
        runat="server" AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False"
        AllowPaging="True" PageSize="5" GridLines="None" ShowGroupPanel="true" OnItemCreated="RadGrid1_ItemCreated"
        OnItemCommand="RadGrid1_ItemCommand">
        <PagerStyle Mode="NumericPages"></PagerStyle>
        <MasterTableView DataSourceID="SqlDataSource1" DataKeyNames="EmployeeID" AllowMultiColumnSorting="True"
            GroupLoadMode="Server">
            <NestedViewTemplate>
                <asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap" Visible="false">
                    <telerik:RadTabStrip runat="server" ID="TabStip1" MultiPageID="Multipage1" SelectedIndex="0">
                        <Tabs>
                            <telerik:RadTab runat="server" Text="Sales" PageViewID="PageView1">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Contact Information" PageViewID="PageView2">
                            </telerik:RadTab>
                            <telerik:RadTab runat="server" Text="Statistics Chart" PageViewID="PageView3">
                            </telerik:RadTab>
                        </Tabs>
                    </telerik:RadTabStrip>
                    <telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0" RenderSelectedPageOnly="false">
                        <telerik:RadPageView runat="server" ID="PageView1">
                            <asp:Label ID="Label1" Font-Bold="true" Font-Italic="true" Text='<%# Eval("EmployeeID") %>'
                                Visible="false" runat="server" />
                            <telerik:RadGrid runat="server" ID="OrdersGrid" DataSourceID="SqlDataSource2" ShowFooter="true"
                                AllowSorting="true" EnableLinqExpressions="false">
                                <MasterTableView ShowHeader="true" AutoGenerateColumns="False" AllowPaging="true"
                                    DataKeyNames="OrderID" PageSize="7" HierarchyLoadMode="ServerOnDemand">
                                    <DetailTables>
                                        <telerik:GridTableView AutoGenerateColumns="false" DataKeyNames="OrderID" DataSourceID="SqlDataSource3"
                                            Width="100%">
                                            <ParentTableRelation>
                                                <telerik:GridRelationFields DetailKeyField="OrderID" MasterKeyField="OrderID" />
                                            </ParentTableRelation>
                                            <Columns>
                                                <telerik:GridBoundColumn SortExpression="ProductName" HeaderText="Product name" HeaderButtonType="TextButton"
                                                    DataField="ProductName" UniqueName="ProductName">
                                                </telerik:GridBoundColumn>
                                                <telerik:GridNumericColumn SortExpression="UnitPrice" HeaderText="Unit Price" HeaderButtonType="TextButton"
                                                    DataField="UnitPrice" DataFormatString="{0:C}" Aggregate="Avg" FooterAggregateFormatString="Average price: {0:C}">
                                                </telerik:GridNumericColumn>
                                                <telerik:GridNumericColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                                    DataField="Quantity" Aggregate="Max" FooterAggregateFormatString="Max quantity: {0}">
                                                </telerik:GridNumericColumn>
                                                <telerik:GridNumericColumn SortExpression="Discount" HeaderText="Discount" HeaderButtonType="TextButton"
                                                    DataField="Discount" DataFormatString="{0:P}">
                                                </telerik:GridNumericColumn>
                                                <telerik:GridCalculatedColumn UniqueName="Total" DataFields="UnitPrice,Quantity,Discount"
                                                    Expression="IIf({2} = 0,{0}*{1}, {0}*{1}*{2})" HeaderText="Total" DataType="System.Double"
                                                    Aggregate="Sum" DataFormatString="{0:C}" FooterAggregateFormatString="Total cost: {0:C}" />
                                            </Columns>
                                            <SortExpressions>
                                                <telerik:GridSortExpression FieldName="Quantity" SortOrder="Descending"></telerik:GridSortExpression>
                                            </SortExpressions>
                                        </telerik:GridTableView>
                                    </DetailTables>
                                    <Columns>
                                        <telerik:GridBoundColumn SortExpression="CompanyName" HeaderText="CompanyName" HeaderButtonType="TextButton"
                                            DataField="CompanyName" UniqueName="CompanyName">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridBoundColumn SortExpression="OrderID" HeaderText="OrderID" HeaderButtonType="TextButton"
                                            DataField="OrderID" UniqueName="OrderID" Aggregate="Count" FooterAggregateFormatString="Orders count: {0}">
                                        </telerik:GridBoundColumn>
                                        <telerik:GridDateTimeColumn SortExpression="OrderDate" HeaderText="Order date" HeaderButtonType="TextButton"
                                            DataField="OrderDate" UniqueName="OrderDate" DataFormatString="{0:MM/dd/yyyy}"
                                            Aggregate="Last" FooterAggregateFormatString="Last order dates: {0:d}">
                                        </telerik:GridDateTimeColumn>
                                        <telerik:GridBoundColumn UniqueName="Total" DataField="Total" HeaderText="Order Total"
                                            SortExpression="Total" DataFormatString="{0:C}">
                                        </telerik:GridBoundColumn>
                                    </Columns>
                                </MasterTableView>
                            </telerik:RadGrid>
                            <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                                ProviderName="System.Data.SqlClient" SelectCommand="SELECT Orders.OrderID, Orders.OrderDate, Orders.Freight, Customers.CompanyName, SUM(
                                    CASE WHEN [Order Details].Discount = 0     THEN 1
     ELSE [Order Details].Discount END
                                    * [Order Details].Quantity * [Order Details].UnitPrice) as Total     
                                    FROM (Orders LEFT JOIN Customers on Orders.CustomerID = Customers.CustomerID)
                                    FULL JOIN [Order Details] on Orders.OrderID = [Order Details].OrderID
                                    Where EmployeeID = @EmployeeID
                                    GROUP BY Orders.OrderID,Orders.OrderDate, Orders.Freight, Customers.CompanyName"
                                runat="server">
                                <SelectParameters>
                                    <asp:ControlParameter ControlID="Label1" PropertyName="Text" Type="String" Name="EmployeeID" />
                                </SelectParameters>
                            </asp:SqlDataSource>
                            <asp:SqlDataSource ID="SqlDataSource3" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                                ProviderName="System.Data.SqlClient" SelectCommand="SELECT OrderID, [Order Details].UnitPrice, Quantity, Discount, Products.ProductName FROM ([Order Details] LEFT JOIN Products on [Order Details].ProductID = Products.ProductID) where OrderID = @OrderID"
                                runat="server">
                                <SelectParameters>
                                    <asp:SessionParameter Name="OrderID" SessionField="OrderID" Type="Int32" />
                                </SelectParameters>
                            </asp:SqlDataSource>
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="PageView2" Width="460px">
                            <div class="contactWrap">
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td>
                                            <img src='<%# Page.ResolveUrl("~/Img/") + (Container.FindControl("Label1") as Label).Text %>.jpg'
                                                alt="Customer Image" />
                                        </td>
                                        <td>
                                            <asp:DetailsView ID="DetailsView1" AllowPaging="true" GridLines="None" Width="100%"
                                                DataSourceID="SqlDataSource4" runat="server" Font-Italic="true" AutoGenerateRows="false">
                                                <Fields>
                                                    <asp:BoundField DataFormatString="{0:MM/dd/yyyy}" HeaderText="BirthDate:" HtmlEncode="false"
                                                        DataField="BirthDate" HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" />
                                                    <asp:BoundField HeaderStyle-Font-Italic="false" HeaderStyle-Font-Bold="true" HeaderText="Country:"
                                                        DataField="Country" />
                                                    <asp:BoundField HeaderText="City:" DataField="City" HeaderStyle-Font-Italic="false"
                                                        HeaderStyle-Font-Bold="true" />
                                                    <asp:BoundField HeaderText="Address:" DataField="Address" HeaderStyle-Font-Italic="false"
                                                        HeaderStyle-Font-Bold="true" />
                                                    <asp:BoundField HeaderText="HomePhone:" DataField="HomePhone" HeaderStyle-Font-Italic="false"
                                                        HeaderStyle-Font-Bold="true" />
                                                </Fields>
                                            </asp:DetailsView>
                                            <asp:SqlDataSource ID="SqlDataSource4" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                                                ProviderName="System.Data.SqlClient" SelectCommand="SELECT BirthDate, Country, City, Address, HomePhone FROM Employees Where EmployeeID = @EmployeeID"
                                                runat="server">
                                                <SelectParameters>
                                                    <asp:ControlParameter ControlID="Label1" PropertyName="Text" Type="String" Name="EmployeeID" />
                                                </SelectParameters>
                                            </asp:SqlDataSource>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </telerik:RadPageView>
                        <telerik:RadPageView runat="server" ID="PageView3">
                            <telerik:RadChart ID="RadChart1" DataSourceID="SqlDataSource5" runat="server" OnItemDataBound="RadChart1_ItemDataBound"
                                Width="465px" Height="260px" DefaultType="Pie" AutoLayout="true" AutoTextWrap="true"
                                CreateImageMap="false">
                                <ChartTitle>
                                    <TextBlock Text="Order Total">
                                    </TextBlock>
                                </ChartTitle>
                                <Series>
                                    <telerik:ChartSeries DataYColumn="spentMoney" Name="spentMoney" Type="Pie">
                                        <appearance legenddisplaymode="ItemLabels">
                                        </appearance>
                                    </telerik:ChartSeries>
                                </Series>
                            </telerik:RadChart>
                            <asp:SqlDataSource ID="SqlDataSource5" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                                SelectCommand="SELECT TOP 10 p.productId, p.ProductName as pName, sum(od.UnitPrice*od.Quantity) AS spentMoney, c.EmployeeID as cID, c.FirstName as cName FROM products as p, orders as o, [order details] as od, employees as c WHERE p.productID = od.productID and od.OrderID = o.OrderID and c.EmployeeID = o.EmployeeID and (c.EmployeeID = @EmployeeID) GROUP BY c.EmployeeID, c.FirstName, p.productID, p.ProductName, od.UnitPrice">
                                <SelectParameters>
                                    <asp:ControlParameter ControlID="Label1" PropertyName="Text" Type="String" Name="EmployeeID" />
                                </SelectParameters>
                            </asp:SqlDataSource>
                        </telerik:RadPageView>
                    </telerik:RadMultiPage>
                </asp:Panel>
            </NestedViewTemplate>
            <Columns>
                <telerik:GridBoundColumn SortExpression="FirstName" HeaderText="First Name" HeaderButtonType="TextButton"
                    DataField="FirstName" UniqueName="FirstName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="LastName" HeaderText="Last Name" HeaderButtonType="TextButton"
                    DataField="LastName" UniqueName="LastName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="Title" HeaderText="Title" HeaderButtonType="TextButton"
                    DataField="Title" UniqueName="Title">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="BirthDate" DataFormatString="{0:MM/dd/yyyy}"
                    HeaderText="Birth Date" HeaderButtonType="TextButton" DataField="BirthDate" UniqueName="BirthDate">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="City" HeaderText="City" HeaderButtonType="TextButton"
                    DataField="City" UniqueName="City">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn SortExpression="Country" HeaderText="Country" HeaderButtonType="TextButton"
                    DataField="Country" UniqueName="Country">
                </telerik:GridBoundColumn>
            </Columns>
        </MasterTableView>
        <ClientSettings AllowDragToGroup="true" />
    </telerik:RadGrid>
    <asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM Employees"
        runat="server"></asp:SqlDataSource>
        </fieldset>
    <!-- content end -->
    <%--<telerik:Footer runat="server" ID="Footer1">
    </telerik:Footer>--%>
    </form>
</body>
</html>


please check it and tell me the problem.

Ritesh

0
Maria Ilieva
Telerik team
answered on 11 Aug 2011, 03:44 PM
Hi Ritesh,

Please set Skin="Default" in the RadAjaxLoadingPanel definition and add the LoadingPanel as default one for the RadAjaxManager as follows:
<telerik:RadAjaxManager ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1"  runat="server">
         <AjaxSettings>
             <telerik:AjaxSetting AjaxControlID="RadGrid1">
                 <UpdatedControls>
                     <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
                 </UpdatedControls>
             </telerik:AjaxSetting>
         </AjaxSettings>
     </telerik:RadAjaxManager>

Give this a try and let me know if it works for you.

All the best,
Maria Ilieva
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
ks
Top achievements
Rank 1
answered on 04 Sep 2011, 08:52 PM
hi
i have a problem with CalculatedColumn  i don't know how to figuer them

"<telerik:GridCalculatedColumn UniqueName="Total" DataFields="UnitPrice,Quantity,Discount"
                                                        Expression="IIf({2} = 0,{0}*{1}, {0}*{1}*{2})" HeaderText="Total" DataType="System.Double"
                                                        Aggregate="Sum" DataFormatString="{0:C}" FooterAggregateFormatString="Total cost: {0:C}" />



please help me
thanks
Tags
Ajax
Asked by
ritesh
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
ritesh
Top achievements
Rank 1
Maria Ilieva
Telerik team
ks
Top achievements
Rank 1
Share this question
or