RadAjaxLoadingPanel not showing

[John]

Hi,

Working on a large application, and hit a problem with a RadAjaxLoadingPanel not showing.

The form in question follows a similar structure to a number of others on the site. In terms of logic, there are a number of panels (some with nested panels) that form a "wizard" type interface to allow users to make a credit card payment.

Due to the complexity of possible permutations of what controls could be updated by what, I've wrapped a AjaxPanel around it with a loading panel.

But the loading panel never shows.

If I remove the AjaxPanel and use an AjaxManager instead, the loading panel did initially show. However as I added more and more events to the AjaxManager, I got in to a number of problems which seem to relate to a cyclic relationship between some of the updated controls.

So I've gone back to the AjaxPanel, but with no loading panel. Any ideas?? :)

Matt

[Pavlina]

Hi Matt,

Could you please confirm that you have set the Skin property of the RadAjaxLoadingPanel to the name of the respective skin? The default value of the Skin property is "" (no skin).

Sincerely yours,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[John]

Hi Pavlina,

We don't use a skin on the loading panel - here is how our loading panel is declared:

<rad:RadAjaxLoadingPanel ID="ralp" runat="server" InitialDelayTime="0" MinDisplayTime="1000" Transparency="25" BackColor="#ffffff" CssClass="ajaxloader"></rad:RadAjaxLoadingPanel>

The ajaxloader class is simply:

.ajaxloader
{
background: url(/images/layout/ajax-loader-popup.gif) no-repeat center center;
}

This works on the other pages but not on this one.

I have tried using a custom skin, but this does not work either.

Thanks

Matt

[Pavlina]

Hello Matt,

I suggest you change your code as shown bellow and let me know if it works as expected:
ASPX:

<rad:RadAjaxLoadingPanel ID="ralp" runat="server" InitialDelayTime="0" MinDisplayTime="1000" Transparency="25">
                <div style="background-color:#ffffff; width:100%; height:100%"></div>
</rad:RadAjaxLoadingPanel>

Additionally, if the issue still persists it will be best if you send us a simple working application with reproduces this erroneous behavior. Thus we could help you further in resolving it.

Greetings,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[John]

Hi,

I tried your suggestion and it made no difference.

If I remove the transparency attribute, there is a momentary flicker as the ajax postback takes place. If I include the transaprency attribute, I don't get this flicker.

I've also noticed that the MinDisplayTime makes not difference to this flicker.

I can't really send a working project as it's too tied into other aspects of the site unfortunately.

Matt

[Pavlina]

Hello Matt,

I am sending you s simple working application which handles the desired functionality. Please, examine it and let me know what is the difference in your case.

I hope this helps.

Kind regards,
Pavlina
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Rafal]

I have ran into exactly the same problem. Appears that setting transparency to the ajaxified loading panel causes it to not render the loading image correctly. Has a workaround been found for this ?

[Iana Tsolova]

Hello Rafal,

Can you share you RadAjaxLoadingPanel declaration?

All the best,
Iana
the Telerik team

[Rafal]

Hello Lana

I actually got this to work by removing the transparency parameter from the loading panel and overriding the class with my own transparency settings. The following solution works like a charm:

 .raColor
        {
            opacity: 0.5;
            filter: alpha(opacity=50);
        }

<telerik:RadAjaxLoadingPanel ID="ralp" Skin="Default" InitialDelayTime="0" EnableSkinTransparency="false"  runat="server"></telerik:RadAjaxLoadingPanel>

Thanks,
Rafal

[Chandan Dey]

Hi,

In my tekerik rad grid the telerik RadAjaxLoadingPanel not showing.
My requrement I have a Button & a Rad Grid when user click on button the RadAjaxLoadingPanel loading circle want to show and when user click rad grid header column RadAjaxLoadingPanel loading circle also show. But in my application its not happening.
Please advice. I am using trial version of "Telerik.Web.UI_2011_1_413_Dev".
One more thing if I use "telerik:RadAjaxPanel" there is a JavaScript error (Microsoft JScript runtime error: Unable to set value of the property 'control': object is null or undefined).

I am sending you my test code.
I am using master page.

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="Test.TestPage" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>


<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<%--<script language="javascript" type="text/javascript">
    var currentLoadingPanel = null;
    var currentUpdatedControl = null;
    function RequestStart(sender, args) {
        currentLoadingPanel = $find("<%= RadAjaxLoadingPanel1.ClientID%>");


        if (args.get_eventTarget() == "<%= rgOrderDetails.UniqueID %>") {


            currentUpdatedControl = "<%= rgOrderDetails.ClientID %>";
            //show the loading panel over the updated control 
            currentLoadingPanel.show(currentUpdatedControl);
        }
    }
    function ResponseEnd() {
        //hide the loading panel and clean up the global variables 
        if (currentLoadingPanel != null) {
            currentLoadingPanel.hide(currentUpdatedControl);
        }
        currentUpdatedControl = null;
        currentLoadingPanel = null;
    } 
</script>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <div id="divCurrentOpenWorkOrders">
        <%--<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" >--%>
            <br /><br />
            <span class="PageTitle">Current Open Work Orders</span>
            <br /><br />
            <table width="78%">
                <tr>
                    <td align="left">
                        <telerik:RadButton ID="btnAddNew" runat="server" Text="Add New" OnClick="btnAddNew_Click"></telerik:RadButton>
                    </td>
                    <td align="right">
                        <asp:Label ID="lblFilter" runat="server" Text="Filter by Status :"></asp:Label>
                    </td>
                    <td align="left">
                        <telerik:RadComboBox ID="cmbStatus" runat="server" onselectedindexchanged="cmbStatus_SelectedIndexChanged" AutoPostBack="true">
                            <Items>
                                <telerik:RadComboBoxItem Value="0" Text="All" />
                                <telerik:RadComboBoxItem Value="1" Text="Open" />
                                <telerik:RadComboBoxItem Value="2" Text="Complete" />
                            </Items>
                        </telerik:RadComboBox>
                        
                    </td>
                </tr>
                <tr>
                    <td style="height:5px;"></td>
                </tr>
            </table>
            <div id="divOrderDetails">
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="rgOrderDetails">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="rgOrderDetails" LoadingPanelID="RadAjaxLoadingPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                        <telerik:AjaxSetting AjaxControlID="btnAddNew">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="RadAjaxLoadingPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>


                <telerik:RadGrid ID="rgOrderDetails" runat="server" AllowSorting="true" AllowPaging="true" PageSize="10" AutoGenerateColumns="false" Skin="WebBlue" OnItemCommand="rgOrderDetails_ItemCommand" OnItemDataBound="rgOrderDetails_ItemDataBound" oninit="rgOrderDetails_Init1" onitemcreated="rgOrderDetails_ItemCreated">
                    <HeaderStyle CssClass="dg_font" />
                    <ItemStyle CssClass="dg_font" />
                    <AlternatingItemStyle CssClass="dg_font" />
                    <MasterTableView DataKeyNames="WorkOrderNo" AutoGenerateColumns="false" >
                        <Columns>
                            <telerik:GridHyperLinkColumn DataNavigateUrlFields="WorkOrderNo, CustomerName, BuildingName" UniqueName="WorkOrderNo" HeaderText="Work Order No." DataTextField="WorkOrderNo" DataTextFormatString="<u>{0}</u>" SortExpression="WorkOrderNo" DataNavigateUrlFormatString="WorkOrderEquipment.aspx?wo={0}&amp;cn={1}&amp;bn={2}&amp;" >
                            </telerik:GridHyperLinkColumn>
                            <telerik:GridTemplateColumn HeaderText="Date" SortExpression="OrderDate" >
                                <ItemTemplate>
   <%# (System.Convert.ToDateTime(DataBinder.Eval(Container.DataItem, "OrderDate"))).ToString("MMM dd, yyyy")%>
   </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="Customer" HeaderText="Customer" UniqueName="Customer" ></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Type" HeaderText="Type" UniqueName="Type" ></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="StatusText" HeaderText="StatusText" UniqueName="StatusText" Visible="false"></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Status" HeaderText="Status" UniqueName="Status" ></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Building" HeaderText="Building" UniqueName="Building" ></telerik:GridBoundColumn>
                            <telerik:GridTemplateColumn HeaderText="" Visible="false">
                                <ItemTemplate>
   <asp:LinkButton id="lnkView" runat="server" Text="View" CausesValidation="false" CommandName="Select" >View</asp:LinkButton>
   </ItemTemplate>
                            </telerik:GridTemplateColumn>
                            <telerik:GridBoundColumn DataField="CustomerName" HeaderText="CustomerName" UniqueName="CustomerName" Visible="false" ></telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="BuildingName" HeaderText="BuildingName" UniqueName="BuildingName" Visible="false" ></telerik:GridBoundColumn>
                        </Columns>
                    </MasterTableView>
                </telerik:RadGrid>
                <%--<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="" IsSticky="true" MinDisplayTime="1000" Width="256px" Height="64px" EnableSkinTransparency="false">--%>
                    <%--<div class="loading">
                        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/loading5.gif" AlternateText="loading" />
                    </div>--%>
                <%--</telerik:RadAjaxLoadingPanel>--%>
                <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Skin="Default" InitialDelayTime="0" MinDisplayTime="1000" EnableSkinTransparency="false" runat="server"></telerik:RadAjaxLoadingPanel>
            </div>
            <div class="div_footer"></div>
        <%--</telerik:RadAjaxPanel>--%>
    </div>
</asp:Content>

Thanks,
Chandan

[Pavlina]

Hello Chandan Dey,

Please try changing your AjaxSettings as below and see if it makes any difference:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                 <AjaxSettings>
                     <telerik:AjaxSetting AjaxControlID="rgOrderDetails">
                         <UpdatedControls>
                             <telerik:AjaxUpdatedControl ControlID="rgOrderDetails" LoadingPanelID="RadAjaxLoadingPanel1" />
                         </UpdatedControls>
                     </telerik:AjaxSetting>
                     <telerik:AjaxSetting AjaxControlID="btnAddNew">
                         <UpdatedControls>
                             <telerik:AjaxUpdatedControl ControlID="rgOrderDetails" LoadingPanelID="RadAjaxLoadingPanel1" />
                         </UpdatedControls>
                     </telerik:AjaxSetting>
                 </AjaxSettings>
             </telerik:RadAjaxManager>

Regards,
Pavlina
the Telerik team

[Chandan Dey]

Hi Pavlina,

Thanks for you reply. After spend 2 days on it your suggestion works for me.

But if I click Add button which was out side the grid I want to show the loading circle inside the grid for the time being Add New button reload my grid. Or If I change selection of rad combo box which was outside rad grid for filter some data in rad grid javascript error occurred and loading circle not showing. Is it possible? And if I keep all the control inside a telerik RadAjaxPanel and click on Add button there is an error occurred ((Microsoft JScript runtime error: Unable to set value of the property 'control': object is null or undefined).

Thanks,
Chandan

[Pavlina]

Hello Chandan Dey,

Please examine the attached project and let me know if it helps and what is the difference in your case.

Kind regards,
Pavlina
the Telerik team

[Chandan Dey]

Hi Pavlina,

Thanks for your quick reply. I will try your code but not success.

In my application RadGrid1_NeedDataSource event was not working properly. In my database there was no data but after my page load the grid was not showing. but if am I assign radgrid.datasource in page load the grid was showing properly.

And one more thing I am using Rad Grid Toolbar to add new record, edit record and delete record but the 
rgMaterials_ItemInserted, rgMaterials_ItemUpdated, rgMaterials_ItemDeleted events are not firing.

My Code: (I am using DAL layer to access database)

.aspx

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                                            <AjaxSettings>
                                                <telerik:AjaxSetting AjaxControlID="rgMaterials">
                                                    <UpdatedControls>
                                                        <telerik:AjaxUpdatedControl ControlID="rgMaterials" LoadingPanelID="RadAjaxLoadingPanel1" />
                                                    </UpdatedControls>
                                                </telerik:AjaxSetting>
                                            </AjaxSettings>
                                        </telerik:RadAjaxManager>
                                        <telerik:RadGrid ID="rgMaterials" runat="server" 
                                            AllowFilteringByColumn="false" AllowSorting="true" AllowPaging="false" 
                                            AutoGenerateColumns="False" Skin="WebBlue"
                                            AllowAutomaticInserts="true" AllowAutomaticUpdates="true" AllowAutomaticDeletes="true"
                                            onitemcommand="rgMaterials_ItemCommand" oninit="rgMaterials_Init" 
                                            OnItemInserted="rgMaterials_ItemInserted" 
                                            onitemupdated="rgMaterials_ItemUpdated" 
                                            onitemdeleted="rgMaterials_ItemDeleted" 
                                            onneeddatasource="rgMaterials_NeedDataSource">
                                            
                                            <PagerStyle Mode="NextPrevAndNumeric" />
                                            
                                            <MasterTableView Width="100%" CommandItemDisplay="Top" DataKeyNames="Part" CommandItemSettings-ShowRefreshButton="false" CommandItemSettings-AddNewRecordText="Add" AutoGenerateColumns="False">
                                                <%--<CommandItemStyle CssClass="OuterItemStyle" />--%>
                                                <CommandItemTemplate>
                                                    <table style="background-color:white; width:100%;">
                                                        <tr>
                                                            <td align="left">
                                                                <asp:Label ID="lblMaterials" runat="server" Text="Materials" CssClass="detail_box_item_font" ForeColor="Black"></asp:Label>
                                                            </td>
                                                            <td align="right">
                                                                <asp:Button ID="btnAdd" Text="Add New" runat="server" CommandName="InitInsert"></asp:Button>
                                                            </td>
                                                        </tr>
                                                    </table>
                                                </CommandItemTemplate>
                                                <Columns>
                                                    <telerik:GridBoundColumn DataField="Part" SortExpression="Part" HeaderText="Part #" UniqueName="Part" ColumnEditorID="GridTextBoxColumnEditor1" ></telerik:GridBoundColumn>
                                                    <telerik:GridBoundColumn DataField="Comment" SortExpression="Comment" HeaderText="Comment" UniqueName="Comment" ColumnEditorID="GridTextBoxColumnEditor2"></telerik:GridBoundColumn>
                                                    <telerik:GridTemplateColumn HeaderText="Price" SortExpression="Price" UniqueName="TemplateColumn" EditFormColumnIndex="1">
                                                        <ItemTemplate>
                                                            <asp:Label runat="server" ID="lblPrice" Text='<%# Eval("Price", "{0:C}") %>'></asp:Label>
                                                        </ItemTemplate>
                                                        <EditItemTemplate>
                                                            <%--<span>--%>
                                                                <telerik:RadNumericTextBox runat="server" ID="tbPrice" Width="100px" DbValue='<%# Bind("Price") %>' ShowSpinButtons="true" IncrementSettings-InterceptArrowKeys="true" IncrementSettings-InterceptMouseWheel="false" HoveredStyle-HorizontalAlign="Left" MinValue="0">
                                                                </telerik:RadNumericTextBox>
                                                                <%--<telerik:RadNumericTextBox runat="server" ID="tbPrice" Width="40px" DbValue='<%# Bind("Price") %>'>
                                                                </telerik:RadNumericTextBox>--%>
                                                                <span style="color: Red">
                                                                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" ControlToValidate="tbPrice" ErrorMessage="*" runat="server">
                                                                    </asp:RequiredFieldValidator>
                                                                </span>
                                                        </EditItemTemplate>
                                                    </telerik:GridTemplateColumn>
                                                    <telerik:GridTemplateColumn HeaderText="" >
                           <ItemTemplate>
                           <asp:LinkButton id="lnkEdit" runat="server" Text="Edit" CausesValidation="false" CommandName="Edit"></asp:LinkButton>
                           </ItemTemplate>
                           </telerik:GridTemplateColumn>
                                                    <telerik:GridTemplateColumn HeaderText="" >
                           <ItemTemplate>
                           <asp:LinkButton id="lnkDelete" runat="server" Text="Delete" CausesValidation="false" CommandName="Delete"></asp:LinkButton>
                           </ItemTemplate>
                           </telerik:GridTemplateColumn>
                                                </Columns>
                                                <EditFormSettings ColumnNumber="2" InsertCaption="New Material" >
                                                    <FormTableItemStyle Wrap="false" VerticalAlign="Top"></FormTableItemStyle>
                                                    <FormCaptionStyle HorizontalAlign="Left" ></FormCaptionStyle>
                                                    <FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="3" BackColor="White" Width="100%" />
                                                    <FormTableStyle CellSpacing="0" CellPadding="2" Height="60px" BackColor="White" />
                                                    <FormTableAlternatingItemStyle Wrap="false"></FormTableAlternatingItemStyle>
                                                    <FormTableButtonRowStyle HorizontalAlign="Left" ></FormTableButtonRowStyle>
                                                </EditFormSettings>
                                            </MasterTableView>
                                        </telerik:RadGrid>
                                        <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="150px" />
                                        <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor2" runat="server" TextBoxStyle-Width="150px" />
                                        <telerik:GridNumericColumnEditor ID="GridNumericColumnEditor1" runat="server" NumericTextBox-Width="40px" />
                                        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Skin="WebBlue" IsSticky="false" InitialDelayTime="0" MinDisplayTime="1000" EnableSkinTransparency="false" runat="server"></telerik:RadAjaxLoadingPanel>


.aspx.cs

        protected void rgMaterials_ItemInserted(object source, GridInsertedEventArgs e)
        {
            string connectionString = ConfigurationManager.ConnectionStrings["xtramec_dbConnectionString"].ToString();
            GridEditFormInsertItem editformItem = (GridEditFormInsertItem)e.Item;
            ServiceRecommendationMaterial serviceRecommendationMaterial = new ServiceRecommendationMaterial();
            SqlConnection connection = new SqlConnection(connectionString);
            serviceRecommendationMaterial.RecommendationId = serviceRecommendationMaterial.GetRecommendationId(connection);
            serviceRecommendationMaterial.PartNumber = editformItem["Part"].Controls[0].ToString();
            serviceRecommendationMaterial.Comment = editformItem["Comment"].Controls[0].ToString();
            serviceRecommendationMaterial.Price = Convert.ToDecimal(editformItem["Price"].Controls[0]);
            serviceRecommendationMaterial.Quantity = Convert.ToDecimal(0);
            serviceRecommendationMaterial.InsertServiceRecommendationMaterial(connection);
            //TextBox contactmobile = (TextBox)editformItem["contactmobile"].Controls[0];
            //TextBox address = (TextBox)dataItem.FindControl("addressTextBox");
            connection.Close();
            connection = null;
        }


        protected void rgMaterials_ItemUpdated(object sender, GridUpdatedEventArgs e)
        {
            GridEditableItem editedItem = e.Item as GridEditableItem;
            string PartNo = editedItem.OwnerTableView.DataKeyValues[editedItem.ItemIndex]["Part"].ToString();
        }


        protected void rgMaterials_ItemDeleted(object sender, GridDeletedEventArgs e)
        {
            GridDataItem item = (GridDataItem)e.Item;
            string PartNo = item.OwnerTableView.DataKeyValues[item.ItemIndex]["Part"].ToString();
        }


        protected void rgMaterials_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            ShowSortData();
        }

        public void ShowSortData()
        {
            string errSource = string.Empty;
            string errMessage = string.Empty;
            DataSet dtSet = new DataSet();
            try
            {
                XtraTechnician.DAL.ServiceRecommendationMaterial serviceRecommendationMaterial = new XtraTechnician.DAL.ServiceRecommendationMaterial();
                string connectionString = ConfigurationManager.ConnectionStrings["xtramec_dbConnectionString"].ToString();
                SqlConnection connection = new SqlConnection(connectionString);
                rgMaterials.DataSource = null;
                rgMaterials.DataBind();
                rgMaterials.DataSource = serviceRecommendationMaterial.LoadData(connection);
                rgMaterials.DataBind();
            }
            catch (Exception ex)
            {
            }
        }

[Chandan Dey]

Hi Pavlina
,

Is it possible to maintain two separate column for Update and Cancel link or button while inline Editing or Add new record?

Thanks
Chandan 

[Princy]

Hello Chandan,

Check the following demo.
Grid / Form Template Edit Form

Thanks,
Princy.

[Pradeep]

Thanks Rafal, It worked for me.... I was not getting RadAjaxPanel on my application. With your suggestion I was able to solve my problem.

[Saquib]

Hello All,

I think I am doing exactly same thing, but still not able to get RadAjaxLoadingPanel to work.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rptOptions">
                <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rptOptions" LoadingPanelID="RadAjaxLoadingPanel1" />
                        <telerik:AjaxUpdatedControl ControlID="litTotalWithOptions" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel id="RadAjaxLoadingPanel1" runat="server">
    <div style="height:100%; width:100%; background-image:url(Images/transparentblock.gif); background-repeat:repeat;">
      <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Loading.gif" AlternateText="loading" style="margin:400px auto auto auto;" />
    </div>
</telerik:RadAjaxLoadingPanel>

Could anyone help me find the issue in it.. 

Thank you
Saquib.

[Pavlina]

Hi Saquib,

I tested the provided code and it is working as expected. Can you please examine the attached sample project and let me know what is the difference in your case?

I am looking forward for your reply.

All the best,
Pavlina
the Telerik team

[Saquib]

Hello Pavlina,

In your example you have given RadGrid as the updated control. In my case it's a Literal.

<div class="CatalogDetailItemCostLine">
       <asp:Literal ID="litTotalWithOptions" runat="server" />
</div>

I think, now I am getting it. Since Literal is not big enough to show loading circle, it is not visible. Am I right??
If this is the case, can I show loading panel in the center of the page, while just updating the label. 

Thanks
Saquib.

[Pavlina]

Hello,

To be able to ajaxify the literal control you should put it in asp:Panel and set the panel as updated control in the ajax settings as shown in the following code:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

       <AjaxSettings>

           <telerik:AjaxSetting AjaxControlID="rptOptions">

               <UpdatedControls>

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

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

               </UpdatedControls>

           </telerik:AjaxSetting>

       </AjaxSettings>

   </telerik:RadAjaxManager>

   <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">

       <div style="height: 100%; width: 100%; background-image: url(Images/transparentblock.gif);

           background-repeat: repeat;">

           <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Loading.gif" AlternateText="loading"

               Style="margin: 400px auto auto auto;" />

       </div>

   </telerik:RadAjaxLoadingPanel>



   <div class="CatalogDetailItemCostLine">

       <asp:Panel ID="Panel1" runat="server">

           <asp:Literal ID="litTotalWithOptions" runat="server" />

       </asp:Panel>

   </div>

Give it a try and let me know how it goes.

All the best,
Pavlina
the Telerik team

[Saquib]

I tried it with panel, but still the loading circle is not visible. It has to just update the literal, but I have lots of calculations going on in the code behind. That's why, I was thinking it would look better with loading circle.

This might also be because of rptOptions repeater which has only dropdown boxes and this literal needs to be updated on the selected index change of those dropdown boxes. Guessing...!

I really appreciate your replies..

Thank you.
Saquib.

<UpdatedControls>
         <telerik:AjaxUpdatedControl ControlID="rptOptions" LoadingPanelID="RadAjaxLoadingPanel1" />
         <telerik:AjaxUpdatedControl ControlID="litPanel" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>

<asp:Panel runat="server" ID="litPanel">
          <asp:Literal ID="litTotalWithOptions" runat="server" />
</asp:Panel>

<asp:Repeater ID="rptOptions" runat="server">
       <ItemTemplate>
                                    <div class="CatalogDetailItemCostLine">
       <telerik:RadComboBox ID="ddlOptions" runat="server" DataValueField="ID" DataTextField="Name" CssClass="ddlOptions"              MaxLength="26" MaxHeight="150px"></telerik:RadComboBox>
                                    </div>
       </ItemTemplate>
</asp:Repeater>

[Pavlina]

Hello,

Note that asp:Repeater should also be placed in container (div or panel) and then its container must be used in the AjaxSettings. I am sending you a modified project which demonstrates how to achieve the desired functionality.Give it a try and see it helps.

Greetings,
Pavlina
the Telerik team

[Devarajan]

Hi Matt,

In the attached screenshot of my previous mail, you can see the add | delete links which exits in the header content of the rad grid. 

Please find the below code for the investigation, i have a link called postback, when i click on that link checkbox getting cleared, i would like to retain those checkboxes selected and select the checked checkbox value on the postback click event.


Thanks is advance

<%@ Page Language="C#" AutoEventWireup="true" Culture="pt-BR" CodeFile="RadGrid.aspx.cs"
    Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
</head>
<script type="text/javascript">

    // Select/Deselect checkboxes based on header checkbox
    function getSelectedItems() {
        var count = 0;
        var grid = $find("<%=radGrid.ClientID %>");
        var hdnViewId = document.getElementById("<%=hdnViewId.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems();
        var hdnValue = '';
        for (i = 0; i < row.length; i++) {
            var chkBox = row[i].get_cell('CheckBoxColumn').getElementsByTagName('input')[0];
            var rowValue = row[i].get_cell('CustomerID').innerText;
            if (chkBox != null && chkBox.type == 'checkbox' && chkBox.checked) {
                hdnViewId.value += rowValue + ',';
                count++;
            }
        }

        if (count == 0) {
            alert('Please select a Vendor.');
            return false;
        }
    }

    function SelectheaderCheckboxes(headerchk) {

        var grid = $find("<%=radGrid.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems();

        var i;
        //Condition to check header checkbox selected or not if that is true checked all checkboxes
        if (headerchk.checked) {
            for (i = 0; i < row.length; i++) {
                var inputs = row[i].get_cell('CheckBoxColumn').getElementsByTagName('input');
                inputs[0].checked = true;
            }
        }

        //if condition fails uncheck all checkboxes in gridview
        else {
            for (i = 0; i < row.length; i++) {
                var inputs = row[i].get_cell('CheckBoxColumn').getElementsByTagName('input');
                inputs[0].checked = false;
            }
        }
    }
    //function to check header checkbox based on child checkboxes condition

    function Selectchildcheckboxes(header) {

        var ck = header;
        var count = 0;
        var grid = $find("<%=radGrid.ClientID %>");
        var MasterTable = grid.get_masterTableView();
        var row = MasterTable.get_dataItems();
        var headerchk = document.getElementById(header);
        var rowcount = row.length;
        //By using this for loop we will count how many checkboxes has checked
        for (i = 1; i < row.length; i++) {
            var inputs = row[i].get_cell('CheckBoxColumn').getElementsByTagName('input');
            if (inputs[0].checked) {
                count++;
            }
        }

        //Condition to check all the checkboxes selected or not

        if (count == rowcount - 1) {
            headerchk.checked = true;
        }
        else {
            headerchk.checked = false;
        }
    }
    function showButton(k) {
        var uploadPath = document.getElementById('flUploadFIle');
        if (uploadPath.value != null && uploadPath.value.length > 0) {
            document.getElementById(k).disabled = false;
        }
        else {
            document.getElementById(k).disabled = true;
        }
    }

    function disableButton() {
        debugger;
        var button = document.getElementById('btnValidName');
        if (button != null) {
            button.disabled = true;
            return false;
        }
    }
</script>
<body>
    <head>
        <style type="text/css">
            .module1
            {
                background-color: #dff3ff;
                border: 1px solid #c6e1f2;
            }
        </style>
    </head>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <div>
        <asp:HiddenField ID="hdnViewId" runat="server" />
        <telerik:RadGrid ID="radGrid" runat="server" DataSourceID="AccessDataSource1">
        </telerik:RadGrid>
        <asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/Nwind.mdb"
            SelectCommand="SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, PostalCode FROM Customers">
        </asp:AccessDataSource>

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

 

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;
using System.Collections.Generic;
using System.Collections;
using System.Text.RegularExpressions;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {


        radGrid.ItemDataBound += new GridItemEventHandler(radGrid_ItemDataBound);
        radGrid.ItemCreated += new GridItemEventHandler(radGrid_ItemCreated);
        CheckBoxTemplate cbt;

        GridTemplateColumn gtc = new GridTemplateColumn();
        cbt = new CheckBoxTemplate();
        cbt.IsHeader = true;
        gtc.HeaderTemplate = cbt;

        cbt = new CheckBoxTemplate();
        gtc.UniqueName = "CheckBoxColumn";
        gtc.ItemTemplate = cbt;
        radGrid.AllowPaging = true;
        radGrid.AllowSorting = true;
        radGrid.PagerStyle.Mode = GridPagerMode.NextPrevNumericAndAdvanced;
        radGrid.PagerStyle.PageButtonCount = 3;
        radGrid.MasterTableView.Columns.Add(gtc);
        radGrid.MasterTableView.CommandItemDisplay = GridCommandItemDisplay.Top;
        radGrid.MasterTableView.CommandItemSettings.ShowExportToExcelButton = true;
    }
    protected override void OnInit(EventArgs e)
    {
        base.OnInit(e);
        //adding action ink for the grid

        HeaderButtonTemplate hbt = new HeaderButtonTemplate();
        hbt.PanelHeader = new Panel();


        LinkButton hl = new LinkButton() { ID = "PostBack", Text = "PostBack", ToolTip = "PostBack" };
        hl.ToolTip = "PostBack";
        hl.Style.Add("Color", "#990000");
        hl.Command += new CommandEventHandler(hl_Command);
        hl.OnClientClick = "return getSelectedItems();";
        // If grid view action items are more adding the separator

        hbt.PanelHeader.Controls.Add(hl);

        hbt.ShowRefreshPanel = true;
        radGrid.MasterTableView.CommandItemTemplate = hbt;

    }

    void hl_Command(object sender, CommandEventArgs e)
    {

    }
    void radGrid_ItemCreated(object sender, GridItemEventArgs e)
    {

    }

    void radGrid_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridHeaderItem)
        {
            CheckBox headerchk = (CheckBox)e.Item.FindControl("chkHeader");
            Session["chkHeader"] = headerchk;
        }

        if (e.Item is GridDataItem)
        {
            GridDataItem item = e.Item as GridDataItem;
            CheckBox headerchk = Session["chkHeader"] as CheckBox;
            CheckBox childchk = (CheckBox)e.Item.FindControl("chkSelect");
            childchk.Attributes.Add("onclick", "javascript:Selectchildcheckboxes('" + headerchk.ClientID + "')");
        }
    }




}
public class CheckBoxTemplate : System.Web.UI.ITemplate
{

    protected CheckBox chkSelect;
    protected CheckBox chkHeader;
    public bool IsHeader;
    public CheckBoxTemplate()
    {
    }


    public void InstantiateIn(System.Web.UI.Control container)
    {
        if (!IsHeader)
        {
            chkSelect = new CheckBox();
            chkSelect.ID = "chkSelect";
            chkSelect.Enabled = true;
            container.Controls.Add(chkSelect);

        }
        else
        {
            chkHeader = new CheckBox();
            chkHeader.ID = "chkHeader";
            chkHeader.Enabled = true;
            chkHeader.Attributes.Add("onclick", "javascript:SelectheaderCheckboxes(this)");
            container.Controls.Add(chkHeader);
        }
    }

}


#region Header button Template class

/// <summary>
/// Class to define the buttons in the rad grid header
/// </summary>
public class HeaderButtonTemplate : ITemplate
{
    /// <summary>
    /// Panel variable declared to add the rad grid in built controls
    /// </summary>
    protected Panel PanelRefresh { get; set; }

    /// <summary>
    /// Panel variable declared to add custom controls in the rad grid header
    /// </summary>
    public Panel PanelHeader { get; set; }

    /// <summary>
    /// Variable to make visible / hide of the bulk add button
    /// </summary>
    public bool ShowRefreshPanel { get; set; }


    public HeaderButtonTemplate()
    {

    }

    /// <summary>
    /// Instantiating the radgrid content template controls [this.MasterTableView.CommandItemTemplate]
    /// </summary>
    /// <param name="container">Adding the custom controls to the container</param>
    public void InstantiateIn(System.Web.UI.Control container)
    {
        if (PanelHeader == null)
            PanelHeader = new Panel();

        // If variables set then adding the respective controls to the container

        container.Controls.Add(PanelHeader);

        if (ShowRefreshPanel)
        {
            //Setting the panel header style
            PanelHeader.Style.Add("float", "left");
            PanelHeader.Style.Add("height", "20px");
            PanelHeader.Style.Add("padding", "10px 0px 0px 5px");

            // Setting the refresh panel
            PanelRefresh = new Panel();
            PanelRefresh.Style.Add("float", "right");
            PanelRefresh.Style.Add("height", "20px");
            PanelRefresh.Style.Add("padding-top", "7px");
            PanelRefresh.Style.Add("padding-right", "7px");

            PanelRefresh.Controls.Add(new Button() { ID = "RefreshButton", Text = "Refresh", CommandName = RadGrid.RebindGridCommandName, CssClass = "rgRefresh" });
            PanelRefresh.Controls.Add(new LinkButton() { ID = "RebindGridButton", Text = "Refresh", CommandName = RadGrid.RebindGridCommandName });
            PanelRefresh.Controls.Add(new LiteralControl(" | "));
            PanelRefresh.Controls.Add(new Button() { ID = "ExportToExcelButton", Text = "Export To Excel", CommandName = RadGrid.ExportToExcelCommandName, CssClass = "rgExpXLS" });

            // Adding the custom controls to the header
            container.Controls.Add(PanelRefresh);
        }
    }
}
#endregion

[Pavlina]

Hi,

You can refer to the article below for more information on how to persist the selected value on postback:
http://www.telerik.com/help/aspnet-ajax/grid-persist-selected-rows-on-sorting.html

Regards,
Pavlina
Telerik

[Avnish]

Hello Telerik Team,
Im trying to make an email management using telerik with 3 Tier architecture in asp.Net.

I have create a master page. Then a web page using this master page. I have to show a grid which could display "From", "To", "Message", createdOn etc on the grid. I have attached edit and delete button through item template image button.
I am using a panel below the RadGrid so that when i click on edit template button this panel will open. this panel contains label names and their corresponding text boxes.

Now when i click on edit template image button....the values from the corresponding row should be filled in the textboxes of the down panel.

but when i click on the edit template image button, the objects in between and that corresponding textbox 's object too have found (got assigned) the value (as i can check it through break functionality of visual studio) but the value is not displaying on that textbox.

please help me in this way as soon as possible.
Im sending you the code of main.master, NTier.aspx & NTier.aspx.cs


<<---------------------------------Main.Master--------------------------------------->>

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="Email_Management.Main" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Email-Management</title>
    <link href="css/Header.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="360000"></asp:ScriptManager>

        <table class="table1">
            <tr>
                <td class="column1">
                    &nbsp;<img src="images/Xtlytics_Logo.png" class="logo-image"/>
                </td>
                <td class="column2">&nbsp;<asp:Label ID="lblWel" runat="server" Text="Welcome," CssClass="welcome-user"></asp:Label>
                    <asp:Label ID="lblUsername" runat="server" Text=" " CssClass="welcome-user bold-txt"></asp:Label>
                    <span class="Seprator">|</span>
                    <asp:ImageButton ID="ImageButton1" runat="server" ToolTip="Logout" OnClick="btnLogout" CssClass="logout-image" ImageUrl="~/images/logout.png"/>
                </td>
            </tr>
        </table>

        <table width="100%">
            <tr>
                <td>
                    <telerik:RadMenu ID="Menu" runat="server" EnableSelection="true" Skin="Telerik">
                        <ExpandAnimation Type="OutQuart" Duration="300" />
                        <CollapseAnimation Type="OutQuart" Duration="300" />
                        <Items>
                            <telerik:RadMenuItem Text="Insurance">
                                <Items>

                                </Items>

                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="HealthCare" ExpandMode="ClientSide">
                                <Items>
                                    <telerik:RadMenuItem Text="Big Data Explorer"></telerik:RadMenuItem>
                                </Items>

                            </telerik:RadMenuItem>

                            <telerik:RadMenuItem Text="Social Media" ExpandMode="ClientSide">
                                <Items>
                                    <telerik:RadMenuItem Text="Company"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Competitor"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Product"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Efluencer"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Swot"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Name Perceptual"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Brand Association"></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Analysis">
                                <Items>
                                    <telerik:RadMenuItem Visible="true" Text="Report Designer">
                                        <Items>
                                            <telerik:RadMenuItem Text="Correlation Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Clustering Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Chart Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Forecasting Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Regression Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Simulation Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Predictive Model Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Tag cloud designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Entities Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Topics designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Data report designer"></telerik:RadMenuItem>
                                        </Items>
                                   </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Dashbaord Designer" Visible="true">

                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Report">
                                <Items>
                                    <telerik:RadMenuItem Text="Saved Reports"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Ad-Hoc Report"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Causation Clues"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Your DashBoard" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Predictive Reports"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Simulation Reports" ></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Dashboard">
                                <Items>

                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Manage">
                                <Items>
                                     <telerik:RadMenuItem Text="Alert"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Track"></telerik:RadMenuItem>
                                     <telerik:RadMenuItem Text="Engage"></telerik:RadMenuItem>  
                                    <telerik:RadMenuItem Text="Tasks"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Emails"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Notes"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="External Data"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Concept"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Change Password"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Add Record"></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Admin">
                                <Items>
                                     <telerik:RadMenuItem Visible="true" Text="Data Field Management"></telerik:RadMenuItem>
                                     <telerik:RadMenuItem Visible="true" Text="Data Processing Reports"></telerik:RadMenuItem>
                                     <telerik:RadMenuItem Text="User Management"></telerik:RadMenuItem>
                                     <telerik:RadMenuItem Visible="true" Text="Group Management"></telerik:RadMenuItem>
                                     <telerik:RadMenuItem Text="Social Network Management"></telerik:RadMenuItem>
                                     <telerik:RadMenuItem Text="Social Data Feed Management"></telerik:RadMenuItem>
                                     <telerik:RadMenuItem Visible="true" Text="Data Modeler"></telerik:RadMenuItem>     

                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Super Admin" ExpandMode="ClientSide" ></telerik:RadMenuItem>
                        </Items>

                    </telerik:RadMenu>
                </td>
            </tr>
        </table>

        <div>
            <asp:Label ID="YouAreHere" runat="server" Text="You are here: Manage>>Emails"></asp:Label>
            
            
        </div>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
        
    </div>
    </form>
    <script type="text/javascript">
        function _destroyTree2(element) {
            if (element.nodeType === 1) {
                var childNodes = element.childNodes;
                for (var i = childNodes.length - 1; i >= 0; i--) {
                    var node = childNodes[i];
                    if (node.nodeType === 1) {
                        if (node.dispose && typeof (node.dispose) === "function") {
                            node.dispose();
                        }
                        else if (node.control && typeof (node.control.dispose) === "function") {
                            node.control.dispose();
                        }
                        var behaviors = Sys.UI.Behavior.getBehaviors(node);
                        for (var j = behaviors.length - 1; j >= 0; j--) {
                            behaviors[j].dispose();
                        }
                        this._destroyTree(node);
                    }
                }
            }
        }

        Sys.WebForms.PageRequestManager.getInstance()._destroyTree = _destroyTree2
    </script>

</body>
</html>






<<<-------------------------------------------------------------NTier.aspx------------------------------------------------------------------------------>>>>

<%@ Page Title="" Language="C#" MasterPageFile="~/Main.Master" AutoEventWireup="true" CodeBehind="NTier.aspx.cs" Inherits="Email_Management.NTier" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">


    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="NTierGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="NTierGrid"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>


 <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="" />
  <div>
   <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <div>
       <telerik:RadPanelBar ID="RadPanelBar" runat="server" Width="150%">
          <Items>
            <telerik:RadPanelItem Value="Grid" Text="EmailManagement" Expanded="true" runat="server">
                <Items>
                    <telerik:RadPanelItem Expanded="true" runat="server" Selected="true" Value="EmailGrid">
                        <ItemTemplate>      
                            <telerik:RadGrid ID="NTierGrid" runat="server" AllowPaging="True" AllowSorting="True" Skin="WebBlue" AllowMultiRowEdit="True" GridLines="None"
                            Width="100%" OnNeedDataSource="NTierGrid_NeedDataSource"  AllowMultiRowSelection="True" OnItemCreated="NTierGrid_ItemCreated"
                            OnItemDataBound="NTierGrid_ItemDataBound" OnItemCommand="NTierGrid_ItemCommand" OnPageIndexChanged="NTierGrid_PageIndexChanged" OnPageSizeChanged="NTierGrid_PageSizeChanged">
                            <HeaderContextMenu>
                            </HeaderContextMenu>
                            <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />
                            <ClientSettings>
                                <Selecting  AllowRowSelect="true"/>
                            </ClientSettings>
                            <MasterTableView CommandItemDisplay="Top" AllowPaging="true" AllowAutomaticDeletes="false" AllowAutomaticInserts="false" AllowAutomaticUpdates="false"
                            AllowSorting="true" FilterItemStyle-Height="10px" FilterItemStyle-Width="100px" ShowHeadersWhenNoRecords="true">

                            <CommandItemTemplate>
                                <div style="height: 28px;">
                                    <asp:ImageButton ImageUrl="images/edit.png"
                                        Style="margin-left: 4px; margin-top: 2px; width:20px; height:20px; vertical-align: middle;" ID="btnEdit"
                                        runat="server" ToolTip="Edit" CausesValidation="False" />
                                    <asp:ImageButton ImageUrl="images/delete.png" OnClick="btnDelete_Click"
                                        Style="margin-left: 11px; margin-top: 2px; vertical-align: middle;" ID="btnDelete"
                                        runat="server" ToolTip="Delete" CausesValidation="False" />
                     
                                </div>
                            </CommandItemTemplate>
                
                            <Columns>
                                <telerik:GridBoundColumn DataField="EmailId" UniqueName="columnEmailId" HeaderTooltip="EmailId" HeaderText="ID" Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="FromAddress" HeaderTooltip="EmailFrom" UniqueName="columnEmailFrom" FilterControlWidth="70%" Visible="false">
                                    <HeaderStyle Width="150px" Height="15px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="Message" HeaderTooltip="EmailMessage" UniqueName="columnEmailMessage" FilterControlWidth="70%" Visible="false"
                                    HtmlEncode="true">
                                    <HeaderStyle Width="150px" Height="15px" />
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="PriorityId" HeaderTooltip="PriorityID" UniqueName="columnPriority" Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="CreatedBy" HeaderTooltip="CreatedBy" UniqueName="columnCreatedBy" Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="ModifiedBy" HeaderTooltip="ModifiedBy" UniqueName="columnModifiedBy" Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="ToAddresses" HeaderTooltip="ToAddresses" UniqueName="columnToAddresses" Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="CompId" HeaderTooltip="CompId" UniqueName="columnCompId" Visible="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn DataField="CreatedOn" HeaderTooltip="CreatedOn" UniqueName="columnCreatedOn" Visible="false">
                                </telerik:GridBoundColumn>

                                <telerik:GridTemplateColumn UniqueName="ActionHeader" HeaderText="Edit/Delete" HeaderTooltip="Edit/Delete" AllowFiltering="false" HeaderStyle-Width="20px">
                                    <ItemTemplate>
                                        <asp:Panel ID="EditButtonPanel" runat="server" Width="72px">&nbsp;
                                            <asp:ImageButton  ImageUrl="~/images/edit.png" style="width:20px; height:20px" ToolTip="Edit" OnClick="btnEdit_Click" ID="EditButton" runat="server" CausesValidation="false"/> &nbsp;&nbsp;
                                            <asp:ImageButton  ImageUrl="~/images/delete.png" style="width:20px; height:20px" ToolTip="Delete" ID="DeleteButton" OnClick="DeleteButton_Click" runat="server" CausesValidation="false"/>
                                        </asp:Panel>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                            </Columns>
                
                        </MasterTableView>
                        <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                            <Selecting  AllowRowSelect="true"/>
                        </ClientSettings>
                    
                        </telerik:RadGrid>
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
         </telerik:RadPanelItem>
          <telerik:RadPanelItem Enabled="true" Visible="true" Expanded="true" runat="server" Value="EmailMasterPanel" Text="Edit Email">
              <Items>
                  <telerik:RadPanelItem Enabled="true" Expanded="true" Value="EmailPanel">
                      <ItemTemplate>
                          <div id="DivExternalForm" runat="server" style="border:1px solid groove; background-color:#E8E8E8;">
                              <asp:Panel ID="pnlExternalForm" runat="server" Visible="true">
                                 <div>
                                     <%--<asp:TextBox ID="MyTextBox" runat="server" ClientIDMode="Static" CausesValidation="false" BackColor="Yellow" BorderColor="Tomato" ToolTip="Your Text"></asp:TextBox>--%>
                                    <table style="border:0; margin-top:1px; width: 100%">
                                      
                                      <tr width="100%">
                                          <td width="20%">
                                              <asp:Label ID="LblEmailId" runat="server" Text="Emaild" ></asp:Label>
                                              
                                          </td>
                                      </tr>
                                      <tr>
                                          <td>
                                              <asp:Label ID="LblFromAddress" runat="server" Text="From"></asp:Label>
                                          </td>
                                          <td>
                                              <asp:TextBox ID="TextBoxFromAddress" runat="server" CausesValidation="false" ClientIDMode="Static" Width="400px"></asp:TextBox>
                                              <%--<telerik:RadTextBox ID="radTextBoxFromAddress" CausesValidation="false" runat="server" Width="400px"></telerik:RadTextBox>--%>
                                             
                                          </td>
                                      </tr>
                                      <tr width="100%">
                                          <td>
                                              <asp:Label ID="LblToAddress" runat="server" Text="To"></asp:Label>
                                          </td>
                                          <td>
                                              <telerik:RadTextBox ID="radTextBoxToAddress" runat="server" Width="400px"></telerik:RadTextBox>
                                          </td>
                                      </tr>

                                      <tr width="100%">
                                          <td>
                                              <asp:Label ID="LblSubject" runat="server" Text="Subject"></asp:Label>
                                          </td>
                                          <td>
                                              <telerik:RadTextBox ID="radTextBoxSubject" runat="server" Width="400px"></telerik:RadTextBox>
                                          </td>
                                      </tr>

                                      <tr width="100%">
                                          <td>
                                              <asp:Label ID="LblMessage" runat="server" Text="Message"></asp:Label>
                                          </td>
                                          <td>
                                              <telerik:RadTextBox ID="radTextBoxMessage" runat="server" Width="400px" Height="150px" Visible="false" TextMode="MultiLine"></telerik:RadTextBox>
                                              <telerik:RadEditor ID="radEditorMail" runat="server" Width="600px" BackColor="White" AllowScripts="true"
                                                AutoResizeHeight="false" EnableResize="false" NewLineBr="true" >
                                                    <Tools>
                                                            <telerik:EditorToolGroup>
                                                                    <telerik:EditorSeparator Visible="true" />
                                                                    <telerik:EditorTool Name="Copy" Text="Copy" />
                                                                    <telerik:EditorTool Name="Print" Text="Print" />
                                                                    <telerik:EditorDropDown Name="FontName" />
                                                                    <telerik:EditorTool Name="ConvertToUpper" Text="Convert to Upper Case" />
                                                                    <telerik:EditorTool Name="ConvertToLower" Text="Convert to Lower Case" />
                                                                    <telerik:EditorTool Name="Bold" Text="Bold" />
                                                                    <telerik:EditorTool Name="Italic" Text="Italic" />
                                                                    <telerik:EditorTool Name="Underline" Text="Underline" />
                                                                    <telerik:EditorTool Name="JustifyLeft" Text="Align Left" />
                                                                    <telerik:EditorTool Name="JustifyCenter" Text="Align Center" />
                                                                    <telerik:EditorTool Name="JustifyRight" Text="Align Right" />
                                                                    <telerik:EditorTool Name="InsertOrderedList" Text="Numbered List" />
                                                                    <telerik:EditorTool Name="InsertUnorderedList" Text="Bullet List" />
                                                              
                                                                      <telerik:EditorTool Name="LinkManager" Text="Link Manager" />
                                                                    <telerik:EditorTool Name="JustifyFull" Text="justify" />
                                                                    <telerik:EditorTool Name="ForeColor" Text="Foreground color" />
                                                                    <telerik:EditorTool Name="AjaxSpellCheck" Text="Ajax Spell Checker" />
                                                                    <telerik:EditorTool Name="Subscript" Text="Subscript" />
                                                                    <telerik:EditorTool Name="Superscript" Text="Superscript" />
                                                                    <telerik:EditorTool Name="BackColor" Text="BackColor" />
                                                                    <telerik:EditorTool Name="FontSize" Text="FontSize" />
                                                                    <telerik:EditorTool Name="Paste" Text="Paste" />
                                                                    <telerik:EditorTool Name="Cut" Text="Cut" />
                                                            </telerik:EditorToolGroup>
                                                   </Tools>
                                              </telerik:RadEditor>
                                          </td>
                                      </tr>
                                      <tr>
                                          <td>
                                              <asp:Label ID="LblModifiedBy" runat="server" Text="Modified By"></asp:Label>
                                          </td>
                                          <td>
                                              <telerik:RadTextBox ID="radTextBoxModifiedBy" runat="server" Width="300px"></telerik:RadTextBox>
                                          </td>
                                      </tr>

                                      
                                      <tr>
                                          <td>

                                          </td>
                                          <td>
                                              <asp:ImageButton ID="btnSave" ImageUrl="images/save.png" runat="server" OnClick="btnSave_Click" CausesValidation="false" ToolTip="Save/Update"/>&nbsp;&nbsp;&nbsp;
                                              <asp:ImageButton ID="btnCancel" ImageUrl="images/cancel.png" runat="server" OnClick="btnCancel_Click" CausesValidation="false" ToolTip="Cancel"/>
                                          </td>
                                      </tr>
                                  </table>
                                </div>

                              </asp:Panel>

                          </div>
                      </ItemTemplate>

                  </telerik:RadPanelItem>
              </Items>

          </telerik:RadPanelItem>  
        </Items>
           <CollapseAnimation Duration="100" Type="None"/>
           <ExpandAnimation Duration="100" Type="None" />
     </telerik:RadPanelBar>
    </div>

   </telerik:RadAjaxPanel>
  </div>

    
</asp:Content>



<<<<------------------------------------------------------------------NTier.aspx.cs--------------------------------------------------->>>>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using BusinessLayer;
using DataAccessLayer;
using System.Data;
using Telerik.Web.UI;

namespace Email_Management
{
    public partial class NTier : System.Web.UI.Page
    {
        EmailBL objEmailBL = new EmailBL();
        protected void Page_Load(object sender, EventArgs e)
        {
            //-----this is for Simple DataBinding---
            //DataTable dtEmail = objEmailBL.GetEmailData("119");
            //NTierGrid.DataSource = dtEmail as DataTable;
            //NTierGrid.DataBind();
            
           
        }

        public void BindData()
        {
            RadGrid radNTGrid = (RadGrid)RadPanelBar.FindItemByValue("EmailGrid").FindControl("NTierGrid");
            DataTable ds = new DataTable();
            ds = objEmailBL.GetEmailData("119");
            if (ds != null)
            {
                radNTGrid.DataSource = ds;
            }
        }


        protected void NTierGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {

            BindData();
            
        }

        protected void NTierGrid_ItemCreated(object sender, GridItemEventArgs e)
        {

        }

        protected void NTierGrid_ItemDataBound(object sender, GridItemEventArgs e)
        {

        }

        protected void NTierGrid_ItemCommand(object source, GridCommandEventArgs e)
        {

        }

        protected void btnDelete_Click(object sender, ImageClickEventArgs e)
        {

        }

        protected void btnEdit_Click(object sender, ImageClickEventArgs e)
        {
            ImageButton editButton = (ImageButton)sender;
            Panel selectdPanel = (Panel)editButton.Parent;
            GridDataItem dataItem = (GridDataItem)selectdPanel.NamingContainer;

            
            //string fromAddd = dataItem["ColumnEmailFrom"].Text;

            //TextBox txtemail = (TextBox)RadPanelBar.FindItemByValue("EmailPanel").FindControl("MyTextBox");
            //txtemail.Text = fromAddd;
            //txtemail.BackColor = System.Drawing.Color.Aqua;

            string fromAdd=dataItem["columnEmailFrom"].Text;
            TextBox txtFrom = (TextBox)RadPanelBar.FindItemByValue("EmailPanel").FindControl("TextBoxFromAddress");
            txtFrom.Text = fromAdd;
           
            // ((Label)RadPanelBar.FindItemByValue("EmailPanel").FindControl("LblEmailId")).Text = dataItem["columnEmailId"].Text;
            //Label txtemail = (Label)RadPanelBar.FindItemByValue("EmailPanel").FindControl("LblEmailId");
            //txtemail.Text = emailid;
            //((RadTextBox)RadPanelBar.FindItemByValue("EmailPanel").FindControl("radTextBoxFromAddress")).Text = dataItem["columnEmailId"].Text;
        }


        protected void EditButton_Click(object sender, ImageClickEventArgs e)
        {

        }

        protected void DeleteButton_Click(object sender, ImageClickEventArgs e)
        {

        }

        protected void NTierGrid_PageIndexChanged(object source, GridPageChangedEventArgs e)
        {
            BindData();
            
        }

        protected void NTierGrid_PageSizeChanged(object source, GridPageSizeChangedEventArgs e)
        {
            BindData();
            
        }

        protected void btnSave_Click(object sender, ImageClickEventArgs e)
        {

        }

        protected void btnCancel_Click(object sender, ImageClickEventArgs e)
        {

        }
    }
}



<<<<<-----------------------------------------------------Web.Config-------------------------------------------------------->>>>>

<?xml version="1.0"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <appSettings>
    <add key="connectionstring" value="Server=192.168.1.61;port=10080;database=xtlytics_db_frontend_dev_v8_5;user id=pa_dev;password=12!@#$34;pooling=true;Charset=utf8"/>
  </appSettings>
  <connectionStrings/>
  <!--
    For a description of web.config changes for .NET 4.5 see http://go.microsoft.com/fwlink/?LinkId=235367.

    The following attributes can be set on the <httpRuntime> tag.
      <system.Web>
        <httpRuntime targetFramework="4.5" />
      </system.Web>
  -->
  <system.web>
    <compilation debug="true" targetFramework="4.5.1"/>
    <httpHandlers>
      <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false"/>
    </httpHandlers>
    <pages controlRenderingCompatibilityVersion="4.0"/>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>
      <add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource"/>
    </handlers>
  </system.webServer>
</configuration>

[Avnish]

Hello Telerik Team,
Im trying to make an email management using telerik with 3 Tier architecture in asp.Net.

I
have create a master page. Then a web page using this master page. I
have to show a grid which could display "From", "To", "Message",
createdOn etc on the grid. I have attached edit and delete button
through item template image button.
I am using a panel below the
RadGrid so that when i click on edit template button this panel will
open. this panel contains label names and their corresponding text
boxes.

Now when i click on edit template image button....the
values from the corresponding row should be filled in the textboxes of
the down panel.

but when i click on the edit template image
button, the objects in between and that corresponding textbox 's object
too have found (got assigned) the value (as i can check it through break
functionality of visual studio) but the value is not displaying on that
textbox.

please help me in this way as soon as possible.
Im sending you the code of main.master, NTier.aspx & NTier.aspx.cs


<<---------------------------------Main.Master--------------------------------------->>

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Main.master.cs" Inherits="Email_Management.Main" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Email-Management</title>
    <link href="css/Header.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" AsyncPostBackTimeout="360000"></asp:ScriptManager>

        <table class="table1">
            <tr>
                <td class="column1">
                    &nbsp;<img src="images/Xtlytics_Logo.png" class="logo-image"/>
                </td>
               
<td class="column2">&nbsp;<asp:Label ID="lblWel"
runat="server" Text="Welcome,"
CssClass="welcome-user"></asp:Label>
                   
<asp:Label ID="lblUsername" runat="server" Text=" "
CssClass="welcome-user bold-txt"></asp:Label>
                    <span class="Seprator">|</span>
                   
<asp:ImageButton ID="ImageButton1" runat="server" ToolTip="Logout"
OnClick="btnLogout" CssClass="logout-image"
ImageUrl="~/images/logout.png"/>
                </td>
            </tr>
        </table>

        <table width="100%">
            <tr>
                <td>
                    <telerik:RadMenu ID="Menu" runat="server" EnableSelection="true" Skin="Telerik">
                        <ExpandAnimation Type="OutQuart" Duration="300" />
                        <CollapseAnimation Type="OutQuart" Duration="300" />
                        <Items>
                            <telerik:RadMenuItem Text="Insurance">
                                <Items>

                                </Items>

                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="HealthCare" ExpandMode="ClientSide">
                                <Items>
                                    <telerik:RadMenuItem Text="Big Data Explorer"></telerik:RadMenuItem>
                                </Items>

                            </telerik:RadMenuItem>

                            <telerik:RadMenuItem Text="Social Media" ExpandMode="ClientSide">
                                <Items>
                                    <telerik:RadMenuItem Text="Company"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Competitor"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Product"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Efluencer"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Swot"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Name Perceptual"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Brand Association"></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Analysis">
                                <Items>
                                    <telerik:RadMenuItem Visible="true" Text="Report Designer">
                                        <Items>
                                            <telerik:RadMenuItem Text="Correlation Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Clustering Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Chart Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Forecasting Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Regression Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Simulation Designer"></telerik:RadMenuItem>
                                           
<telerik:RadMenuItem Text="Predictive Model
Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Tag cloud designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Entities Designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Topics designer"></telerik:RadMenuItem>
                                            <telerik:RadMenuItem Text="Data report designer"></telerik:RadMenuItem>
                                        </Items>
                                   </telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Dashbaord Designer" Visible="true">

                                    </telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Report">
                                <Items>
                                    <telerik:RadMenuItem Text="Saved Reports"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Ad-Hoc Report"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Causation Clues"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Your DashBoard" ></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Predictive Reports"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Simulation Reports" ></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Dashboard">
                                <Items>

                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Manage">
                                <Items>
                                     <telerik:RadMenuItem Text="Alert"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Track"></telerik:RadMenuItem>
                                     <telerik:RadMenuItem Text="Engage"></telerik:RadMenuItem>  
                                    <telerik:RadMenuItem Text="Tasks"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Emails"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Notes"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="External Data"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Concept"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Change Password"></telerik:RadMenuItem>
                                    <telerik:RadMenuItem Text="Add Record"></telerik:RadMenuItem>
                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Admin">
                                <Items>
                                    
<telerik:RadMenuItem Visible="true" Text="Data Field
Management"></telerik:RadMenuItem>
                                    
<telerik:RadMenuItem Visible="true" Text="Data Processing
Reports"></telerik:RadMenuItem>
                                     <telerik:RadMenuItem Text="User Management"></telerik:RadMenuItem>
                                    
<telerik:RadMenuItem Visible="true" Text="Group
Management"></telerik:RadMenuItem>
                                     <telerik:RadMenuItem Text="Social Network Management"></telerik:RadMenuItem>
                                     <telerik:RadMenuItem Text="Social Data Feed Management"></telerik:RadMenuItem>
                                    
<telerik:RadMenuItem Visible="true" Text="Data
Modeler"></telerik:RadMenuItem>     

                                </Items>
                            </telerik:RadMenuItem>
                            <telerik:RadMenuItem Text="Super Admin" ExpandMode="ClientSide" ></telerik:RadMenuItem>
                        </Items>

                    </telerik:RadMenu>
                </td>
            </tr>
        </table>

        <div>
            <asp:Label ID="YouAreHere" runat="server" Text="You are here: Manage>>Emails"></asp:Label>
            
            
        </div>
    <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
        
    </div>
    </form>
    <script type="text/javascript">
        function _destroyTree2(element) {
            if (element.nodeType === 1) {
                var childNodes = element.childNodes;
                for (var i = childNodes.length - 1; i >= 0; i--) {
                    var node = childNodes[i];
                    if (node.nodeType === 1) {
                        if (node.dispose && typeof (node.dispose) === "function") {
                            node.dispose();
                        }
                        else if (node.control && typeof (node.control.dispose) === "function") {
                            node.control.dispose();
                        }
                        var behaviors = Sys.UI.Behavior.getBehaviors(node);
                        for (var j = behaviors.length - 1; j >= 0; j--) {
                            behaviors[j].dispose();
                        }
                        this._destroyTree(node);
                    }
                }
            }
        }

        Sys.WebForms.PageRequestManager.getInstance()._destroyTree = _destroyTree2
    </script>

</body>
</html>






<<<-------------------------------------------------------------NTier.aspx------------------------------------------------------------------------------>>>>

<%@
Page Title="" Language="C#" MasterPageFile="~/Main.Master"
AutoEventWireup="true" CodeBehind="NTier.aspx.cs"
Inherits="Email_Management.NTier" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">


    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="NTierGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="NTierGrid"></telerik:AjaxUpdatedControl>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>


 <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="" />
  <div>
   <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
    <div>
       <telerik:RadPanelBar ID="RadPanelBar" runat="server" Width="150%">
          <Items>
            <telerik:RadPanelItem Value="Grid" Text="EmailManagement" Expanded="true" runat="server">
                <Items>
                    <telerik:RadPanelItem Expanded="true" runat="server" Selected="true" Value="EmailGrid">
                        <ItemTemplate>      
                           
<telerik:RadGrid ID="NTierGrid" runat="server" AllowPaging="True"
AllowSorting="True" Skin="WebBlue" AllowMultiRowEdit="True"
GridLines="None"
                            Width="100%"
OnNeedDataSource="NTierGrid_NeedDataSource" 
AllowMultiRowSelection="True" OnItemCreated="NTierGrid_ItemCreated"
                           
OnItemDataBound="NTierGrid_ItemDataBound"
OnItemCommand="NTierGrid_ItemCommand"
OnPageIndexChanged="NTierGrid_PageIndexChanged"
OnPageSizeChanged="NTierGrid_PageSizeChanged">
                            <HeaderContextMenu>
                            </HeaderContextMenu>
                            <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />
                            <ClientSettings>
                                <Selecting  AllowRowSelect="true"/>
                            </ClientSettings>
                           
<MasterTableView CommandItemDisplay="Top" AllowPaging="true"
AllowAutomaticDeletes="false" AllowAutomaticInserts="false"
AllowAutomaticUpdates="false"
                           
AllowSorting="true" FilterItemStyle-Height="10px"
FilterItemStyle-Width="100px" ShowHeadersWhenNoRecords="true">

                            <CommandItemTemplate>
                                <div style="height: 28px;">
                                    <asp:ImageButton ImageUrl="images/edit.png"
                                       
Style="margin-left: 4px; margin-top: 2px; width:20px; height:20px;
vertical-align: middle;" ID="btnEdit"
                                        runat="server" ToolTip="Edit" CausesValidation="False" />
                                    <asp:ImageButton ImageUrl="images/delete.png" OnClick="btnDelete_Click"
                                        Style="margin-left: 11px; margin-top: 2px; vertical-align: middle;" ID="btnDelete"
                                        runat="server" ToolTip="Delete" CausesValidation="False" />
                     
                                </div>
                            </CommandItemTemplate>
                
                            <Columns>
                               
<telerik:GridBoundColumn DataField="EmailId"
UniqueName="columnEmailId" HeaderTooltip="EmailId" HeaderText="ID"
Visible="false">
                                </telerik:GridBoundColumn>
                               
<telerik:GridBoundColumn DataField="FromAddress"
HeaderTooltip="EmailFrom" UniqueName="columnEmailFrom"
FilterControlWidth="70%" Visible="false">
                                    <HeaderStyle Width="150px" Height="15px" />
                                </telerik:GridBoundColumn>
                               
<telerik:GridBoundColumn DataField="Message"
HeaderTooltip="EmailMessage" UniqueName="columnEmailMessage"
FilterControlWidth="70%" Visible="false"
                                    HtmlEncode="true">
                                    <HeaderStyle Width="150px" Height="15px" />
                                </telerik:GridBoundColumn>
                               
<telerik:GridBoundColumn DataField="PriorityId"
HeaderTooltip="PriorityID" UniqueName="columnPriority"
Visible="false">
                                </telerik:GridBoundColumn>
                               
<telerik:GridBoundColumn DataField="CreatedBy"
HeaderTooltip="CreatedBy" UniqueName="columnCreatedBy"
Visible="false">
                                </telerik:GridBoundColumn>
                               
<telerik:GridBoundColumn DataField="ModifiedBy"
HeaderTooltip="ModifiedBy" UniqueName="columnModifiedBy"
Visible="false">
                                </telerik:GridBoundColumn>
                               
<telerik:GridBoundColumn DataField="ToAddresses"
HeaderTooltip="ToAddresses" UniqueName="columnToAddresses"
Visible="false">
                                </telerik:GridBoundColumn>
                               
<telerik:GridBoundColumn DataField="CompId" HeaderTooltip="CompId"
UniqueName="columnCompId" Visible="false">
                                </telerik:GridBoundColumn>
                               
<telerik:GridBoundColumn DataField="CreatedOn"
HeaderTooltip="CreatedOn" UniqueName="columnCreatedOn"
Visible="false">
                                </telerik:GridBoundColumn>

                               
<telerik:GridTemplateColumn UniqueName="ActionHeader"
HeaderText="Edit/Delete" HeaderTooltip="Edit/Delete"
AllowFiltering="false" HeaderStyle-Width="20px">
                                    <ItemTemplate>
                                        <asp:Panel ID="EditButtonPanel" runat="server" Width="72px">&nbsp;
                                           
<asp:ImageButton  ImageUrl="~/images/edit.png" style="width:20px;
height:20px" ToolTip="Edit" OnClick="btnEdit_Click" ID="EditButton"
runat="server" CausesValidation="false"/> &nbsp;&nbsp;
                                           
<asp:ImageButton  ImageUrl="~/images/delete.png" style="width:20px;
height:20px" ToolTip="Delete" ID="DeleteButton"
OnClick="DeleteButton_Click" runat="server"
CausesValidation="false"/>
                                        </asp:Panel>
                                    </ItemTemplate>
                                </telerik:GridTemplateColumn>
                            </Columns>
                
                        </MasterTableView>
                        <ClientSettings AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                            <Selecting  AllowRowSelect="true"/>
                        </ClientSettings>
                    
                        </telerik:RadGrid>
                    </ItemTemplate>
                </telerik:RadPanelItem>
            </Items>
         </telerik:RadPanelItem>
         
<telerik:RadPanelItem Enabled="true" Visible="true" Expanded="true"
runat="server" Value="EmailMasterPanel" Text="Edit Email">
              <Items>
                  <telerik:RadPanelItem Enabled="true" Expanded="true" Value="EmailPanel">
                      <ItemTemplate>
                         
<div id="DivExternalForm" runat="server" style="border:1px solid
groove; background-color:#E8E8E8;">
                              <asp:Panel ID="pnlExternalForm" runat="server" Visible="true">
                                 <div>
                                    
<%--<asp:TextBox ID="MyTextBox" runat="server"
ClientIDMode="Static" CausesValidation="false" BackColor="Yellow"
BorderColor="Tomato" ToolTip="Your Text"></asp:TextBox>--%>
                                    <table style="border:0; margin-top:1px; width: 100%">
                                      
                                      <tr width="100%">
                                          <td width="20%">
                                              <asp:Label ID="LblEmailId" runat="server" Text="Emaild" ></asp:Label>
                                              
                                          </td>
                                      </tr>
                                      <tr>
                                          <td>
                                              <asp:Label ID="LblFromAddress" runat="server" Text="From"></asp:Label>
                                          </td>
                                          <td>
                                             
<asp:TextBox ID="TextBoxFromAddress" runat="server"
CausesValidation="false" ClientIDMode="Static"
Width="400px"></asp:TextBox>
                                             
<%--<telerik:RadTextBox ID="radTextBoxFromAddress"
CausesValidation="false" runat="server"
Width="400px"></telerik:RadTextBox>--%>
                                             
                                          </td>
                                      </tr>
                                      <tr width="100%">
                                          <td>
                                              <asp:Label ID="LblToAddress" runat="server" Text="To"></asp:Label>
                                          </td>
                                          <td>
                                             
<telerik:RadTextBox ID="radTextBoxToAddress" runat="server"
Width="400px"></telerik:RadTextBox>
                                          </td>
                                      </tr>

                                      <tr width="100%">
                                          <td>
                                              <asp:Label ID="LblSubject" runat="server" Text="Subject"></asp:Label>
                                          </td>
                                          <td>
                                             
<telerik:RadTextBox ID="radTextBoxSubject" runat="server"
Width="400px"></telerik:RadTextBox>
                                          </td>
                                      </tr>

                                      <tr width="100%">
                                          <td>
                                              <asp:Label ID="LblMessage" runat="server" Text="Message"></asp:Label>
                                          </td>
                                          <td>
                                             
<telerik:RadTextBox ID="radTextBoxMessage" runat="server"
Width="400px" Height="150px" Visible="false"
TextMode="MultiLine"></telerik:RadTextBox>
                                             
<telerik:RadEditor ID="radEditorMail" runat="server" Width="600px"
BackColor="White" AllowScripts="true"
                                                AutoResizeHeight="false" EnableResize="false" NewLineBr="true" >
                                                    <Tools>
                                                            <telerik:EditorToolGroup>
                                                                    <telerik:EditorSeparator Visible="true" />
                                                                    <telerik:EditorTool Name="Copy" Text="Copy" />
                                                                    <telerik:EditorTool Name="Print" Text="Print" />
                                                                    <telerik:EditorDropDown Name="FontName" />
                                                                   
<telerik:EditorTool Name="ConvertToUpper" Text="Convert to Upper
Case" />
                                                                   
<telerik:EditorTool Name="ConvertToLower" Text="Convert to Lower
Case" />
                                                                    <telerik:EditorTool Name="Bold" Text="Bold" />
                                                                    <telerik:EditorTool Name="Italic" Text="Italic" />
                                                                   
<telerik:EditorTool Name="Underline" Text="Underline" />
                                                                   
<telerik:EditorTool Name="JustifyLeft" Text="Align Left" />
                                                                   
<telerik:EditorTool Name="JustifyCenter" Text="Align Center" />
                                                                   
<telerik:EditorTool Name="JustifyRight" Text="Align Right" />
                                                                   
<telerik:EditorTool Name="InsertOrderedList" Text="Numbered List"
/>
                                                                   
<telerik:EditorTool Name="InsertUnorderedList" Text="Bullet List"
/>
                                                              
                                                                     
<telerik:EditorTool Name="LinkManager" Text="Link Manager" />
                                                                   
<telerik:EditorTool Name="JustifyFull" Text="justify" />
                                                                   
<telerik:EditorTool Name="ForeColor" Text="Foreground color" />
                                                                   
<telerik:EditorTool Name="AjaxSpellCheck" Text="Ajax Spell Checker"
/>
                                                                   
<telerik:EditorTool Name="Subscript" Text="Subscript" />
                                                                   
<telerik:EditorTool Name="Superscript" Text="Superscript" />
                                                                   
<telerik:EditorTool Name="BackColor" Text="BackColor" />
                                                                    <telerik:EditorTool Name="FontSize" Text="FontSize" />
                                                                    <telerik:EditorTool Name="Paste" Text="Paste" />
                                                                    <telerik:EditorTool Name="Cut" Text="Cut" />
                                                            </telerik:EditorToolGroup>
                                                   </Tools>
                                              </telerik:RadEditor>
                                          </td>
                                      </tr>
                                      <tr>
                                          <td>
                                             
<asp:Label ID="LblModifiedBy" runat="server" Text="Modified
By"></asp:Label>
                                          </td>
                                          <td>
                                             
<telerik:RadTextBox ID="radTextBoxModifiedBy" runat="server"
Width="300px"></telerik:RadTextBox>
                                          </td>
                                      </tr>

                                      
                                      <tr>
                                          <td>

                                          </td>
                                          <td>
                                             
<asp:ImageButton ID="btnSave" ImageUrl="images/save.png"
runat="server" OnClick="btnSave_Click" CausesValidation="false"
ToolTip="Save/Update"/>&nbsp;&nbsp;&nbsp;
                                             
<asp:ImageButton ID="btnCancel" ImageUrl="images/cancel.png"
runat="server" OnClick="btnCancel_Click" CausesValidation="false"
ToolTip="Cancel"/>
                                          </td>
                                      </tr>
                                  </table>
                                </div>

                              </asp:Panel>

                          </div>
                      </ItemTemplate>

                  </telerik:RadPanelItem>
              </Items>

          </telerik:RadPanelItem>  
        </Items>
           <CollapseAnimation Duration="100" Type="None"/>
           <ExpandAnimation Duration="100" Type="None" />
     </telerik:RadPanelBar>
    </div>

   </telerik:RadAjaxPanel>
  </div>

    
</asp:Content>



<<<<------------------------------------------------------------------NTier.aspx.cs--------------------------------------------------->>>>


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using BusinessLayer;
using DataAccessLayer;
using System.Data;
using Telerik.Web.UI;

namespace Email_Management
{
    public partial class NTier : System.Web.UI.Page
    {
        EmailBL objEmailBL = new EmailBL();
        protected void Page_Load(object sender, EventArgs e)
        {
            //-----this is for Simple DataBinding---
            //DataTable dtEmail = objEmailBL.GetEmailData("119");
            //NTierGrid.DataSource = dtEmail as DataTable;
            //NTierGrid.DataBind();
            
           
        }

        public void BindData()
        {
            RadGrid radNTGrid = (RadGrid)RadPanelBar.FindItemByValue("EmailGrid").FindControl("NTierGrid");
            DataTable ds = new DataTable();
            ds = objEmailBL.GetEmailData("119");
            if (ds != null)
            {
                radNTGrid.DataSource = ds;
            }
        }


        protected void NTierGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {

            BindData();
            
        }

        protected void NTierGrid_ItemCreated(object sender, GridItemEventArgs e)
        {

        }

        protected void NTierGrid_ItemDataBound(object sender, GridItemEventArgs e)
        {

        }

        protected void NTierGrid_ItemCommand(object source, GridCommandEventArgs e)
        {

        }

        protected void btnDelete_Click(object sender, ImageClickEventArgs e)
        {

        }

        protected void btnEdit_Click(object sender, ImageClickEventArgs e)
        {
            ImageButton editButton = (ImageButton)sender;
            Panel selectdPanel = (Panel)editButton.Parent;
            GridDataItem dataItem = (GridDataItem)selectdPanel.NamingContainer;

            
            //string fromAddd = dataItem["ColumnEmailFrom"].Text;

            //TextBox txtemail = (TextBox)RadPanelBar.FindItemByValue("EmailPanel").FindControl("MyTextBox");
            //txtemail.Text = fromAddd;
            //txtemail.BackColor = System.Drawing.Color.Aqua;

            string fromAdd=dataItem["columnEmailFrom"].Text;
            TextBox txtFrom = (TextBox)RadPanelBar.FindItemByValue("EmailPanel").FindControl("TextBoxFromAddress");
            txtFrom.Text = fromAdd;
           
           
//
((Label)RadPanelBar.FindItemByValue("EmailPanel").FindControl("LblEmailId")).Text
= dataItem["columnEmailId"].Text;
            //Label txtemail = (Label)RadPanelBar.FindItemByValue("EmailPanel").FindControl("LblEmailId");
            //txtemail.Text = emailid;
           

//((RadTextBox)RadPanelBar.FindItemByValue("EmailPanel").FindControl("radTextBoxFromAddress")).Text
= dataItem["columnEmailId"].Text;
        }


        protected void EditButton_Click(object sender, ImageClickEventArgs e)
        {

        }

        protected void DeleteButton_Click(object sender, ImageClickEventArgs e)
        {

        }

        protected void NTierGrid_PageIndexChanged(object source, GridPageChangedEventArgs e)
        {
            BindData();
            
        }

        protected void NTierGrid_PageSizeChanged(object source, GridPageSizeChangedEventArgs e)
        {
            BindData();
            
        }

        protected void btnSave_Click(object sender, ImageClickEventArgs e)
        {

        }

        protected void btnCancel_Click(object sender, ImageClickEventArgs e)
        {

        }
    }
}



<<<<<-----------------------------------------------------Web.Config-------------------------------------------------------->>>>>

<?xml version="1.0"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->
<configuration>
  <appSettings>
   
<add key="connectionstring"
value="Server=192.168.1.61;port=10080;database=xtlytics_db_frontend_dev_v8_5;user
id=pa_dev;password=12!@#$34;pooling=true;Charset=utf8"/>
  </appSettings>
  <connectionStrings/>
  <!--
    For a description of web.config changes for .NET 4.5 see http://go.microsoft.com/fwlink/?LinkId=235367.

    The following attributes can be set on the <httpRuntime> tag.
      <system.Web>
        <httpRuntime targetFramework="4.5" />
      </system.Web>
  -->
  <system.web>
    <compilation debug="true" targetFramework="4.5.1"/>
    <httpHandlers>
      <add path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource" verb="*" validate="false"/>
    </httpHandlers>
    <pages controlRenderingCompatibilityVersion="4.0"/>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <handlers>
     
<add name="Telerik_Web_UI_WebResource_axd" verb="*"
preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd"
type="Telerik.Web.UI.WebResource"/>
    </handlers>
  </system.webServer>
</configuration>