Telerik Forums
UI for ASP.NET AJAX Forum
9 answers
123 views
Hi again!
I am trying to get access to the controls on the template“s grid but says Null reference Exception dont know what errors I am doing in.
I just use a template to add new record and to edit a record. I am ussing in my code this

 

RadGridExpensesLines_InsertCommand(

 

 

 

 

 

protected

 

 

void RadGridExpensesLines_InsertCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)

 

 

 

 

{

 

 

 

 

if (e.CommandName == RadGrid.PerformInsertCommandName)

{

 

GridEditFormInsertItem editedItem = e.Item as GridEditFormInsertItem;

 

PurchaseInvoiceLine purchaseline = new PurchaseInvoiceLine();

purchaseline.ArticleName = (editedItem.FindControl(

 

"RadTextBoxArticleName") as TextBox).Text;
}

In my aspx:

<telerik:RadGrid ID="RadGridLines" runat="server" AutoGenerateColumns="false" GridLines="None" OnNeedDataSource="RadGridExpensesLines_NeedDataSource" OnInsertCommand="RadGridExpensesLines_InsertCommand">

 

<

 

 

asp:Button ID="ButtonInsert" Text="Insert" runat="server" CommandName="PerformInsert" Visible="true"></asp:Button>



I tried also with

protected

 

 

void RadGridExpensesLines_ItemCommand(object sender, GridCommandEventArgs e)


but any success!!!!
Please someone can tell me why can not access to my controls on the template?
Please really need a help!

 

 

Shinu
Top achievements
Rank 2
 answered on 14 Mar 2013
1 answer
291 views
Hi,

I have a grid, which contains some Checkbox columns.
In the SelectedIndexChanged event on the server, I am trying to read the checked status of the checkbox columns.
I have tried several different variations to get this, but I seem to be banging my head against a wall.
I'm sure this is fairly striaght forward, but I can't see where the problem lies, and I can't find an example of what I am trying to do.

Below are the different things I have tried - all of which give me a Null value exception.

All suggestions greatly appreciated.

Attached = ((System.Web.UI.WebControls.CheckBox)BaysGrid.SelectedItems[0].FindControl("bgAttached")).Checked;
 
Attached = ((System.Web.UI.WebControls.CheckBox)(BaysGrid.MasterTableView.GetSelectedItems()[0].Controls[0].Controls[0])).Checked;
 
Attached = ((System.Web.UI.WebControls.CheckBox)(BaysGrid.MasterTableView.GetSelectedItems()[0].FindControl("bgAttached"))).Checked;
 
Attached = Convert.ToBoolean(BaysGrid.SelectedItems[0].Cells[5].Text);

Grid name is BaysGrid, Markup for the specific column is:
<telerik:GridCheckBoxColumn DataField="bAttached" DataType="System.Boolean"
  FilterControlAltText="Filter bgAttached column" HeaderText="Attach"
  UniqueName="bgAttached">
  <HeaderStyle Width="40px" />
</telerik:GridCheckBoxColumn>



Thanks

Paul
Shinu
Top achievements
Rank 2
 answered on 14 Mar 2013
2 answers
253 views
I need to change a function in our company software that uses Radwindow so it uses jQuery ui dilog instead (for reasons beyond me).
function ShowPopupByWindow(_type, _targetControl, _radWindow) {
  var popupURL = 'finder.aspx?action=' + _type;
  
  // This is how the Radopen is working right now
  //var oWnd = window.radopen(popupURL, _radWindow);
   
  // This is what I want to implement
  selector = "#" + _targetControl;
  jQuery(selector).dialog({ modal : true, open:
    function () {
      $(this).load(popupURL);
    }
  });
}


however i get this error Uncaught TypeError: Cannot set property 'control' of undefined
Iuzzef
Top achievements
Rank 1
 answered on 14 Mar 2013
2 answers
70 views
I'm getting this error:

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).



Form this markup:

<%@ Reference Page="~/Checking.aspx" %>
<%@ Page Language="C#" MasterPageFile="~/OLBMaster.master" Title="Order Check Request"
    AutoEventWireup="true" CodeFile="CheckOrderCopy.aspx.cs" CodeFileBaseClass="CU.Session+Page"
    Inherits="BPOB.OrderCheckCopy" %>
 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<%--<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI, Version=2012.3.1205.40, Culture=neutral, PublicKeyToken=121fae78165ba3d4" %>--%>
 
 
<asp:Content runat="server" ID="Content0" ContentPlaceHolderID="HeadContent">
 
    <script type="text/javascript" src="js/validate.js"></script>
    <script type="text/javascript" src="js/jquery.validate.wrapper.js"></script>
    <script type="text/javascript">
         
        function ValidateOrderForm(sender, args)
        {
            $(document).ready(function ()
            {
                $('#aspnetForm').validate({ errorClass: 'ValidateError' });
                // validation rules
                $('#<%=accountNumber.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
                $('#<%=ckNumLabel.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
                $('#<%=dateLabel.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
                $('#<%=dateLabel.ClientID%>').rules('add', { date: true, messages: { date: ' Invalid Format' } });
                $('#<%=amountLabel.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
                $('#<%=amountLabel.ClientID%>').rules('add', { number: true, messages: { number: ' Invalid Input' } });
 
                if ($('#aspnetForm').valid()) {
                    args.set_cancel(false); //allow pressing to continue
                } else {
                    args.set_cancel(true); //abort processing
                }
            });
        }
 
        function ValidateFaxOrder(sender, args)
        {
 
            $(document).ready(function ()
            {
                $('#aspnetForm').validate({ errorClass: 'ValidateError' });
                //validation
                $('#<%=t_Phone_First3.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
                $('#<%=t_Phone_First3.ClientID%>').rules('add', { number: true, messages: { number: ' Invalid Input' } });
                $('#<%=t_Phone_First3.ClientID%>').rules('add', { minlength: 3, messages: { minlength: ' Too few' } });
                $('#<%=t_Phone_Second3.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
                $('#<%=t_Phone_Second3.ClientID%>').rules('add', { number: true, messages: { number: ' Invalid Input' } });
                $('#<%=t_Phone_Second3.ClientID%>').rules('add', { minlength: 3, messages: { minlength: ' Too few' } });
                $('#<%=t_Phone_Last4.ClientID%>').rules('add', { required: true, messages: { required: ' Required' } });
                $('#<%=t_Phone_Last4.ClientID%>').rules('add', { number: true, messages: { number: ' Invalid Input' } });
                $('#<%=t_Phone_Last4.ClientID%>').rules('add', { minlength: 4, messages: { minlength: ' Too few' } });
                if ($('#aspnetForm').valid()) {
                    args.set_cancel(false); //allow pressing to continue
                } else {
                    args.set_cancel(true); //abort processing
                }
            });
 
 
        }
         
 
    </script>
</asp:Content>
 
     
 
<asp:Content ID="Content1" runat="server" ContentPlaceHolderID="ContentBody">
     
    <asp:label id="statusLabel" runat="server" ForeColor="Red" Font-Names="Arial" Font-Bold="True">Status</asp:label>
 
    <asp:panel id="mailCheck" Runat="server">
        <table cellSpacing="0" cellPadding="4" width="95%" align="center" bgColor="white">
            <tr>
                <td><b>This check is no longer viewable online, however you can request a copy be
                        mailed to you.</b>
                </td>
            </tr>
            <tr>
                <td>
                    <table cellSpacing="5" cellPadding="3" width="500" align="center" border="0">
                        <tr class="AlternateRow2">
                            <td><b>Name:</b></td>
                            <td>
                                <asp:Label id="nameLabel" runat="server"></asp:Label></td>
                        </tr>
                        <tr class="AlternateRow1">
                            <td><b>Email:</b></td>
                            <td>
                                <asp:Label id="emailLabel" runat="server"></asp:Label></td>
                        </tr>
                        <tr class="AlternateRow2">
                            <td><b>Account:</b></td>
                            <td><asp:DropdownList id="accountNumber" runat="server"></asp:DropdownList>
                            </td>
                        </tr>
                        <tr class="AlternateRow1">
                            <td><b>Check #:</b></td>
                            <td>
                                <asp:TextBox id="ckNumLabel" runat="server"></asp:TextBox></td>
                        </tr>
                        <tr class="AlternateRow2">
                            <td><b>Date Cleared:</b></td>
                            <td>
                                <asp:TextBox id="dateLabel" runat="server"></asp:TextBox></td>
                        </tr>
                        <tr class="AlternateRow1">
                            <td><b>Amount:</b></td>
                            <td>
                                <asp:TextBox id="amountLabel" runat="server"></asp:TextBox></td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td><b>Please note that a service fee of $3.00 per check will apply to your request.
                        We will send a copy of the check (both the front & back side) to the mailing
                        address we have on file for you via the U.S. Postal Service. If the check
                        cleared within the last year we will put it in the mail within 3-5 business
                        days. If the check cleared over a year ago we will put it in the mail within 10
                        business days. Need it faster?
                        <asp:LinkButton id="faxLink" OnClick="faxLink_Click" runat="server">Click Here</asp:LinkButton>.</b><br>
                    <br>
                </td>
            </tr>
            <tr>
                <TD align="center">
 
                    <telerik:RadButton ID="OrderButton" runat="server" Text="RadButton"></telerik:RadButton>
 
                    <%--<asp:ImageButton id="OrderButton" OnClick="OrderButton_Click" runat="server" ImageUrl="images/buttons/Button_OrderCheckCopy.gif" ToolTip="Order Check Copy"></asp:ImageButton>--%></td>
            </tr>
        </table>
    </asp:panel>
 
    <asp:panel id="faxIt" Runat="server">
        <table>
            <tr>
                <td class="TextGreenBold">We can fax the copy to you, but PLEASE NOTE:</td>
            </tr>
            <tr>
                <td>
                    <ul>
                        <li>
                            <b>We cannot guarantee that the copy will be faxed at a specific time, so if you
                                are uncomfortable with your personal checking account information sitting on a
                                fax machine for a time before you pick it up, you should not choose this
                                option.</b><br>
                            <br>
                        <li>
                            <b>The information on the back of the check can often be difficult to read on a
                                faxed copy. So if you choose this option we will also mail a copy to you.</b>
                        </li>
                    </ul>
                    <table class="AccountTable" align="center">
                        <tr>
                            <td class="TextBlueBold">Fax Number:</td>
                            <td>
                                <table cellSpacing="0" cellPadding="0">
                                    <tr>
                                        <td>(
                                            <asp:TextBox id="t_Phone_First3" Runat="server" MaxLength="3" Width="30px"></asp:TextBox>)</td>
                                        <td>
                                            <asp:TextBox id="t_Phone_Second3" Runat="server" MaxLength="3" Width="30px"></asp:TextBox>-</td>
                                        <td>
                                            <asp:TextBox id="t_Phone_Last4" Runat="server" MaxLength="4" Width="40px"></asp:TextBox></td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <asp:ImageButton id="faxSubmitButton" OnClick="faxSubmitButton_Click" runat="server" ImageUrl="images/buttons/Button_Submit_Blue.gif" ToolTip="Submit"></asp:ImageButton></td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </asp:panel>
 
</asp:Content>

And it's driving me crazy - can't find a solution.  I've searched against the error message and can't find a solution that has worked thus far.

What I've been trying to work with is RadScriptBlock and RadCodeBlock.


I'm at my wit's end :-(

Suggestions?
Chaz
Top achievements
Rank 1
 answered on 13 Mar 2013
5 answers
151 views
Hello,

I've discovered a problem with the multi-select drag when scrolling is enabled on the grid.  When I turn off scrolling, it works fine.
If I start the drag in the lower right part of the grid and drag upwards and to the left, the semi-transparent "selection box" does not render in the right place.  Instead of having its lower right corner placed where I started the drag (which it should and does without scrolling enabled), the selection box doesn't even appear until about halfway up the grid.  When I release the left mouse button to finish the drag-selected, the CORRECT rows are still selected, even though the selection box displayed improperly.

I just took a look at the RadGrid demo site to see if I could reproduce this.  But oddly the demos for scrolling do not have multi-selection enabled.  Conversely, the demos for multi-selection do not have scrolling enabled!!  Is there a demo anywhere that shows scrolling plus client row multi-select (via drag selection box) at the same time??

I've attached screenshot sequence showing this problem. Please help!
Tony
Top achievements
Rank 1
 answered on 13 Mar 2013
10 answers
250 views
I'm using the following code to center all my elements on page which cause RadAutoCompletePopup to appear wherever other than location it must be !

EDIT : RadAutoCompleteBox position is fine but not the popup assigned to it.

Two first div center all my elements on page.
<br>
<body><br>
    <div style="float: left; position: relative; left: 50%; display: block;"><br>
        <div style="float: left; position: relative; left: -50%; display: block;"><br>
<br>
            <form id="form1" runat="server"><br>
//telerik metadata here         <br>
<br>
<br>
                <div style="width: 500px;"><br>
                    <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString='<%$ ConnectionStrings:ttssConnectionString %>' SelectCommand="SELECT [rang], [data] FROM [Table_1]"></asp:SqlDataSource><br>
                    <asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1"><br>
                        <ItemTemplate><br>
                            <div  ></div><br>
                            <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" runat="server" DataTextField="rang" DataSourceID="SqlDataSource1" AllowCustomEntry="True" InputType="Text"></telerik:RadAutoCompleteBox><br>
                            </div><br>
                        </ItemTemplate><br>
                    </asp:Repeater><br>
                </div><br>
<br>
            </form><br>
<br>
        </div><br>
    </div><br>
</body>
Mohsen
Top achievements
Rank 1
 answered on 13 Mar 2013
1 answer
161 views
Very strange expand/collapse Radgrid behavior in IE8 Compatibility mode. I have multiple radgrids in a single page. When the page opens up the radgrid floats and also displays at the bottom. Please see attached snap shot and code. Please Help.

This grid works fine in other IE Versions and Browsers.

Kris

<%@ Register TagPrefix="uc" Namespace="MedAssets.AMS.Web.Controls" Assembly="MedAssets.AMS.Web" %>
   
<script type="text/javascript" src="<%= ResolveUrl("~/Javascript/jquery-1.8.2.min.js") %>"></script>
<head id="Head1" runat="server">
    <title></title>
    <script type="text/javascript">
   
        $(document).ready(function () {
            $('#tblInsuranceInformation tr').each(function () {
                if ($(this).find('td:last-child:empty').parent().hide());
   
            });
        });
       
    </script>
    <style type="text/css"
    html, body, form 
    
       height: 100%; 
       margin: 0px; 
       padding: 0px; 
    }
    .rgAltRow .rgRow
    {
        border-bottom-style:none !important;
    }
    .RadGrid_Transparent .rgRow TD,  .rgAltRow TD, .rgHeader
    
     {
    
        border-bottom-style:none !important;
        border-left: 0px !important;
        background-color: white !important;
        padding-top: 0px !important;
     }
</style>
</head>
   
<body style="height: 100%;margin: 0px;overflow: hidden;padding: 0px;">
    <form id="form1" runat="server">
      <telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" oncliendloaded="SplitterLoaded" Width="100%" >
          <telerik:RadPane ID="RadPane1" runat="server" >
                <div class="formLayoutD" style="background-color:white !important; width:100% !important">
                <telerik:RadScriptManager ID="ScriptManager" runat="server"/>
                <asp:Label  runat="server" Font-Bold = "True" ForeColor="Red" ID="lblMessage" Text="" />
                ***<%=FutureDateAcceptance%>Benefits reflected are valid as of <%=string.Format("{0:MM/dd/yyyy} at {0:hh:mm:ss tt}",EligibilityBenefit.BenefitRequest.FromDate)%>.
                <br/>
                <br/>
                <asp:Panel ID="pnlInsuranceInformation" runat="server">
                    <table id="tblInsuranceInformation">
                        <tr>
                           <td>
                               <asp:Label Id="lblSummary" runat="server" Text="Summary" style="font-weight: bold;font-size: 12px"/>
                           </td>
                        </tr>
                        <tr>
                            <td width ="500" valign="top">
                                <asp:Panel ID="pnlBasicInsuranceInfo" runat="server">
                                <table style="padding-left:8px !important; padding-top:0px !important; ">
                                    <tr>
                                       <td width="200" style="font-size: 12px">Payor Name: </td>   
                                       <td width="300">
                                               <% string payorName = string.Empty;
                                                if(EligibilityBenefit.BenefitResponse.Payor!=null)
                                                    payorName = EligibilityBenefit.BenefitResponse.Payor.Name!=null ?EligibilityBenefit.BenefitResponse.Payor.Name.LastName: "";
                                                  %>
                                           <%=payorName%>
                                       </td>
                                    </tr>   
                                    <tr>
                                       <td  style="font-size: 12px">Plan Name:</td>
                                       <td>
                                            <% string planName = string.Empty;
                                               var strAry = (EligibilityBenefit.PlanDescription ?? string.Empty).Split('|');
                                             planName = strAry[0];%>
                                           <%=planName%>
                                       </td>
                                    </tr>
                                    <tr>
                                       <td  style="font-size: 12px">Plan Description:</td>
                                       <td>
                                            <%=(strAry.Count() > 1 ? strAry[1] : string.Empty)%>
                                       </td>
                                   </tr>
                                    <tr>
                                       <td style="font-size: 12px">Coverage:</td>
                                       <td>
                                           <%=EligibilityBenefit.Coverage%>
                                       </td>
                                    </tr>   
                                    <tr>
                                       <td  style="font-size: 12px">Eligibility  Date:</td>
                                       <td >
                                          <%=EligibilityBenefit.PlanEffectiveDate.ToString("d")%>
                                       </td>
                                   </tr>
                            </table>
                            </asp:Panel>
                        </td>
                       </tr>
                       <tr>
                            <td>
                                <asp:Label Id="lblInsuranceInfo" runat="server" Text="Insurance Contact" style="font-weight: bold;font-size: 12px"/>
                           </td>
                       </tr>
                       <tr>
                           <td width="500" valign="top">
                              <telerik:RadGrid BorderStyle="None" runat="server" Id="radPayorInformationGrid" AutoGenerateColumns="false" Width="100%" GridLines="None" AllowSorting="True" skin="Transparent" AlternatingItemStyle="false" >
                               <HeaderStyle /> 
                               <ClientSettings EnableRowHoverStyle="false">
                               <Scrolling AllowScroll="false" />
                               <Resizing AllowResizeToFit="true"/>
                               </ClientSettings>
                               <MasterTableView ShowHeader="false" ItemStyle-VerticalAlign="top" ItemStyle-HorizontalAlign="left">
                                    <columns >
                                    <telerik:GridBoundColumn   DataField="Name" SortExpression="Name" UniqueName="Name" HeaderStyle-Width="200" />
                                    <telerik:GridBoundColumn   DataField="Value" SortExpression="Value" UniqueName="Value" HeaderStyle-Width="300" />
                                   </columns>
                               </MasterTableView>
                                </telerik:RadGrid>  
                           </td>   
                        </tr>
                    </table>
                </asp:Panel>
                <br/>
                <asp:Panel runat="server" id="pnlSubscriber">
                       <table>
                           <tr>
                       <td  >
                           <asp:Label Id="lblSubscriberInfo" runat="server" Text="Subscriber" style="font-weight: bold;font-size: 12px"/>
                       </td>
                       </tr>
                           <tr>
                            <td  valign="top">
                           <telerik:RadGrid BorderStyle="None" runat="server" Id="radSubscriberGrid" AutoGenerateColumns="false" Width="100%" GridLines="None" AllowSorting="True" skin="Transparent" >
                           <HeaderStyle /> 
                           <ClientSettings EnableRowHoverStyle="false">
                           <Scrolling AllowScroll="false" />
                           <Resizing AllowResizeToFit="true"/>
                           </ClientSettings>
                           <MasterTableView ShowHeader="false">
                                <columns >
                                <telerik:GridBoundColumn  DataField="Name" SortExpression="Name" UniqueName="Name" ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="200" ItemStyle-VerticalAlign="top" />
                                <telerik:GridBoundColumn   DataField="Value" SortExpression="Value" UniqueName="Value" ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="300" ItemStyle-VerticalAlign="top" />
                               </columns>
                           </MasterTableView>
                            </telerik:RadGrid>
                            </td>
                            </tr>
                           <tr>
                            <td>
                                <asp:Label Id="lblDependentInfo" runat="server" Text="Dependent" style="font-weight: bold;font-size: 12px"/>
                            </td>
                           </tr>
                           <tr>
                            <td width = "500" valign="top">
                           <telerik:RadGrid runat="server" Id="radDependentGrid" AutoGenerateColumns="false" Width="100%" GridLines="None" AllowSorting="True" skin="Transparent" AlternatingItemStyle="False" >
                           <HeaderStyle /> 
                           <ClientSettings EnableRowHoverStyle="false">
                           <Scrolling AllowScroll="false" />
                           <Resizing AllowResizeToFit="true"/>
                           </ClientSettings>
                           <MasterTableView ShowHeader="false">
                                <columns >
                                <telerik:GridBoundColumn   DataField="Name" SortExpression="Name" UniqueName="Name" ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="200" ItemStyle-VerticalAlign="top" />
                                <telerik:GridBoundColumn   DataField="Value" SortExpression="Value" UniqueName="Value" ItemStyle-HorizontalAlign="Left" HeaderStyle-Width="300" ItemStyle-VerticalAlign="top" />
                               </columns>
                           </MasterTableView>
                            </telerik:RadGrid>
                            </td>
                           </tr>
                       </table>
               </asp:Panel>
               <br/>
               <asp:Panel runat="server" Id="pnlAlerts">
                     <asp:Label ID="lblAlerts" Text="Alerts" style="font-weight: bold;font-size: 12px;" runat="Server"/>
               <telerik:Radgrid Id="grdAlerts" runat = "Server"  BorderStyle="None" AutoGenerateColumns="false" Width="100%" GridLines="None" AllowSorting="False" skin="Transparent" AlternatingItemStyle="False" ShowHeader="False">
                             <HeaderStyle />
                           <ClientSettings EnableRowHoverStyle="false">
                           <Scrolling AllowScroll="false" />
                           <Resizing AllowResizeToFit="true"/>
                           </ClientSettings>
                 <MasterTableView>
                    <columns>
                        <telerik:GridBoundColumn  HeaderText="Alerts" DataField="AlertDescription" SortExpression="AlertDescription" UniqueName="AlertDescription" ItemStyle-HorizontalAlign="Left" />
                    </columns>
                </MasterTableView>
               </telerik:Radgrid>
               </asp:Panel>
               <br/>
   
               <asp:Panel runat="server" Id="pnlOtherPayorInfo">
                   <asp:Label ID="lblAdditionalPayors" Text="Other Or Additional Payor" style="font-weight: bold;font-size: 12px" runat="Server"/>
                   <telerik:RadGrid runat="server" Id="grdOtherPayors" BorderStyle="None" ShowHeader="False" OnItemDataBound="grdOtherPayors_OnItemDataBound"
                        skin="Transparent" Width="600" GridLines="None" AllowSorting="True" AlternatingItemStyle="None">
                    <HeaderStyle CssClass="GridHeader" Font-Bold="True"/> 
                    <ClientSettings EnableRowHoverStyle="false">
                        <Scrolling AllowScroll="false" />
                        <Resizing AllowResizeToFit="true"/>
                    </ClientSettings>
                    <MasterTableView TableLayout="auto">
                        <ItemTemplate>
                        <div style="height: auto;">
                         <table style="padding-bottom: 15px !important">
                            <asp:Panel  ID="pnl1" Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("Name"))) %>' runat="server">
                                <tr>
                                     <td width="200">Payor Name:</td>
                                     <td width="400"><%# Eval("Name")%></td>
                                     </tr>
                           </asp:Panel>
                           <asp:Panel ID="pnl2" Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("EntityType")))%>' runat="server">
                                  <tr>
                                     <td>Entity Type:</td>
                                     <td><%# Eval("EntityType")%></td>
                                  </tr>
                           </asp:Panel>
                           <asp:Panel ID="Panel1" Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("Address")))%>' runat="server">
                                  <tr>
                                     <td>Address:</td>
                                     <td><%# Eval("Address")%></td>
                                  </tr>
                           </asp:Panel>
                           <asp:Panel ID="pnlWebsites" runat="server" Visible="False">
                                   <tr>
                                     <td valign="top">Website:</td>
                                      <td>
                                          <asp:BulletedList  runat="Server" ID="bltListWebsite" BulletStyle="NotSet" DataSource='<%# Eval("Websites")%>'>  </asp:BulletedList>
                                      </td>
                                  </tr>
                            </asp:Panel>
                            <asp:Panel ID="pnlTelephones" runat="server" Visible="False">
                                   <tr>
                                     <td valign="top">Telephone:</td>
                                      <td>
                                          <asp:BulletedList  runat="Server" ID="bltListTelephone" BulletStyle="NotSet" DataSource='<%# Eval("Telephones")%>'>  </asp:BulletedList>
                                      </td>
                                  </tr>
                            </asp:Panel>
                            <asp:Panel ID="pnlFaxes" runat="server" Visible="False">
                                   <tr>
                                     <td valign="top">Fax:</td>
                                      <td>
                                          <asp:BulletedList  runat="Server" ID="bltListFax" BulletStyle="NotSet" DataSource='<%# Eval("Faxs")%>'>  </asp:BulletedList>
                                      </td>
                                  </tr>
                            </asp:Panel>
                            <asp:Panel ID="pnlDates" runat="server" Visible="False">
                                   <tr>
                                     <td valign="top">Coordination Of Benefit Dates:</td>
                                      <td>
                                          <asp:BulletedList  runat="Server" ID="bltListCOBDates" BulletStyle="NotSet" DataSource='<%# Eval("Dates")%>'>  </asp:BulletedList>
                                      </td>
                                  </tr>
                            </asp:Panel>
                            <asp:Panel ID="pnlAdditionalInformation" runat="server" Visible="False">
                                   <tr>
                                     <td valign="top">
                                          Other Information:
                                      </td>
                                      <td>
                                          <asp:BulletedList  runat="Server" ID="bltListAdditionalInformation" BulletStyle="NotSet" DataSource='<%# Eval("AdditionalInformation")%>'>  </asp:BulletedList>
                                      </td>
                                  </tr>
                            </asp:Panel>
                            </table>
                        </div>
                    </ItemTemplate>
                    </MasterTableView>
                   </telerik:RadGrid>
            
               </asp:Panel>
               <br/>
                <asp:Panel runat="server" id="pnlEligibilityBenefits" Visible="False">
                       <table>
                       <tr>
                       <td  >
                           <asp:Label Id="lblEligibilityBenefits" runat="server" Text="Eligibility Status" style="font-weight: bold;font-size: 12px" runat="Server"/>
                       </td>
                       </tr>
                           <tr>
                            <td  valign="top">
                               
                               
                       <telerik:RadListView ID="lvEbStatus" runat="server" ItemPlaceholderID="EBStatus" >
                        <LayoutTemplate>
                            <fieldset style="width: 700px">
                                <table cellpadding="0" cellspacing="0">
                               <asp:PlaceHolder ID="EBStatus" runat="server"></asp:PlaceHolder>
                                  </table>
                            </fieldset>
                        </LayoutTemplate>
                        <ItemTemplate>
                            <tr>
                                <td width="250">
                                    <%#Eval("ServiceTypeCode")%>
                                </td>
                                <td width="30">
                                    <%#Eval("Status")%>
                                </td>
                                 <td width="30">
                                        
                                </td>
   
                        </ItemTemplate>
                        <AlternatingItemTemplate>
                                <td width="250">
                                    <%#Eval("ServiceTypeCode")%>
                                </td>
                                <td width="30">
                                    <%#Eval("Status")%>
                                </td>
                            </tr>
   
                        </AlternatingItemTemplate>
                    </telerik:RadListView>
                            </td></tr>
                    
                       </table>
               </asp:Panel>
                <br/>
               <asp:Panel runat ="server" Id="pnlServiceTypeBenefits">
                   <asp:Label ID="lblBenefitsInformation" Text="Benefits" style="font-weight: bold;font-size: 12px" runat="Server"/>
                   <br/>
               </asp:Panel>
              </div>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="sbJson" runat="server" CollapseMode="Both" Visible="False" >
        </telerik:RadSplitBar>
        <telerik:RadPane ID="pnJson" runat="server" Width="50" Visible="False" >
            <asp:Literal runat="server" ID="litJson" Mode="Encode"></asp:Literal>
        </telerik:RadPane>
        <telerik:RadSplitBar ID="sb271" runat="server" CollapseMode="Backward" Visible="False">
        </telerik:RadSplitBar>
        <telerik:RadPane ID="pn271" runat="server"  Width="50" Visible="False" >
             <asp:Literal runat="server" ID="lit271"></asp:Literal>
        </telerik:RadPane>
    </telerik:RadSplitter>
    </form>
</body>
</html>
  
User control
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="BenefitDetail.ascx.cs" Inherits="MedAssets.AMS.Web.Controls.BenefitDetail" %>
<%@ Import Namespace="MedAssets.AMS.Web.ViewModels" %>
   
<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server" >
        <AjaxSettings>       
            <telerik:AjaxSetting AjaxControlID="grdServiceTypeBenefits">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="grdServiceTypeBenefits" LoadingPanelID="lp2"/>
            
                </UpdatedControls>
            </telerik:AjaxSetting>   
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
      
         <style type="text/css">
        .RadGrid
         {
          background-color: #f1f5fb !important; /* color as scrollbar in your case */
         }
            
       .RadGrid .rgRow td, .RadGrid .rgAltRow td, .RadGrid .rgEditRow td, .RadGrid .rgFooter td, .RadGrid .rgFilterRow td, .RadGrid  .rgHeader, .RadGrid .rgResizeCol, .RadGrid .rgGroupHeader td
      {
       
         padding-bottom: 0px !important;
               margin-bottom: 0px !important;
      }
      .RadGrid_Default .rgGroupHeader
   
          {
            background:#C0D6E9 !important;
               
          }
     .RadGrid_Transparent .rgDataDiv
     {
    
        height : auto !important ;
          
     }
            
    </style>
       
 <asp:Panel runat ="server" Id="pnlServiceTypeBenefits">
         
      <telerik:RadGrid  ID="grdServiceTypeBenefitNew"  ShowHeader="False"  skin="Transparent" AlternatingItemStyle="None"
        AllowPaging="False" runat="server" AllowSorting="False"  OnNeedDataSource="grdServiceTypeBenefitNew_NeedDataSource" OnItemDataBound="grdServiceTypeBenefitNew_OnItemDataBound"
         OnItemCommand="grdServiceTypeBenefitNew_OnItemCommand">
            
                           <ClientSettings AllowGroupExpandCollapse="True" EnableRowHoverStyle="false" EnableAlternatingItems="False">
                          <%-- US  //US29877: Expand/Collapse height--%>
                           <Scrolling AllowScroll="True" />
                           <Resizing AllowResizeToFit="true"/>
                           </ClientSettings>
        <MasterTableView  TableLayout="auto" GroupHeaderItemStyle-Width="10" CommandItemDisplay="Top" GroupsDefaultExpanded="false"  GroupLoadMode="Client" >
           <CommandItemTemplate>
                        <%--<input type="button" name="btnToggle" id="btnExpandAll" value="+" onclick="toggleGroups(this)"/>--%>
                         <telerik:RadButton ID="btnExpandAll" runat="server" CommandName="ExpandAll" Text="+ Expand" Skin="Windows7" ></telerik:RadButton>
                         </CommandItemTemplate>
                        <GroupHeaderTemplate >
                           <%-- US  //US29877: Expand/Collapse height--%>
                            <asp:Label  runat="server" ID="Label1" Text='<%#Eval("ServiceType")%>' ></asp:Label>
                        </GroupHeaderTemplate>
           <GroupByExpressions >
                <telerik:GridGroupByExpression>
                    <SelectFields>
                        <telerik:GridGroupByField  FieldName="ServiceType" ></telerik:GridGroupByField>
                             
                    </SelectFields>
                    <GroupByFields>
                        <telerik:GridGroupByField FieldName="ServiceType" ></telerik:GridGroupByField>
                       
                    </GroupByFields>
                </telerik:GridGroupByExpression>
            </GroupByExpressions>
            <ItemTemplate>
                <div style="height: auto;">
                    <table>
                   <asp:Panel  ID="pn0"
                            Visible="False"
                            runat="server" >
                       <tr>
                           <td width="25"></td>
                            <td width="125">ServiceType:</td>
                            <td width="350"><%# Eval("ServiceType")%></td>
                       </tr>
                   </asp:Panel>
                   <asp:Panel  ID="pnl1"
                            Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("CoverageType"))) %>'
                            runat="server">
                       <tr>
                            <td width="25"></td>
                            <td width="125">Coverage Type:</td>
                            <td width="350"><%# Eval("CoverageType")%></td>
                       </tr>
                   </asp:Panel>
                   <asp:Panel  ID="pnl2"
                            Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("Network"))) %>'
                            runat="server" >
                       <tr>
                           <td width="25"></td>
                           <td width="125">Network:</td>
                           <td width="350"><%# Eval("Network")%></td>
                        </tr>
                   </asp:Panel>
                   <asp:Panel  ID="pnl3"
                            Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("BenefitType"))) %>'
                            runat="server" >
                     <tr>
                         <td width="25"></td>
                        <td width="125">Benefit:</td>
                        <td width="350"><%# Eval("BenefitType")%></td>
                    </tr>
                   </asp:Panel>
                    <asp:Panel  ID="pnl4"
                            Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("TimePeriod"))) %>'
                            runat="server" >
                     <tr>
                         <td width="25"></td>
                        <td width="125">Period:</td>
                        <td width="350"><%# Eval("TimePeriod")%></td>
                     </tr>
                   </asp:Panel>
                    <asp:Panel  ID="pnl5"
                            Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("Quantity"))) %>'
                            runat="server" >
                     <tr>
                         <td width="25"></td>
                        <td width="125">Quantity:</td>
                        <td width="350"><%# Eval("Quantity")%></td>
                     </tr>
                    </asp:Panel>
                    <asp:Panel  ID="pnl6"
                            Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("QuantityType"))) %>'
                            runat="server" >
                     <tr>
                        <td width="25"></td>
                        <td width="125">QuantityType:</td>
                        <td width="350"><%# Eval("QuantityType")%></td>
                    </tr>
                   </asp:Panel>
                   <asp:Panel  ID="pnl7"
                            Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("Amount"))) %>'
                            runat="server" >
                     <tr>
                        <td width="25"></td>
                        <td width="125">Amount:</td>
                        <td width="350"><%# Eval("Amount")%></td>
                    </tr>
                   </asp:Panel>
                   <asp:Panel  ID="pnl8"
                            Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("PreCertAuth"))) %>'
                            runat="server" >
                     <tr>
                        <td width="25"></td>
                        <td width="125">PreCertAuth:</td>
                        <td width="350"><%# Eval("PreCertAuth")%></td>
                    </tr>
                   </asp:Panel></table>
                   <asp:Panel ID="panelServiceDeliveryList" runat="server" Visible="False">
                   </asp:Panel>
                   <asp:Panel ID="pnlDateList" runat="server" Visible="False">
                       <table><tr><td width="25"></td>
                       <td width="125">Dates:</td>
                       <td width="350"><asp:BulletedList  runat="Server" ID="bltListDt" BulletStyle="NotSet"></asp:BulletedList></td>
                       </tr></table>
                   </asp:Panel>
                   <asp:Panel ID="pnlrelatedEntity" runat="server" Visible="False">
                    <table>
                              <tr id="tr20" runat="server" Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("RelatedEntities.Name"))) %>'>
                                  <td width="25"></td>
                                  <td width="125">Name: </td>
                                  <td width="350">
                                       <asp:Label Id="lblName" runat ="server" Text='<%# Eval("RelatedEntities.Name") %>'/>
                                  </td>
                                  </tr>
                                   <tr id="tr24" runat="server" Visible='<%# (!String.IsNullOrEmpty(Convert.ToString(Eval("RelatedEntities.Telephones"))) && Convert.ToInt32(Eval("RelatedEntities.Telephones.Count"))>0)?true:false %>'>
                                  <td></td>
                                  <td>Telephone:</td>
                                  <td>
                                      <asp:BulletedList  runat="Server" ID="BulletedList1" BulletStyle="NotSet" DataSource='<%# Eval("RelatedEntities.Telephones") %>'>  </asp:BulletedList>
                                  </td>
                              </tr>
                              <tr id="tr21" runat="server" Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("RelatedEntities.Address"))) %>'>
                                  <td></td>
                                  <td>
                                        Address: 
                                  </td>
                                  <td>
                                      <asp:Label Id="lblAddress" runat ="server" Text='<%# Eval("RelatedEntities.Address") %>' />
                                  </td>
                                 </tr>
                                <tr id="tr22" runat="server" Visible='<%# (!String.IsNullOrEmpty(Convert.ToString(Eval("RelatedEntities.Faxs"))) && Convert.ToInt32(Eval("RelatedEntities.Faxs.Count"))>0)?true:false %>'>
                                  <td></td>
                                  <td>
                                     Fax:
                                  </td>
                                  <td>
                                      <asp:BulletedList  runat="Server" ID="BulletedList2" BulletStyle="NotSet" DataSource='<%# Eval("RelatedEntities.Faxs") %>'>  </asp:BulletedList>
                                  </td>
                                </tr>
                               <tr id="tr23" runat="server" Visible='<%# (!String.IsNullOrEmpty(Convert.ToString(Eval("RelatedEntities.Websites"))) && Convert.ToInt32(Eval("RelatedEntities.Websites.Count"))>0)?true:false %>'>
                                 <td></td>
                                 <td>
                                      Websites:
                                  </td>
                                  <td width="350">
                                       <asp:BulletedList  runat="Server" ID="bltListWebsite" BulletStyle="NotSet" DataSource='<%# Eval("RelatedEntities.Websites") %>'>  </asp:BulletedList>
                                  </td>
                              </tr>
                          </table>
   
               </asp:Panel>
                   <asp:Panel ID="pnlMessages" runat="server" Visible="False">
                          <table>
                               <tr>
                                    <td width="25"></td>
                                    <td width="125" valign="top">
                                        Messages:
                                    </td>
                                    <td width="350">
                                        <asp:BulletedList  runat="Server" ID="BulletedList4" BulletStyle="NotSet" DataSource='<%# Eval("Messages")%>'>  </asp:BulletedList>
                                    </td>
                              </tr>
                          </table>
                          </asp:Panel>
                  
                </div>
                <br/>
                   
            </ItemTemplate>
        </MasterTableView>
        <ClientSettings AllowDragToGroup="true">
            <Scrolling AllowScroll="true" UseStaticHeaders="true"></Scrolling>
        </ClientSettings>
    </telerik:RadGrid>
     <br/>
     <asp:label runat="Server" ID="lblBenefitDesc" Text="Benefit Description" Visible="false" Font-Bold="true"></asp:label>
      <telerik:RadGrid ID="grdBenefitDescriptions"
       runat = "server"
       OnNeedDataSource="grdBenefitDescriptions_NeedDataSource"
       AutoGenerateColumns="false"
        Skin="Transparent"
        GridLines="Vertical">
            <HeaderStyle CssClass="GridHeader" />
             <ClientSettings AllowGroupExpandCollapse="True"/>
   
        <MasterTableView Width="100%" GroupHeaderItemStyle-Width="20">
           <GroupByExpressions >
                <telerik:GridGroupByExpression>
                    <SelectFields>
                        <telerik:GridGroupByField  FieldName="CoverageType"></telerik:GridGroupByField>
                             
                    </SelectFields>
                    <GroupByFields>
                        <telerik:GridGroupByField FieldName="CoverageType" ></telerik:GridGroupByField>
                       
                    </GroupByFields>
                </telerik:GridGroupByExpression>
                 </GroupByExpressions>
           <Columns>
               <telerik:GridBoundColumn  HeaderText="CoverageType" DataField="CoverageType" SortExpression="CoverageType" UniqueName="CoverageType" ItemStyle-HorizontalAlign="Left" visible="false" />
                <telerik:GridBoundColumn  HeaderText="Procedure Code" DataField="ProcedureCode" SortExpression="ProcedureCode" UniqueName="ProcedureCode" ItemStyle-HorizontalAlign="Left" />
                <telerik:GridBoundColumn  HeaderText="Procedure Modifier" DataField="ProcedureModifier" SortExpression="ProcedureModifier" UniqueName="ProcedureModifier" ItemStyle-HorizontalAlign="Left"  />
                <telerik:GridBoundColumn HeaderText="Description" DataField="Description" SortExpression="Description" UniqueName="Description" ItemStyle-HorizontalAlign="Left" />
                <telerik:GridBoundColumn  HeaderText="Benefit Begin Date" DataField="BenefitDate" SortExpression="BenefitDate" UniqueName="BenefitDate" ItemStyle-HorizontalAlign="Left" DataFormatString="{0:d}" />
               </Columns>
        </MasterTableView>
       </telerik:RadGrid>
          <asp:label runat="Server" ID="lblOtherBenefitTypeInfo" Text="Additional Benefit Information" Visible="false" Font-Bold="true"></asp:label>
           <telerik:RadGrid ID="grdAdditionalBenefitInfo" runat = "server" OnNeedDataSource="grdAdditionalBenefitInfo_NeedDataSource" ShowHeader="False"
                OnItemDataBound="grdAdditionalBenefitInfo_OnItemDataBound" AutoGenerateColumns="false" Skin="Transparent" GridLines="Vertical" >
            <HeaderStyle CssClass="GridHeader" />
        <MasterTableView GroupHeaderItemStyle-Width="20" >
            <DetailItemTemplate>
               <asp:Panel ID="pnlrelatedEntity" runat="server">
                   <table>
   
                              <tr id="tr1"  runat="server" Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("RelatedEntities.Name"))) %>'>
                                  <td align="right" style="font-weight: normal;">
                                      Name:
                                  </td>
                                  <td width="350" style="font-weight: normal;">
                                       <asp:Label Id="lblName" runat ="server" Text='<%# Eval("RelatedEntities.Name") %>'/>
                                  </td>
                                  </tr>
                                  <tr id="tr2" runat="server" Visible='<%# (!String.IsNullOrEmpty(Convert.ToString(Eval("RelatedEntities.Telephones"))) && Convert.ToInt32(Eval("RelatedEntities.Telephones.Count"))>0)?true:false %>'>
                                  <td align="right" style="font-weight: normal;">
                                    Telephone: 
                                  </td>
                                  <td style="font-weight: normal;">
                                      <asp:BulletedList  runat="Server" ID="BulletedList1" BulletStyle="NotSet" DataSource='<%# Eval("RelatedEntities.Telephones") %>'>  </asp:BulletedList>
                                  </td>
                              </tr>
                                <tr id="tr3" runat="server" Visible='<%# !String.IsNullOrEmpty(Convert.ToString(Eval("RelatedEntities.Address"))) %>'>
                                  <td align="right" style="font-weight: normal;">
                                        Address: 
                                  </td>
                                  <td style="font-weight: normal;">
                                      <asp:Label Id="lblAddress" runat ="server" Text='<%# Eval("RelatedEntities.Address") %>' />
                                  </td>
                                 </tr>
                                  <tr id="tr4" runat="server" Visible='<%# (!String.IsNullOrEmpty(Convert.ToString(Eval("RelatedEntities.Faxs"))) && Convert.ToInt32(Eval("RelatedEntities.Faxs.Count"))>0)?true:false %>'>
                                  <td align="right" style="font-weight: normal;">
                                     Fax:
                                    </td>
                                  <td style="font-weight: normal;">
                                      <asp:BulletedList  runat="Server" ID="BulletedList2" BulletStyle="NotSet" DataSource='<%# Eval("RelatedEntities.Faxs") %>'>  </asp:BulletedList>
                                  </td>
                                </tr>
                              <tr id="tr5" runat="server" Visible='<%# (!String.IsNullOrEmpty(Convert.ToString(Eval("RelatedEntities.Websites"))) && Convert.ToInt32(Eval("RelatedEntities.Websites.Count"))>0)?true:false %>'>
                                 <td align="right" style="font-weight: normal;">
                                      Websites:
                                  </td>
                                  <td >
                                       <asp:BulletedList  runat="Server" ID="bltListWebsite" BulletStyle="NotSet" DataSource='<%# Eval("RelatedEntities.Websites") %>'>  </asp:BulletedList>
                                  </td>
                              </tr>
                            <tr id="tr6" runat="server" Visible='<%# (!String.IsNullOrEmpty(Convert.ToString(Eval("RelatedEntities.Dates"))) && Convert.ToInt32(Eval("RelatedEntities.Dates.Count"))>0)?true:false %>'>
                     
                                  <td align="right" style="font-weight: normal;">
                                     Dates:
                                  </td>
                                  <td style="font-weight: normal;">
                                      <asp:BulletedList  runat="Server" ID="bltListDates" BulletStyle="NotSet" DataSource='<%# Eval("RelatedEntities.Dates")%>'/> 
                                  </td>
                              </tr>
                                
                          </table>
               </asp:Panel>
                    <asp:Panel ID="pnlMessages" runat="server">
                          <table>
                               <tr>
                                 <td align="right" valign="top" style="font-weight: normal;">
                                      Messages:
                                  </td>
                                  <td style="font-weight: normal;">
                                      <asp:BulletedList  runat="Server" ID="BulletedList3" BulletStyle="NotSet" DataSource='<%# Eval("Messages") %>'>  </asp:BulletedList>
                                  </td>
                              </tr>
                          </table>
                          </asp:Panel>
                 
           </DetailItemTemplate>
              
           <Columns>
               <telerik:GridBoundColumn  HeaderText="Benefit" DataField="BenefitType" SortExpression="BenefitType" UniqueName="BenefitType" ItemStyle-HorizontalAlign="Left" ItemStyle-Font-Bold="true"/>
           </Columns>
        </MasterTableView>
       </telerik:RadGrid>
          
         <br/>
         <br/>
                
       </asp:Panel>
    <telerik:RadScriptBlock ID="radScriptBlock" runat="server">
     <script type="text/javascript">
       
          
         function toggleGroups(btnExpand) {
   
             //                var grid = $find("<%=grdServiceTypeBenefitNew.ClientID %>");
             //                var masterTableView = grid.get_masterTableView();             
             //                var gridClientId = '<%= grdServiceTypeBenefitNew.ClientID %>';
             //                //var grid = $find("<%=grdServiceTypeBenefitNew.ClientID %>");
             var masterTable = $find("<%=grdServiceTypeBenefitNew.ClientID %>").get_masterTableView();
             alert(masterTable.get_dataItems().count());
             for (var i = 0; i < masterTable.get_dataItems().length; i++) {
                 if (btnExpand.value == "+")
                     masterTable.expandItem(i);
                 else
                     masterTable.collapseItem(i);
             }
   
             //alert($find("<%=grdServiceTypeBenefitNew.ClientID %>").get_masterTableView().groupsDefaultExpanded());
             //masterTable.set_GroupsDefaultExpanded(true);
             //toggle text
             if (btnExpand.value == "+")
                 btnExpand.value = "-";
             else
                 btnExpand.value = "+";
   
             //event.cancel = true;
         }
     </script>
    </telerik:RadScriptBlock>

CSS
/* SITE.CSS  
----------------------------------------------------------*/
   
/* RESETS  
----------------------------------------------------------*/
   
body {
    background-color: #FFFFFF;
    color: #696969;
    font-family: Arial,'Liberation Sans','DejaVu Sans',sans-serif;
    font-size: 12px;
    line-height: normal;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}
   
a:link, a:visited, a:hover, a:active { color: #505abc; }
a:link { text-decoration: none; }
a:hover { text-decoration: underline; }
   
h1, h2, h3, h4, h5, h6 { color: #444; margin: 0; padding: 10px 0 5px 0; }
h1 { font-size: 2em; }
h2 { font-size: 1.8em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.1em; }
h5, h6 { font-size: 1em; }
ul { margin: 0px; padding-left: 0px; list-style: none; }
img { border: none; border-style: none; }
   
/* GLOBAL SPECIALS 
----------------------------------------------------------*/
.clear { clear: both; }
.inline { display: inline !important; }
.ok { color: green; }
.warning { color: orangered; }
.error { color: Red; }
div#title { display: block; float: left; text-align: left; }
.selected { font-weight: bold; }
.nooverflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.round { border-radius: 4px 4px 4px 4px; -webkit-border-radius: 4px 4px 4px 4px; -moz-border-radius: 4px 4px 4px 4px; }
.loading { cursor: wait; }
.overlay, .spinner { background-color: #999; height: 100%; width: 100%; position: absolute; top: 0; left: 0; z-index: 800; filter:alpha(opacity=10); opacity: 0.1; }
.spinner { background: transparent url(images/spinner.gif) no-repeat center center; cursor: wait;  filter:alpha(opacity=100); opacity: 1; }
   
/* FORM ELEMENTS  
----------------------------------------------------------*/
   
fieldset { border: 1px solid #ddd; padding: 0 1.4em 1.4em 1.4em; margin: 0 0 1.5em 0; }
legend { font-size: 1.2em; font-weight: bold; }
textarea { min-height: 75px; }
input[name^="UserName"] { width: 300px; border: 1px solid #CCC; }
input[name^="Password"] { width: 300px; border: 1px solid #CCC; }
select { width: auto;max-width: 500px; border: 1px solid #CCC; }
select[multiple="multiple"] { width: 303px; }
.input-date { width: 140px !important; }
.input-datetime { width: 160px !important; }
.input-float { width: 100px !important; }
.input-float input[type="text"] { width: 100px !important; }
.input-integer { width: 100px !important; }
.input-integer input[type="text"] { width: 100px !important; }
   
.float-editor-row { clear: both; display: table; }
.float-editor-label { float: left; margin: 13px 5px 0 0; width: 120px; text-align: right; font-weight: bold; margin-right: 10px; }
.float-editor-field { float: left; margin: 10px 5px 0 0; }
.float-editor-buttons { clear: both; }
.float-editor-row-set { clear: both; margin-left: 120px; }
.float-editor-row-set .float-editor-row { clear: none; display: inline; }
.float-editor-row-set .float-editor-row .float-editor-label { width: auto; }
fieldset.large .float-editor-row .float-editor-label { width: 200px; }
fieldset.large .float-editor-row-set { clear: both; margin-left: 200px; }
fieldset.large .float-editor-row-set .float-editor-row .float-editor-label { width: auto; }
.editor-buttons a, .float-editor-buttons a { font-weight: bold; }
p.editor-buttons, p.float-editor-buttons { margin-bottom: 5px; }
   
.display-label, .editor-label { margin: 1em 0 0 0; }
.editor-field { margin: 0.5em 0 0 0; }
.display-row { clear: both; }
.display-label { float: left; width: 100px; }
.display-field { float: left; margin: 1em 0 0 0; width: 500px; }
.text-box { width: 30em; }
.text-box.multi-line { height: 6.5em; font-family: Helvetica,Arial,sans-serif; }
   
   
.tri-state { width: 6em; }
   
   
   
/* SPECIFIC OVERRIDES */
div.input-integer div.t-state-empty { display: none !important; }
div.input-float div.t-state-empty { display: none !important; }
   
   
/* UI Components
-----------------------------------------------------------*/
/* Icons */
.icon, [class^="icon-"], [class*=" icon-"] { display: inline-block; width: 18px; height: 18px; line-height: 18px; vertical-align: middle; background: url('images/icon-x16-sprite.png') no-repeat top left;}
.icon-small { width: 14px; height: 14px; line-height: 14px; background: url('images/icon-x12-sprite.png') no-repeat top left;}
.icon-action_add{ background-position: 0 -20px;  }
.icon-action_back{ background-position: 0 -40px;  }
.icon-action_clear{ background-position: 0 -60px;  }
.icon-action_details{ background-position: 0 -80px;  }
.icon-action_execute{ background-position: 0 -100px;  }
.icon-action_redo{ background-position: 0 -120px;  }
.icon-action_sync{ background-position: 0 -140px;  }
.icon-action_undo{ background-position: 0 -160px;  }
.icon-help{ background-position: 0 -180px;  }
.icon-information{ background-position: 0 -200px;  }
.icon-report_result{ background-position: 0 -220px;  }
.icon-report_schedule{ background-position: 0 -240px;  }
.icon-report_schedule_edit{ background-position: 0 -260px;  }
.icon-report_share{ background-position: 0 -280px;  }
.icon-report_unshare{ background-position: 0 -300px;  }
.icon-state_active{ background-position: 0 -320px;  }
.icon-state_dead{ background-position: 0 -340px;  }
.icon-state_deleted{ background-position: 0 -360px;  }
.icon-state_expired{ background-position: 0 -380px;  }
.icon-state_favorite{ background-position: 0 -400px;  }
.icon-state_inactive{ background-position: 0 -420px;  }
.icon-state_new{ background-position: 0 -440px;  }
.icon-state_notfavorite{ background-position: 0 -460px;  }
.icon-status_archived{ background-position: 0 -480px;  }
.icon-status_complete{ background-position: 0 -500px;  }
.icon-status_failed{ background-position: 0 -520px;  }
.icon-status_inprogress{ background-position: 0 -540px;  }
.icon-status_pending{ background-position: 0 -560px;  }
   
   
   
   
    
   
/* VALIDATION HELPERS */
.field-validation-error { color: #ff0000; margin-left: 5px; }
.field-validation-valid { display: none; }
.input-validation-error { border: 1px solid #ff0000; background-color: #ffeeee; }
.validation-summary-errors { font-weight: bold; color: #ff0000; }
.validation-summary-valid { display: none; }
   
/* SITE MESSAGING */
div.alert-box { position: fixed; top: 0; left: 0; width: 100%; z-index: 100001; display: block; padding: 10px 15px; font-weight: bold; font-size: 1.5em; line-height: 30px; color: #000; background: #eee; opacity: .80; filter: alpha(opacity=80); }
div.alert-box.success { background-color: #009900; color: #fff; }
div.alert-box.warning { background-color: #EE9A00; color: #fff; }
div.alert-box.error { background-color: #EE0000; color: #fff; }
div.alert-box span { float: left; margin-right: 55px; }
div.alert-box a.close { position: absolute; top: 10px; right: 45px; color: #fff; text-decoration: none; font-size: 1.2em; }
   
/* MODAL */
.modal-top { height: 500px; overflow: auto; position: relative /*ie7-fix*/; }
.modal-header { }
.modal-center, .modal-footer { margin-top: -16px; }
.modal-bottom { text-align: center; }
   
/* BOXED LAYOUT */
.boxtop { background-color: #3e558e; height: 24px; padding: 8px 8px; }
.boxtop span { vertical-align: middle; color: white; font-weight: bold; font-size: 1.5em; }
.box { border-left: 1px solid #bbb; border-right: 1px solid #bbb; border-bottom: 1px solid #bbb; background-color: #f5f5f5; padding: 8px; }
   
/* listboxes */
.listboxgroup { margin-top: 10px; }
.listboxgroup select { height: 300px; }
.listboxgroup div { float: left; }
.listboxgroup .listboxgroup-icons { margin-left: 8px; margin-right: 8px; padding-top: 30px; }
.listboxgroup div img { float: left; clear: left; padding-top: 8px; }
   
   
   
/* message */
.message { padding: 20px 0; }
   
/* Main */
#container { position: relative; }
#main { padding: 15px 15px 45px 15px; background-color: #fff; min-height: 600px; position: relative;}
#leftnav { float: left; width: 250px; }
#centercontent { margin-left: 260px; }
   
/* Brandzone Footer  todo Delete this block
#brandzoneFooter { clear: both; }
#brandzoneFooter .footer { background: url(images/bottomShadow.gif) top repeat-x #dfe9f7; padding: 10px 16px 10px 0; color: #144884; text-align: right; line-height: 15px; font-size: 0.9em; font-family: Arial, 'Liberation Sans' , 'DejaVu Sans' ,sans-serif; }
#brandzoneFooter .footer a { color: #144884; text-decoration: none; }
#brandzoneFooter .footer a:hover { color: #144884; text-decoration: underline; }
#brandzoneFooter .footer span.mute { color: #dfe9f7; }*/
   
   
   
   
/* PAGE SPECIFIC  
----------------------------------------------------------*/
/* Operational Reports Tab */
#operationalReports h2 { padding-top: 0px; }
   
#reportResults a:hover{ text-decoration: none;}
#grdReportTitle a:hover{ text-decoration: underline;}
   
#operationalReports p, #operationalReports ul { line-height: 1.6em; }
#operationalReports .page-column { padding: 15px 15px 45px 15px; border: #AAA 1px dashed; background-color: #F9F9F9; }
   
#operationalReports #leftWrapper { float: left; width: 200px; }
#operationalReports #leftWrapper a, #operationalReports #leftWrapper .t-in { color: #696969; }
#operationalReports #leftWrapper .t-state-hover, #operationalReports #leftWrapper .t-state-hover:hover { background-color: transparent; border: transparent 1px solid; text-decoration: underline;cursor: pointer; }
#operationalReports #leftWrapper .t-treeview .t-state-selected { background-color: transparent; border: transparent 1px solid; font-weight: bold; }
#operationalReports #searchWrapper input { padding: 5px; margin-right: -20px; width: 190px; }
#operationalReports #searchWrapper a { color: #AAA; font-size: 1.4em; font-weight: bold; }
#operationalReports #filterWrapper h2, #catalogs h2 { padding-top: 15px; }
#operationalReports #catalogs h4 { display: none; }
   
#operationalReports #rightWrapper { margin-left: 235px; }
#operationalReports #rightWrapper .contentHeader { position: relative; padding: 7px 0 15px 0; }
#operationalReports #rightWrapper .toolbar .button { margin-right: 15px; }
#operationalReports #rightWrapper #reportsSortbar { padding-top: 5px; }
#operationalReports #rightWrapper #reportsSortbar a { color: #08C; }
#operationalReports #rightWrapper .contentBody { border-top: #555 1px dotted; line-height: 1.6em; }
#operationalReports #rightWrapper .contentPagination { text-align: center; padding: 10px; margin-top: 15px; }
#operationalReports div.report { border-left: #555 1px dotted; border-bottom: #555 1px dotted; border-right: #555 1px dotted; list-style: none; padding: 10px; background-color: #FFF; position: relative; }
#operationalReports div.report.unread { border-left: 3px solid green; padding-left: 7px; background-color: #F6FFF6; }
#operationalReports div.report .favoriteAction { display: inline; }
#operationalReports div.report h3 { display: inline; }
#operationalReports div.report h3 a { color: #555; }
#operationalReports div.report.disable, #operationalReports div.report.disable h3 a { color: #888; }
#operationalReports div.report .templateTitle { margin-right: 230px;word-wrap: break-word; }
#operationalReports div.report .reportDesc { margin-top: 3px; word-wrap: break-word; }
#operationalReports div.report .reportAgo { padding: 10px 10px 0 0; margin-top: 5px;}
#operationalReports div.report .reportCatalogs div { display: inline; }
#operationalReports div.report .reportActions { margin-top: 5px; }
#operationalReports div.report .reportActions li { font-size: 1.0em; }
#operationalReports .reportDetails div.report { list-style: none; padding: 10px; background-color: #FFF; position: relative; }
#operationalReports .reportDetails .report.unread { background-color: #FFF; border-left: #555 1px dotted; padding-left: 10px; }
#operationalReports #reportDetailsMain div.report { border-bottom: none; }
#operationalReports #reportDetailsParts div.report { border-bottom: none; }
#operationalReports #reportDetailsParts { border-bottom: #D8D8D8 1px solid;}
#operationalReports #reportDetailsMain h4, #reportDetailsParts h4 { padding-top: 0px; }
   
/* Change Password */
#changePasswordInfo { float: left; }
#changePasswordRules { float: left; margin-left: 15px; }
   
/* ReportCreate */
#reportcreateform div.RadioButton { margin-right: 5px; float: left; }
#reportcreateform div#schedule { padding-bottom: 150px;}
#reportcreateform .formatMessage { clear: both; margin-left: 135px;margin-top: 3px; font-size: 1.0em;color: red;}
/*Add Catalog */
#ParentCatalogId { width: 30em;}
   
/*Portal Home Page*/
.widget_PageWrapper {width: 100%; height:80%; position:relative; float: left; padding-top:200px; padding-bottom:25px; -moz-border-radius: 8px 8px 0 0; -webkit-border-radius: 8px 8px 0 0; -o-border-radius: 8px 8px 0 0; -ms-border-radius: 8px 8px 0 0; -khtml-border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0; background-color: #CCCCCC;
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NjY2NjYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #CCCCCC), color-stop(100%, #ffffff)); background-image: -webkit-linear-gradient(#CCCCCC, #ffffff); background-image: -moz-linear-gradient(#CCCCCC, #ffffff); background-image: -o-linear-gradient(#CCCCCC, #ffffff); background-image: -ms-linear-gradient(#CCCCCC, #ffffff); background-image: linear-gradient(#CCCCCC, #ffffff); filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFCCCCCC', endColorstr='#FFFFFFFF');}
.widget_Body {
    height: 275px;
    z-index:1;
    background-color: white;
    margin: 0px 0px 25px 25px;
    width: 280px;
    float: left;
    color: #666666;
    position:relative;
}
.widget_Desc { height:55px; overflow: hidden; padding-left:10px; padding-right:10px; margin: 0px 0px 0.3em; }
.button:hover { color:#000 }
.potal_Widget{ float: left; width: 40%; height: 269px; margin-left: 2.5%;  }
.widget_HomeHeader{text-align:center; margin-top: -140px;}
.widget_Marketinglink{ color: #0c5494 !important; font-style: bold; padding-right: 5px;}
/* 'standard' class is a default CSS class for portal widget and used as a default value for a constant parameter */
.standard{
    /* Common code for all widget-start*/
    position: relative;
    height: 50px;
    padding: 9px 0px 0px 15px;
    line-height: 89%;
    font-family: 'Web-NimbusSanNovCon-SemBol',Helvetica,Arial,sans-serif;
    height: 40px;
    color: white;
    font-size: 139%;
    cursor: move;
    font-weight: normal;
    /* Common code for all widget-end*/
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #1A7895), color-stop(100%, #009BB8));
    background-image: -webkit-linear-gradient(#1A7895, #009BB8);
    background-image: -moz-linear-gradient(#1A7895, #009BB8);
    background-image: -o-linear-gradient(#1A7895, #009BB8);
    background-image: -ms-linear-gradient(#1A7895, #009BB8);
    background-image: linear-gradient(#1A7895, #009BB8);
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#1A7895', endColorstr='#009BB8');
  }
  .readmission {
    /* Common code for all widget-start*/
    position: relative;
    height: 50px;
    padding: 9px 0px 0px 15px;
    line-height: 89%;
    font-family: 'Web-NimbusSanNovCon-SemBol',Helvetica,Arial,sans-serif;
    height: 40px;
    color: white;
    font-size: 139%;
    cursor: move;
    font-weight: normal;
    /* Common code for all widget-end*/
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #56722c), color-stop(100%, #758d3a));
    background-image: -webkit-linear-gradient(#56722c, #758d3a);
    background-image: -moz-linear-gradient(#56722c, #758d3a);
    background-image: -o-linear-gradient(#56722c, #758d3a);
    background-image: -ms-linear-gradient(#56722c, #758d3a);
    background-image: linear-gradient(#56722c, #758d3a);
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#56722c', endColorstr='#758d3a'); 
  }
  .widget_Header{
    font-family: 'Web-NimbusSanNovCon-SemBol',Helvetica,Arial,sans-serif;
    font-size: 18px;
    line-height: 300%;
    text-align: center !important;
  }
  .widget_Bottom {
    clear: both;
    position: absolute;
    padding-left: 12px;
    padding-right: 12px;
    padding-bottom: 4px;
    bottom: 8px;
    width: 256px;
    padding-top: 8px;
    border-top: #d6d6d6 3px solid;
       
  }
  .widget_Image { display: block; margin: auto; cursor: pointer; position:relative; }
  .padding_Bottom_15PX {padding-bottom: 15px; clear:both;}
  .widget_headerText{color:#FFFFFF !important; line-height: 100% !important;}
  #widgetHeader > h1 {border-bottom:none !important;font-weight: bold !important;}
  .widget_ImageContainer{ width: 96px; height: 85px; margin-top: 25px; margin-left: 92px;}
   
      
      
   /* Stylesheet.CSS  
----------------------------------------------------------*/
   
   
html,
body
{
   
    margin: 0;
    padding: 0;
        color: #333333 !important;
    font-family: Helvetica,Arial,sans-serif;
    font-size: 12px;
    font-style: normal;
    font-weight: normal;
       
    text-align:left;
    background-color: white; /* EAF0FC DEE8FA D7E3F9  CDDCF7 205CCA change to the light blue later */
    height: 100%;
       
    width: 99.9%;
    min-width: 1000px;
    max-width: 1200px;
       
    }
   
h1
{
    font-size: 18pt;
    margin: 5px 3px 3px 3px;
}
h2
{
    font-size: 14pt;
    margin: 5px 3px 3px 3px;
}
   
h3
{
    font-size: 12pt;
    margin: 5px 3px 3px 3px;
}
   
h4
{
    font-size: 11pt;
    margin: 4px 2px 2px 2px;
}
   
input /* necessary for the text boxes */
{
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%;
    background-color: white;
}
   
select /* necessary for the drop down lists */
{
    font-family: Helvetica,Arial,sans-serif;
    font-size: 100%;
}
   
       
/* fieldset styling */
fieldset
{
     
  padding: 1em;
  /*
  padding-left: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  */
  border : 0px solid #ccc;
 /* background-color:#EAF0FC; */
}
   
/* legend styling */
legend
{
  font-weight: normal;
  font-size: 11pt;
  /*color:  #002C76; /*  #002C76;  */
  /*margin: 5px 3px 3px 3px;*/
  border-bottom: solid 1px #002C76; /* #437BE1 */
  width: 90%;
}
   
/* -------- Form Layout --------------------------- */
.formLayout
{
    border: 0px solid #989898;
    padding: 0px 0px ;
   /* padding: 5px 5px ;  */
    background:  white; /* #E3F0F0; #FBFDFD; #D3E8E8;  #E5F1F4;  #F7FBFB; */
   /* border-left: 1px solid #87CEFA; */
    /* border-right: 1px solid #87CEFA; */
    width: 100%;
    height: 100% !important;
    
}
   
.formLayoutB
{
    border: 0px solid #989898; 
    background:  #EAF0FC; /* #E3F0F0; #FBFDFD; #D3E8E8;  #E5F1F4;  #F7FBFB; */
    /* border: 1px solid #87CEFA;  */
    width: 100%;
    font-size: 12px;
}
   
.formLayoutC
{
    border: 0px solid #989898;
    height: 500px;
     
}
   
.formLayoutNote
{    
    background:  white; /* #E3F0F0; #FBFDFD; #D3E8E8;  #E5F1F4;  #F7FBFB; */  
}
   
.formLayoutB .label, .formLayoutB .labelTop
{
    font-weight: normal;
    text-align: right;
  /*  vertical-align: top; */
    height: 10px;
    /* border: .1em dotted black; */
    padding-right: .5em;
   /* color: #002C76; */
    font-weight: bold;
}
   
   
.formLayout td
{
    padding: 1px;
}
   
.formLayout .label, .formLayout .labelTop
{
    font-weight: normal;
    text-align: right;
  /*  vertical-align: top; */
    height: 10px;
    /* border: .1em dotted black; */
    padding-right: .5em;
}
   
.formLayoutD td
{
    padding: 1px;
      
}
   
.formLayoutD .label, .formLayout .labelTop
{
    font-weight: normal;
    text-align: right;
  /*  vertical-align: top; */
    height: 10px;
    /* border: .1em dotted black; */
    padding-right: .5em;
}
   
.formLayoutD
{
    border: 0px solid #989898;
    padding: 0px 0px ;
   /* padding: 5px 5px ;  */
    background:  #EAF0FC; /* #E3F0F0; #FBFDFD; #D3E8E8;  #E5F1F4;  #F7FBFB; */
   /* border-left: 1px solid #87CEFA; */
    /* border-right: 1px solid #87CEFA; */
    width: 100.5%;
       
}
   
.formLayoutE
{
    border: 0px solid #989898;
    padding: 0px 0px ;
   /* padding: 5px 5px ;  */
  /*  background:  #EAF0FC; /* #E3F0F0; #FBFDFD; #D3E8E8;  #E5F1F4;  #F7FBFB; */
   /* border-left: 1px solid #87CEFA; */
    /* border-right: 1px solid #87CEFA; */
    width: 1000px;
   overflow:hidden;
       
}
   
.formLayoutE_status, .formLayoutE_statusheader
{
     width: 350px;
     float:left;  
}
   
.formLayoutE_status
{
    /*border-right: 1px solid #989898;*/
}
   
.formLayoutE_statusheader, .formLayoutE_functionsheader
{
    white-space: nowrap;
    text-align: left;
    font-weight: bold;
    font-size: 8pt;      
}
   
.formLayoutE_functions, .formLayoutE_functionsheader
{
     width: 640px;
     float:left;
      
}
   
.formLayout .label
{
   /* vertical-align: top; */
}
   
.formLayout .labelTop
{
    vertical-align: top;
}
   
.formButtons
{
    padding: .5em 0em .5em 0em;
    text-align: left;
}
   
.formButtonsLeft
{
    padding: .5em 0em .5em 0em;
    text-align: left;
}
   
.formButtonsRight
{
    padding: .5em 0em .5em 0em;
    text-align: right;
}
   
.formLayout .formButtons td
{
    padding-top: 1em;
    text-align: left;
}
.formColumn
{
    float: left;
    margin-right: 40px;
}
   
.RadTreeView_Office2010Blue .rtEdit .rtIn input {
    color: #000000 !important;
}
   
   .RadCalendar_Default .rcMain .rcWeekend a {
            color: #333333 !important;
            }
   
 .leftPanelBarContainer
    {
        float: left;
        width: 250px;
        height:250px;
        overflow: auto;
        position:relative; /* Required to workaround IE rendering bug*/
    }
    .TimeOutCounter
    {
        Left: 130px;
        top:90px;
        POSITION: absolute;
        font-weight:bold       
    }
   
   
   
/* ----------------------------------- */
#container
{
    vertical-align: top;
}
   
#header
{
    width: 100%;
}
#menu
{
    height: 25px;
}
#navigation
{
    float: left;
    width: 19%;
    height: 500px;
}
#content
{
    float: right;
    width: 99%;
    /*height: 500px; */
}
   
#footer
{
    clear: both;
    width: 100%;
}
   
/*********************** Master Page Styles *******************/
   
#wrapper
{
    width: 100%;
    min-width: 1000px;
    margin: 0 auto;
    text-align: left;
    background-color: white;
    /* Make footer sticks to the bottom */
    min-height: 100%;
    position: relative;
    height: auto !important; /* IE6 compatibility for footer*/
    height: 100%; /* IE6 compatibility for footer*/
    display: inline-table;
}
   
/* Make footer sticks to the bottom */
#headerBody
{
    padding-bottom: 40px;
}
   
.MasterTop
{
    position: relative; /*background: #C0DEDD;*/ /*padding-bottom: .3em;*/
    overflow: auto;
    z-index: 3000; /*this is needed to enure the menu is always above everything else */
    background: #E0E0E0;  /*url(images/bgAccuroGradient.gif) top left repeat-y; */
}
.MasterTop a
{
    font-weight: bold;
    font-size: 98%;
    color: white;
    text-decoration: none;
}
.MasterTop a:hover
{
    text-decoration: underline;
}
.MasterTop a:visited
{
}
   
.MasterTop .EnterpriseInfo
{
    float: right;
    color: #999999;
    clear: both;
}
   
.MasterTop .UserInfo
{
    float: right;
    color: DarkBlue;
    margin-top: 2em;
    margin-right: .4em;
    clear: both;
}
   
.MasterTop .Header
{
    float: left;
    vertical-align: bottom;
    color: #999999;
    font-weight: bold;
    font-size: 2.2em;
    padding-left: 1em;
    padding-top: .6em;
}
   
.MasterTop .HeaderReg
{
    display: inline;
    color: #999999;
    font-weight: bold;
    font-size: 0.66em;
}
   
.MasterTop .SubHeader
{
    float: right;
    color: #999999;
    font-weight: bold;
    font-size: 1.6em;
}
   
.Logo
{
    float: left;
    background: url(images/MedAssets.gif);
    background-repeat: no-repeat;
    width: 135px;
    height: 35px;
    margin-top: .5em;
    margin-left: .5em;
}
   
.BeveledRule
{
    clear: both;
    width: 100%;
    height: 4px;
    background: transparent url(images/bgBeveledBorder.gif) repeat-x;
}
   
.MasterTop .LinkGroup
{
    margin-right: .4em;
    float: right;
    clear: both;
}
   
   
   
/***********************Start: MASTER MENU *******************/
.MasterMenu
{
 /*   background-color: #cccccc;*/
    font-weight: bold;
    font-size: 100%;
    left: 0em;
    top: 0em;
       
    position: relative; /*  padding: 2em 0 0 0 ; */
    vertical-align: bottom;
    z-index: 2000; /*this is needed to enure the menu is always above everything else */
}
   
.MasterMenu table
{
    background-color: #cccccc;
}
   
.MasterMenu table tr td a
{
    color: Black;
    background-color: #cccccc;
}
   
.MasterMenu table tr:hover td:hover a:hover
{
    background: #7795BD;
    color: White;
}
   
.MasterMenu table tr td
{
    /* width: 6.0em; */
     
     
}
   
/*********************** MASTER Content *******************/
   
.MasterContent
{
    margin: 0;
    width: 100%; /*  margin-left: 1em; */ /*   padding: .5em; */
    width: auto;
    height: auto;
    border-right-width: 1px;
    border-color: gainsboro;
    /*min-height: 700px; */ /* QQ Does not seem to be needed */
}
   
.MasterNestedContent
{
    margin: 1em;
}
   
.MasterFooter
{
    clear: both;
    position: relative;
    text-align: center;
    color: #777777;
    font-weight: normal;
    font-size: 70%;
    margin-top: 2em;
    margin-bottom: 1em;
    padding-top: .5em;
    border-top: solid 1px black;
}
   
/************************  Grid  ****************************/
   
.Grid
{
    font-size: .9em;
    border: solid 1px #7f7f7f;
    width: 99%;
      
}
   
.GridHeader th
{
    /*  background: url(../../images/sprite.png) repeat-x 0px 0px;      color: #000; */
    background: #328AA4 url(images/grid_tr_back.gif) repeat-x;
    color: #FFFFFF;
    border-color: #989898 #cbcbcb #989898 #989898;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px medium;
    padding: 4px 5px 4px 10px;
    text-align: left;
    vertical-align: bottom;
}
   
.GridHeader th a
{
    text-decoration: none;
    display: block;
    padding-right: 0px;
    color: #FFFFFF;
}
.GridHeader .sortAsc a
{
    background: url(images/sort-up.png) no-repeat right 90%;
}
   
.GridHeader .sortDesc a
{
    background: url(images/sort-down.png) no-repeat right 90%;
}
   
.Grid td
{
    padding: 4px 10px 4px 10px;
 /*   border-right: solid 1px #cbcbcb; */
}
.Grid .GridAltDataRow
{
    background-color: #E5F1F4; /* #edf5ff; /*   #CFECEC;*/
}
   
/* mouseover row style */
.Grid .GridRowOver
{
    background-color: #b2d2ff;
}
   
/* select row style */
.Grid .GridRowSelected
{
    background-color:  #FFFFCC; 
    font-weight: bold;
}
   
/**US16291 Changes **/
.RadGrid .rgGroupHeader td
{
    padding-left:0px !important;
   
}
.RadGrid .rgGroupHeader td p
{
    padding-left:0px !important;
   
}
   
   
   
/**US16291 Changes End**/
   
/** hack for DE6570 **/
/** GridClientSelectColumn in a RadGrid and set it to allow scroll, it will get a scroll bar for the outer body**/
/**This behavior comes from the way checkboxes are decorated. display:block css is needed to fix checkbox styling  **/
   
.Grid input.rfdRealInput
{
    display:block;
    position: static !important;
    float: right;
    outline: 0;
    width: 0;
    height: 0;
    margin-top: -5px;
    FILTER: alpha(opacity=0);
    -moz-opacity: 0;
    opacity: 0;
}
div.RadGrid .rgFilterRow .rgFilterBox
    {
        width: 100%;
    }
         
div.RadGrid .rgFilterRow td
    {
        padding-right: 30px;
    }
/************************  Benefit Grid  ****************************/
   
.BenefitGrid
{
    font-size: .8em;
    border: solid 1px #7f7f7f;
    width: 99%;
}
   
.BenefitGridHeader th
{
    /*  background: url(../../images/sprite.png) repeat-x 0px 0px;      color: #000; */
    background: #328AA4 url(images/grid_tr_back.gif) repeat-x;
    color: #FFFFFF;
    border-color: #989898 #cbcbcb #989898 #989898;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px medium;
    padding: 4px 5px 4px 10px;
    text-align: left;
    vertical-align: bottom;
}
   
.BenefitGridHeader th a
{
    text-decoration: none;
    display: block;
    padding-right: 0px;
    color: #FFFFFF;
}
.BenefitGridHeader .sortAsc a
{
    background: url(images/sort-up.png) no-repeat right 90%;
}
   
.BenefitGridHeader .sortDesc a
{
    background: url(images/sort-down.png) no-repeat right 90%;
}
   
.BenefitGrid td
{
    padding: 4px 10px 4px 10px;
    border-right: solid 1px #cbcbcb;
}
.BenefitGrid .GridAltDataRow
{
    background-color: #E5F1F4; /* #edf5ff; /*   #CFECEC;*/
}
   
/* mouseover row style */
.BenefitGrid .GridRowOver
{
    background-color: #b2d2ff;
}
   
/* select row style */
.BenefitGrid .GridRowSelected
{
    background-color:  #FFFFCC; 
    font-weight: bold;
}
   
/****************************************************************
   ValidationSummary
****************************************************************/
.validationSummary
{
    display: block;
    border: 1px solid;
    margin: 0px 0px 5px 0px;
    font-weight: bold;
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url(images/error.png);
    background-repeat: no-repeat;
    background-position: .7em .5em;
    padding: 1em 0em 1em 4em;
}
.validationSummary img
{
    border: none;
}
   
/****************************************************************
   MessageBox Panel
****************************************************************/
.msgInfo, .msgSuccess, .msgWarning, .msgError, .msgValidation
{
    display: block;
    border: 1px solid;
/*    margin: 10px 0px; */
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: 5px 3px;
}
.msgInfo
{
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url(images/information.png);
}
.msgSuccess
{
    color: #4F8A10;
    background-color: #DFF2BF;
    background-image: url(images/checkmark.png);
}
.msgWarning
{
    color: #9F6000;
    background-color: #FEEFB3;
    background-image: url(images/warning.png);
}
.msgError
{
    color: #D8000C;
    background-color: #FFBABA;
    background-image: url(images/error.png);
}
.msgInfo p, .msgSuccess p, .msgWarning p, .msgError p
{
    padding: 0px 35px;
    margin: .8em 0    
}
.msgInfo a, .msgSuccess a, .msgWarning a, .msgError a
{
    cursor: pointer;
}
.msgContainer img
{
    border: none;
}
   
/****************************************************/
.LoginStatus a
{
    padding-right: 2px;
    vertical-align: text-bottom;
    font-weight: normal;
}
   
/*******************************************************/
.modalBackground, #progressBackgroundFilter
{
  position:absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  overflow: hidden;
  padding: 0;
  margin: 0;
  background-color: #D8D8D8;
  filter: alpha(opacity=50);
  opacity: 0.5;
  z-index: 1000;
}
   
#processMessage
{
  position: absolute;
  top: 30%;
  left: 43%;
  padding: 1em;
  width: 7em;
  height: 1em;
  z-index: 1001;
  background-color: #fff;
  background: #fff url(images/loading.gif) 95% 80% no-repeat;
  border: 1px solid black
}
   
.ModalPopupX
{
   border: solid 1px #c0c0c0;
   background: #f0f0f0;
   padding: 10px;
   position: absolute;
   top: -1000px;
}
   
.ModalPopup
{
    padding: 2px;
    background: #00529B;
    border: solid 1px black;   
}
.ModalPopupHeader
{
    padding: 2px;
    cursor: move;
    width: 100%; 
}
.ModalPopupHeaderTitle
{
    font-size: 12pt;
    font-weight: bold;
    width: 100%;
}
.ModalPopupHeaderCancel
{
    text-align: right;
    cursor: pointer; 
    /*
    background-image: url(images/cancel.gif);
    background-repeat: no-repeat;
    border: 1px solid black;
*/
}
   
/***
.ModalPopup th
{
    background: #328AA4 url(images/grid_tr_back.gif) repeat-x;
    font-size:  120%;
    color: White;
    font-weight: bold;
}
*/
.tabStrip
{
font-size:  4pt;
}
   
div.RadListBox .rlbText{
        white-space: nowrap;
        font-Size: 12px;
    }
       
div.RadListBox {
        width: 250px;
         display: block;
    }
    
div.RadTabStripVertical .rtsLink
{
    text-align:left;
}
       
.HeaderTitle
{
  font-size: 11pt;
  color: #002C76;
  /*margin: 5px 3px 3px 3px;*/
}
.HeaderSubTitleNotBold
{
  font-size: 9pt;
  color: #002C76;
  /*margin: 5px 3px 3px 3px;*/
}
.LabelText
{
  font-size: 8pt;
  color: #002C76;
  /*margin: 5px 3px 3px 3px;*/
}
.HeaderSubTitle
{
    font-weight: bold;
    font-size: 10pt;
    /* margin: 5px 3px 3px 3px; */
}
   
.verticalMenu
{
   
    border-style: none;
    width: 170px;
    background-color: gainsboro;
    min-height: 400px;
    max-height: 400px;
         
}
   
.rtsSelected
{
    background: white !important;
    border-left: solid 1px Gray !important;
    border-top: solid 1px Gray !important;
    border-right: none 0px Gray !important;
}
   
.rtsSelected .rtsOut
{
    background: transparent !important;
   
}
   
.rtsSelected .rtsIn
{
    background: transparent !important;
           
}
   
.rtsSelected .rtsTxt
{
    background: transparent !important;
}
   
div.RadTabStripVertical .verticalTab
{
    color: #808080;
    border-right: solid 1px Gray !important;
       
}
   
div.RadTabStripVertical .verticalTabSelected
{
    color: #808080;
    background: white !important;
    border-left: solid 1px Gray !important;
    border-top: solid 1px Gray !important;
    border-right: none 0px Gray !important;
}
   
div.RadTabStripVertical .verticalTabHighlight
{
    border-right: solid 1px Gray !important;
      
}
   
div.RadTabStripVertical .verticalHighlightedTabSelected
     background: white !important;
    border-left: solid 1px Gray !important;
    border-top: solid 1px Gray !important;
    border-right: none 0px Gray !important;
      
}
   
   
   
.formLayoutLogin
{
       
    border: 0px solid #989898;
    padding: 0px 0px;
   /* padding: 5px 5px ;  */
   /* background:  #EAF0FC; *//* #E3F0F0; #FBFDFD; #D3E8E8;  #E5F1F4;  #F7FBFB; */
   /* border-left: 1px solid #87CEFA; */
    /* border-right: 1px solid #87CEFA; */
       
  background: #CDDCF7; /* #B7C8F6; *//* for non-css3 browsers */
width: 100%;
height: 100%;
   
   
       
}
   
.formPadding
{
    padding-top: 40px;
    padding-left: 20px;
}
.tableTitle
{
    font-size: 12pt;
    font-weight:bold;
}
   
.tableLabel
{
    font-Size: 10pt;
    font-family:Helvetica,Arial,sans-serif;
    font-weight:normal;
}
   
.tableInput
{
    font-family:Helvetica,Arial,sans-serif;
    font-size:8pt;
}
html body form .RadInput 
{
    Font-Size: 8pt;
    font-family: Helvetica,Arial,sans-serif;
    font-weight: normal;
}
.tableAnnouncement
{
    font-size: 14pt;
}
   
.failureNotification
{
    color: Red;
}
   
   
   
/* Brandzone Header styles start here */
   
#brandzoneHeader .topBar{
height:18px;
border-bottom:#0b4988 1px solid;
background-color:#dfe9f7;
font-family:Helvetica,Arial,sans-serif;
font-size:80%;
}
   
#brandzoneHeader .topBar .welcomeMsg{
margin:4px 0 0 10px;
float:left;
}
   
#brandzoneHeader .topBar .facilityInfo{
float:right;
margin:4px 20px 0 0;
}
   
#brandzoneHeader .topBar .facilityInfo a{
text-decoration:underline;
font-weight:bold;
color:#144884;
}
   
#brandzoneHeader .topBar .LogOut{
float:right;
margin:4px 45px 0 0;
}
   
#brandzoneHeader .topBar .LogOut a{
text-decoration:underline;
font-weight:bold;
}
   
#brandzoneHeader .topBar .topLinks{
float:right;
margin:5px 0 0 0;
}
   
#brandzoneHeader .topBar .topLinks img{
margin:0 16px 0 0;
border:0;
}
   
#brandzoneHeader .bannerContainer{
background:url(brandZoneImages/bannerBack.gif) repeat-x;
height:47px;
}
   
   
#brandzoneHeader .banner{
background:url(brandZoneImages/productName.jpg) no-repeat;
height:46px;
/*border-bottom:#0b4988 1px solid;*/
}
   
#brandzoneHeader .banner .search{
float:right;
margin:10px 20px 0 0;
}
   
#brandzoneHeader .banner .logo{
background:url(brandZoneImages/logo.png) no-repeat;
float:right;
width:110px;
height:46px;
margin-right:22px;
}
   
   
/* Brandzone Footer styles start here */
#brandzoneFooter .footer{
background:url(brandZoneImages/bottomShadow.gif) 0 0 repeat-x #EAF0FC;
padding:10px 0px 5px 0px;
color:#333333;
font-size:80%;
text-align:right;
line-height:15px;
    font-size: 11px;
font-family:Helvetica,Arial,sans-serif;
/* Stick footer to bottom */
height: 30px;
position:absolute;
bottom:0px;
width:99.9%;
}
   
#brandzoneFooter .footer a{
color:#144884;
text-decoration:none;
}
   
#brandzoneFooter .footer a:hover{
color:#144884;
text-decoration:underline;
}
   
/***************Main menu styles starts here***************/
#mainMenu {
    MARGIN: 0 0 0 10px;
    float:left;
    padding:0px;
    height:19px;
    background:url(brandZoneImages/topNavBack.gif) repeat-x;
    margin-top:27px;
}
#mainMenu UL {
    PADDING: 0px; MARGIN: 0px; WHITE-SPACE: nowrap; LIST-STYLE-TYPE: none; TEXT-ALIGN: left; DISPLAY: inline;
}
   
#mainMenu LI {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none;   DISPLAY: inline
}
   
#mainMenu UL UL {
    LEFT: -9999px; POSITION: absolute; margin:0px; padding:0px;
}
#mainMenu UL.level1 {
    MARGIN: 0;
}
   
#mainMenu UL.level2{
margin-left:-2px;
}
   
#mainMenu UL.level2, #mainMenu UL.level3, #mainMenu UL.level4{
    background:url(brandZoneImages/topSubNavBack.gif);
    margin-top:0px;
    border:#304682 1px solid;
    margin-top:1px;
}
   
   
   
#mainMenu UL.level2 li a, #mainMenu UL.level3 li a, #mainMenu UL.level4 li a{
    font-weight:normal;
    color: #304682;
    margin-top:0px;
    padding:0 15px 1px 10px;
}
   
   
   
   
#mainMenu UL.level1 LI.level1-li {
    DISPLAY: block; FLOAT: left; POSITION: relative;
    border-right:#a4bad8 1px solid;
    border-left:#FFFFFF 1px solid;
    margin-top:1px;
}
   
   
   
#mainMenu li.level1-li-selected {
    background: #FFFFFF;
border-top:#165790 1px solid;
border-right:#165790 1px solid;
border-left:#165790 1px solid;
text-decoration:none;
        DISPLAY: block; FLOAT: left; POSITION: relative;
    padding:0 0 2px 0;
    margin-top:-1px;
}
   
#mainMenu .level1-li-selected > a{
    font-size:75%;
font-family:Tahoma;
font-weight:bold;
color:#165790;
text-decoration:none;
}
   
   
   
#mainMenu A {
    PADDING-RIGHT: 25px; DISPLAY: block; PADDING-LEFT: 15px; PADDING-BOTTOM: 0px; FONT: 11px/25px Tahoma,arial,sans-serif; font-weight:bold;
color:#501d47; PADDING-TOP: 0px; TEXT-DECORATION: none; line-height:18px;
}
#mainMenu UL.level1 LI.level1-li A.level1-a {
    FLOAT: left
}
#mainMenu UL LI:hover > UL {
    LEFT: 0px; VISIBILITY: visible; TOP: 18px
}
#mainMenu UL UL LI:hover > UL {
    MARGIN-TOP: -20px; LEFT: 100%; VISIBILITY: visible; TOP: auto
}
#mainMenu LI.left:hover > UL {
    RIGHT: 0px; LEFT: auto; VISIBILITY: visible; TOP: 18px
}
#mainMenu LI.left UL LI:hover > UL {
    MARGIN-TOP: -20px; RIGHT: 100%; LEFT: auto; VISIBILITY: visible; TOP: auto
}
#mainMenu A:hover UL {
    LEFT: 0px; TOP: 18px
}
#mainMenu LI.left A:hover UL {
    RIGHT: -1px; LEFT: auto; TOP: 18px
}
#mainMenu LI.left UL A {
    PADDING-RIGHT: 10px; PADDING-LEFT: 20px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; TEXT-ALIGN: right
}
#mainMenu A:hover A:hover UL {
    LEFT: 100%; VISIBILITY: visible
}
#mainMenu A:hover A:hover A:hover UL {
    LEFT: 100%; VISIBILITY: visible
}
#mainMenu LI.left A:hover A:hover UL {
    RIGHT: 0px; LEFT: auto; VISIBILITY: visible
}
#mainMenu LI.left A:hover A:hover A:hover UL {
    RIGHT: 0px; LEFT: auto; VISIBILITY: visible
}
#mainMenu A:hover UL UL {
    LEFT: -9999px
}
#mainMenu A:hover A:hover UL UL {
    LEFT: -9999px
}
#mainMenu LI.left A:hover UL UL {
    LEFT: -9999px
}
#mainMenu LI.left A:hover A:hover UL UL {
    LEFT: -9999px
}
   
#mainMenu LI A:hover {
    text-decoration:none; DIRECTION: ltr
}
#mainMenu LI A.fly:hover {
    text-decoration:none; DIRECTION: ltr
}
#mainMenu LI:hover > A {
    text-decoration:none
}
#mainMenu UL LI:hover > A.fly {
    text-decoration:none
}
#mainMenu TABLE {
    MARGIN-TOP: -4px; LEFT: 0px; WIDTH: 0px; POSITION: absolute; BORDER-COLLAPSE: collapse; HEIGHT: 0px
}
#mainMenu TABLE TABLE {
    MARGIN-TOP: -29px; LEFT: 99%; WIDTH: 0px; POSITION: absolute; BORDER-COLLAPSE: collapse; HEIGHT: 0px
}
#mainMenu LI.left TABLE {
    MARGIN-TOP: -4px; RIGHT: 0px; LEFT: auto; WIDTH: 0px; POSITION: absolute; BORDER-COLLAPSE: collapse; HEIGHT: 0px
}
#mainMenu LI.left TABLE TABLE {
    MARGIN-TOP: -29px; RIGHT: 100%; LEFT: auto; WIDTH: 0px; POSITION: absolute; BORDER-COLLAPSE: collapse; HEIGHT: 0px
}
   
   
/***************Main menu styles ends here***************/
   
.RadListBox li.rlbItem, .RadListBox li.rlbSelected,  .RadListBox span.rlbText 
    padding:0 0 0 1;
    line-height:12px;
.RadListBox span.rlbText 
    padding:0 0 0 1;
    line-height:12px;
}
   
.RadTreeView {
  line-height: 16px;
}
   
.RadTreeView .rtSp {
  height: 14px;
}
   
.RadTreeView .rtHover .rtIn,
.RadTreeView .rtSelected .rtIn {
   
  padding: 0px 1px 0px;
}
   
.RadTreeView .rtIn {
   
  padding: 1px 2px 1px;
}
   
.rcbSeparator
        {
            background: lightblue !important;
            height:1px !important;
            min-height: 1px !important;
            padding:0px !important;
            margin:0px !important;           
   
        }
Pavlina
Telerik team
 answered on 13 Mar 2013
1 answer
146 views
i'm creating a dynamic page where i have two layouts: "main layout" and "toolbox layout". I can drag RadDock from "toolbox layout" to  "main layout". The docks within "toolbox layout" has the next structure: RadDock with a ContentTemplate with a RadDockZone inside it.

For drag&drop action i“m using a clone method (i found it in this forum) like this:

function WrapperOnClientDragStart(dock, args) {

    // ###

    //Get a reference to the RadDock HTML element
    var dockElement = dock.get_element();

    //Create a cloned elements
    var clonedDock = dock.clone();
    var clonedElement = clonedDock.get_element();

    //Get the ZoneID from which the dock is initially dragged
    parentToolBoxZoneID = clonedDock.get_dockZoneID();

    // ### MANAGE ZONES

    // Set Forbidden Zones
    var forbiddenZones = clonedDock.get_forbiddenZones();
    forbiddenZones[forbiddenZones.length] = dock.get_dockZone().get_uniqueName();
    clonedDock.set_forbiddenZones(forbiddenZones);

    // ### MANAGE EVENTS
            
    //Detach the OnClientDragStart handler method from the cloned dock or recursion will occur
    clonedDock.remove_dragStart(WrapperOnClientDragStart);

    //Attach the OnClientDragEnd handler method to the DragEnd client-side event
    clonedDock.add_dragEnd(WrapperOnClientDragEnd);

    //Attach the OnClientDockPositionChanged handler method to the DockPositionChanged client-side event
    //clonedDock.add_dockPositionChanged(OnClientDockPositionChanged);

    // Hide reference dock (need before manage handle)
    dockElement.style.display = 'none';

    // ### MANAGE HANDLE

    //Create an event which will change the currently dragged RadDock - it will be cloned RadDock
    var ev = args.ownerEvent;
    var handle = clonedDock.get_handle();
    if (document.createEventObject) {
        // create event for IE
        var evt = document.createEventObject();
        evt.clientX = ev.clientX;
        evt.clientY = ev.clientY;
        handle.fireEvent("onmousedown", evt)
    }
    else {
        // create event for FF and others
        var evt = document.createEvent("MouseEvents");
        evt.initMouseEvent("mousedown", !ev.cancelBubble, ev.cancelable, ev.view, ev.detail, ev.screenX, ev.screenY, ev.clientX, ev.clientY, ev.ctrlKey, ev.altKey, ev.shiftKey, ev.metaKey, ev.button, null);
        handle.dispatchEvent(evt);
    }
            
    //Show original RadDock (need afeter manage handle)      
    dockElement.style.display = '';

    //Hack: a placeholder stays visible so we should hide it programatically
    dock.get_dockZone().hidePlaceholder();
    args.set_cancel(true);

}

The cloned dock is dropped correctly in the "main layout". But the problem begins when i try drop other simple docks inside the recently RadDock/RadDockZone item. Seem as if a RadDockZone isn“t enable to drop elements.

I“ve tried set AllowedZones in WrapperOnClientDragStart client side script but isn“t work.

Someone can i help me?

Thanks.

Slav
Telerik team
 answered on 13 Mar 2013
2 answers
114 views
Hi


      how to store multiple files into different target folder in telerik upload control



Thank you 
Mugil
Mugil
Top achievements
Rank 1
 answered on 13 Mar 2013
1 answer
100 views
I have a grid (version 2012.2.607.40) that has the resizing set as:
<Resizing AllowColumnResize="true"  ClipCellContentOnResize="true"
ResizeGridOnColumnResize="false" AllowRowResize="false" />

Then in my code behind, I am creating columns.  The last two columns created have the Resizable property set to false:
column.Resizable = false;

When I hover over the headers of the first set of columns, the right side of the header shows the mouse cursor change.  The two final columns do not allow the resize cursor to appear.  This works as expected.  However, when I actually change the size of the columns set to true, by default, it resizes the rest of the columns to fill the space of the grid.  Even the columns marked false.  That is my problem.

For example, say there are five Columns (A, B, C, D, and E).  D and E are set for Resizable = false.  By default each column is at 20% of the grids width.  If I resize column B down to 12%, I would hope to see A and C grow to 24% each while D and E stay at 20%.  However, I see all four resize to 22%.  Even the ones that should not resize.  Bummer!!

What can I do differently for the correct calculations to occur in resizing?

Best Wishes,
Keith

Kostadin
Telerik team
 answered on 13 Mar 2013
Narrow your results
Selected tags
Tags
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?