Questions on UI for ASP.NET AJAX Forum

1 answer

101 views

[Solved] Server side event before Upload

Hi,

Is there a way to execute server-side code before the upload starts or have I to call a webmethod from OnClientProgressUpdating?

Upload (Obsolete)

answered on 10 Nov 2010

3 answers

367 views

set visible true on button click

hi,
how can i set visible footer true inside rad grid on click of button that is outside from rad grid.
thanks

Grid

answered on 10 Nov 2010

3 answers

81 views

Are these bugs fixed yet?????

'Cursor jumps to top of the text edito' (http://www.telerik.com/community/forums/sharepoint-2007/full-featured-editor/cursor-jumps-to-top-of-the-text-edito.aspx)

and 'Upgrade messes up html' (http://www.telerik.com/community/forums/aspnet-ajax/editor/upgrade-messes-up-html.aspx) middle of page

I am having the same problem and would like to know if this has been fixed. If so we will upgrade our package.

I have a client whose .net app contains the editor complaining about this issue.

Thanks

Editor

answered on 10 Nov 2010

1 answer

102 views

Grid trying to bind to custom Filtering Template column

I'm following the demo for Grid/Filtering Template Columns and am able to create and add my custom filter column (with a dropdownlist for selecting the value) but when the bind occurs on the grid I am getting an error that indicates that the grid is attempting to bind data to the row containing the filtering control.

My FilteringTemplateColumn is almost exactly the same as in the demo, except for how the droplist is populated. I'm using a generic dictionary to populate the droplist. There error I am receiving is

Object of type System.Collections.Generic.KeyValuePair`2[System.String,System.String] does not have a CreatedBy.ID property.

CreatedBy.ID is the DataField property for my custom filtering template column and is also used in the template in a label control via an Eval("CreatedBy.ID")

<form id="form1" runat="server">

<div>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="FilterableRadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="FilterableRadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadGrid ID="FilterableRadGrid1" Width="97%" runat="server" GridLines="None" AllowFilteringByColumn="True" AutoGenerateColumns="False">

<MasterTableView AllowFilteringByColumn="true" TableLayout="Fixed">

<Columns>

<telerik:GridBoundColumn DataField="Created" HeaderText="Created" UniqueName="column"

AllowFiltering="true">

</telerik:GridBoundColumn>

<cc1:SICustomFilteringDropListColumn FilterControlWidth="180px" HeaderText="Created By"

FilterField="CreatedBy.ID" DataField="CreatedBy.ID">

<ItemTemplate>

<asp:Label ID="lblCreatedBy" runat="server"><%# Eval("CreatedBy.ID")%></asp:Label>

</ItemTemplate>

</cc1:SICustomFilteringDropListColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

</form>

I'm sure I'm missing something simple. Thank you for your help.

Sean M. Severson

Grid

answered on 10 Nov 2010

3 answers

417 views

[Solved] radtreeview set image size

hi,

i searched the online help and the forum, but i couldn't find a way to help me with image size.

i set the image url for every Treenode, but i don't know how to limit the size / set the size of the treenode's image.

it should scare down the image's size to like 16px x 16px.

thanks Mario

TreeView

answered on 10 Nov 2010

1 answer

69 views

Hide leaf grid in a self referencing hierarchical grid

Hello,

Can any one say, how to hide the leaf node grid from a self referencing hierarchical grid ?

Grid

answered on 10 Nov 2010

0 answers

93 views

problem with multi-column menu

i create a simple multi-column menu
some thing like this

1 - 2 - 3 - 4- 5- 6

item 2 have 2 column

2-1                       and            2-2
2-1-1                                      2-2-1
2-1-2                                      2-2-2

ok?
2-2-1 go to ~/en/pr/hr/default.aspx
2-2-2 go to ~/en/pr/hr/default2.aspx

ok?
i have some folder in my website and my webpages are in it. and some pages are outside of folder sooo

when i go to ~/en/pr/hr/default.aspx and then click on 2-2-2 it gos to "~/en/pr/hr/~/pr/hr/default2.aspx"

what 's the problem? is it a telerik bug? or it can be fized?

Menu

asked on 10 Nov 2010

1 answer

214 views

bug of page appearance on selection of radcombobox with autopostback=true

Good day!
I have got some comboboxes on page. Some of them has property autopostback=true, enother autopostback=false.
When I select (for the first time) a value of combobox with autopostback=true, good looking page (you can see it at the picture 1) becomes bad looking =((( (picture 2). But the html still being the same :(

It happens only in Firefox, Opera, Google Chrome, Safari. In ie 6, ie 7, ie 8 everything is allright.

There is my code below (css is here: http://aptekaural.ru/tmp/style.css and here: http://aptekaural.ru/tmp/style_ie.css ).
What do I do wrong?

Site.master
_____________________________________________________

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Pharm.New.Site" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register Src="~/Controls/MainMenu.ascx" TagName="MainMenu" TagPrefix="uc1" %>
<%@ Register Src="~/Controls/TopMenu.ascx" TagName="TopMenu" TagPrefix="uc2" %>
<%@ Register Src="~/Controls/Footer.ascx" TagName="Footer" TagPrefix="uc3" %>

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

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Единая Фармацевтическая справка</title>
    <link href="/Style/style.css" rel="stylesheet" type="text/css" />
    
    
    
    <link href="FarmPortal/Grid.FarmPortal.css" rel="stylesheet" type="text/css" />
    <link href="FarmPortal/ComboBox.FarmPortal.css" rel="Stylesheet" type="text/css" />
    <link href="FarmPortal/Input.FarmPortal.css" rel="Stylesheet" type="text/css" />
    <style type="text/css">
        .highlight {text-decoration:none; font-weight:bold; color: red;}
    </style>
    <script type="text/javascript">

    </script>
</head>
<body onload="">
<form runat="server" >
<telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="true"/>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server" >
                    <script type="text/javascript">
                        $(document).ready(function () {
                            var combo =<%=cbRegion.ClientID%>;
                            combo.FixUp(combo.InputDomElement,true);
                            var combo1 =<%=cbCity.ClientID%>;
                            combo1.FixUp(combo1.InputDomElement,true);
                        });
                  </script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="cbRegion">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="cbCity" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="cbCity">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="cbCity" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<div id="glav">
    <table cellpadding="0px" cellspacing="0px" style="margin:0px; padding:0px; height: 100%; min-height: 100%; min-width: 100%;"    >
        <tr>
            <td>
                <div class="h_r">
                  <div class="h_l">
                    <div class="header">
                        <div class="m_r">
                            <div class="m_l">
                                <div class="menu">
                                    <uc2:TopMenu runat="server" ID="TopMenu"/>
                                </div>
                            </div>
                        </div>
                        <div class="main">
                            <div class="center1">
                                <div id="poisk">
                                   <div id="geo">
                                        вы находитесь в г. Екатеринбурге, если мы ошиблись
                                        <a href="#">поправьте нас</a>
                                   </div>
                                   <asp:Panel runat="server" ID="pnlLogic" DefaultButton="lbtSearch">
                                       <table>
                                           <tr>
                                                  <td>
                                                    <telerik:RadComboBox ID="cbRegion" Width="162px" EnableTextSelection="False" runat="server" onselectedindexchanged="cbRegion_SelectedIndexChanged" AutoPostBack="true" Skin="Default" />
                                                   </td>
                                                   <td>
                                                    <telerik:RadComboBox ID="cbCity" Width="150px" EnableTextSelection="False" runat="server" AutoPostBack="true" onselectedindexchanged="cbCity_SelectedIndexChanged" Skin="Default" />
                                                    </td>
                                                    <td>
                                                    <telerik:RadComboBox ID="cbTypeSearch" Width="150px" runat="server"/>
                                                   </td>
                                           </tr>
                                           <tr align="center">
                                                <td colspan="3">
                                                    <telerik:RadTextBox runat="server" ID="tbSearch" Width="100%" Height="16"/>
                                                </td>
                                           </tr>
                                           <tr align="center">
                                                <td colspan="2" >
                                                    <asp:LinkButton runat="server" ID="lbtSearch" Text="_______" CssClass="poisk_linkbutton" Width="60px" onclick="btSearch_Click" />
                                                </td>
                                                <td align="right">
                                                    
                                                </td>
                                           </tr>
                                        </table>
                                    </asp:Panel>
                                 </div>
                              </div>
                        </div>
                        <div class="left"><a id="logo" href="./">
                                 Единая<br />
                                 Фармацевтическая<br />
                                 Справка</a>
                        </div>
                        <div class="right tel">
                            <a href="http://cabinet.aptekaural.ru"> вход в личный кабинет</a><br />
                            (343) 123 45 67
                        </div>
                      </div>
                    </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <div id="linkmenu">
                    <uc1:MainMenu runat="server" ID="MainMenu"/>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <table cellpadding="0px" cellspacing="0px" style="margin:0px; padding:0px; height: 100%; min-height: 100%;" width="100%" >
                        <tr>
                            <td id="left" valign="top">
                                <asp:ContentPlaceHolder ID="phLeft" runat="server"/>
                            </td>
                             <td id="center" valign="top">
                                <asp:ContentPlaceHolder ID="phCenter" runat="server"/>
                            </td>
                            <td id="right" valign="top">
                                <asp:ContentPlaceHolder ID="phRight" runat="server"/>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td>
                    <uc3:Footer runat="server" ID="Footer" />
                </td>
            </tr>
    </table>
</div>
</form>
</body>
</html>

Site.master.cs
_____________________________________________________
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.UI;
using Clients.Core.DTO.DTO;
using Pharm.New.Code;

namespace Pharm.New
{
    public partial class Site : MasterPage
    {

        private static readonly string[] typeSearch = {"Товары", "Аптеки", "Медицински учреждения"};

        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
            Response.Cache.SetCacheability(HttpCacheability.NoCache);
            Response.Cache.SetNoStore();

            cbTypeSearch.SelectedIndexChanged += (o, ev) =>
                                                     {
                                                         Session["typeSearch"] = cbTypeSearch.SelectedValue;
                                                     };
        }
        protected void Page_Init(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindRegions();
                if (Session["SearchString"] != null)
                    tbSearch.Text = (string)Session["SearchString"];

            }
        }
        protected void Page_Prerender(object sender, EventArgs e)
        {
            RegisterStartupScripts();
        }
        public int CityId
        {
            get {
                return String.IsNullOrEmpty(cbCity.SelectedValue) ? 0 : Int32.Parse(cbCity.SelectedValue);
            }
        }
        public string CityName
        {
            get
            {
                return cbCity.SelectedItem.Text;
            }
        }
        public string SearchString
        {
            get { return tbSearch.Text; }
        }
        private void BindRegions()
        {
            var cap = new CAPServiceHelper();
            cbRegion.DataSource = cap.GetRegions().OrderBy(r => r.Name).ToList();
            cbRegion.DataTextField = "Name";
            cbRegion.DataValueField = "Id";
            cbRegion.DataBind();
            cbRegion.SelectedIndex =
                cbRegion.FindItemIndexByValue(Request.Cookies["region"] != null
                                                  ? Request.Cookies["region"].Value
                                                  : Constants.TyumenRegionId.ToString());
            cbCity.SelectedIndex = cbCity.FindItemIndexByValue(Request.Cookies["city"] != null ? Request.Cookies["city"].Value : Constants.TyumenId.ToString());
            cbRegion_SelectedIndexChanged(cbCity, null);
            cbTypeSearch.DataSource = typeSearch;
            cbTypeSearch.DataBind();
            if (Session["city"] != null)
                cbCity.SelectedIndex = cbCity.FindItemIndexByValue((string)Session["city"]);
            if (Session["typeSearch"] != null)
                cbTypeSearch.SelectedIndex = cbTypeSearch.FindItemIndexByValue((string)Session["typeSearch"]);
        }
        protected void cbRegion_SelectedIndexChanged(object o, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
        {
            var cap = new CAPServiceHelper();
            cbCity.DataSource = cap.GetCities().Where(c => c.Region.Id == Convert.ToInt32(cbRegion.SelectedValue)).OrderBy(r => r.Name).ToList();
            cbCity.DataTextField = "Name";
            cbCity.DataValueField = "Id";
            cbCity.DataBind();
            int idx = ((List<CityDTO>)cbCity.DataSource).FindIndex(s => s.IsCapital);
            if (idx != -1)
                cbCity.SelectedIndex = idx;
            if (cbCity.SelectedValue != null)
            {
                Response.Cookies["city"].Value = cbCity.SelectedValue;
                Response.Cookies["city"].Expires = DateTime.Now.AddYears(3);
            }
            if (cbRegion.SelectedValue != null)
            {
                Response.Cookies["region"].Value = cbRegion.SelectedValue;
                Response.Cookies["region"].Expires = DateTime.Now.AddYears(3);
            }
        }
        protected void cbCity_SelectedIndexChanged(object o, Telerik.Web.UI.RadComboBoxSelectedIndexChangedEventArgs e)
        {
            if (cbCity.SelectedValue != null)
            {
                Response.Cookies["city"].Value = cbCity.SelectedValue;
                Response.Cookies["city"].Expires = DateTime.Now.AddYears(3);
                Session["city"] = cbCity.SelectedValue;
            }
        }
        protected void btSearch_Click(object sender, EventArgs e)
        {
            Session["SearchString"] = tbSearch.Text;
            if (cbTypeSearch.SelectedItem.Text == "Товары")
                Response.Redirect("./Product.aspx");
            else if (cbTypeSearch.SelectedItem.Text=="Аптеки")
                Response.Redirect("./Pharmacy.aspx");
        }
        private void RegisterStartupScripts()
        {
            var sb = new StringBuilder();
            sb.Append(" function addClickFunction(id) {{ ");
            sb.Append(" var b = document.getElementById(id); ");
            sb.Append(" if (b && typeof(b.click) == 'undefined') b.click = function() {{ ");
            sb.Append(" var result = true; if (b.onclick) result = b.onclick(); ");
            sb.Append(" if (typeof(result) == 'undefined' || result) {{ eval(b.getAttribute('href')); }} ");
            sb.Append(" }}}}; ");

            const string addClickScript = "addClickFunction('{0}');";
            var clickScript = String.Format(addClickScript, lbtSearch.ClientID);

            ScriptManager.RegisterStartupScript(this, GetType(), "addClickFunctionScript", sb.ToString(),true);
            ScriptManager.RegisterStartupScript(this, GetType(), "click_" + lbtSearch.ClientID, clickScript, true);
        }
        public string Title
        {
            get { return Page.Title; }
            set { Page.Title = value; }
        }


    }
}

ComboBox

answered on 10 Nov 2010

1 answer

128 views

Client API - Initial Behaviors

Hello,

I am opening the rad window via radopen:

No matter what setting I put in the window manager, it does not want to use those settings. Any thoughts on how I can open my rad window and use the settings via the window manager?

I really need to set initial behaviors and other properties, but can't find it in the client side api documentation.

function ShowAddForm() {

var window = radopen("AddAction.aspx?CID=<%= HttpUtility.UrlEncode(Request["CID"]) %>", "AddActionDialog");

window.setSize(800, 600);

window.SetModal(true);

window.center();

return false;

}

function ShowAddForm() {

var window = radopen("AddAction.aspx?CID=<%= HttpUtility.UrlEncode(Request["CID"]) %>", "AddActionDialog");

window.setSize(800, 600);

window.SetModal(true);

window.center();

return false;

}

I have my RadWindowManager:

<telerik:RadWindowManager ID="RadWindowManager1" runat="server"

EnableShadow="true" Behaviors="Close" KeepInScreenBounds="True"

ReloadOnShow="True" ShowContentDuringLoad="False" VisibleStatusbar="False"

VisibleTitlebar="False">

<Windows>

<telerik:RadWindow ID="AddActionDialog" runat="server" Title="Add New Action" Height="800"

Width="600" ReloadOnShow="true" ShowContentDuringLoad="false" Modal="true" />

</Windows>

</telerik:RadWindowManager

Window

answered on 10 Nov 2010

2 answers

234 views

strange behavior with the grid pager css

Hi,

I am seeing some strange behavior with how my grid pager is displayed in different scenarios. It might have something to do with the css on my page but I am not able to figure out what.

I have a search text box on my page which loads the grid with the results.
I also have a button on my page that loads up an additional search panel and populates grid based on the information provided in additional search.

When the page is loaded if I do a basic search the frid pager shows all aligned as shown in the attached file pager_Aligned.
But if I first open the additional search panel and load the grid based on that info the pager becomes centered as shown in attached file pager_centered.

I am not able to understand this behavior. The panel and the grid are not part of the same table so the css of the panel should not be affecting the grid css.

Below is the different css I am using on my page. Please let me know what could be the cause of this.

<div style="width: 100%; text-align: center;">

<table border="0px" cellspacing="0" style="margin-left: auto; margin-right: auto; text-align: right;">

<tr>

<td style="width: 180px; text-align: left">

<telerik:RadTextBox ID="RadTextBoxName" runat="server" TabIndex="4" SelectionOnFocus="CaretToEnd"

Width="175px" ForeColor="#898a8c" Font-Names="Tahoma" Font-Size="10pt" OnTextChanged="RadTextBoxName_OnTextChanged"

Height="16px" EmptyMessage="Enter the Contact Name">

</telerik:RadTextBox>

</td>

<td>

<asp:ImageButton ID="BtnSearch" runat="server" OnClick="BtnSearch_Click" TabIndex="5"

ImageUrl="~/App_Themes/MLightning/Layout/search_btn.png" />

</td>

<td style="padding-left: 5px">

<asp:LinkButton ID="LinkButtonAdvancedSearch" runat="server" Font-Size="Small" OnClick="LinkButtonAdvancedSearch_Click">Advanced Search</asp:LinkButton>

</td>

</tr>

</table>

<asp:Panel ID="PanelAdvancedSearch" runat="server" Visible="false" DefaultButton="ButtonAdvancedSearch">

<table border="0" class="activity" style="padding: 0px; margin: 0px">

<tr>

<th class="activity" style="height: 23px;">

Advanced Search

</th>

</tr>

<tr>

<td align="center" style="padding: 5px">

<div style="border-color: Gray; border: 1px; border-style: solid; padding: 3px; width: 725px">

<table border="0" style="margin-left: auto; margin-right: auto; width: 720px font-family: Tahoma;

font-size: 10pt;">

<tr>

<td style=" text-align: left; color: Black">

<fieldset>

<legend>Find Contacts that contain (primary search) ... </legend>

<table>

<tr>

<td style="text-align: right">

Name:

</td>

<td>

<telerik:RadTextBox ID="RadTextBoxAdvanvedSearchName" Width="120px" runat="server">

</telerik:RadTextBox>

</td>

<td width="15px">

</td>

<td>

Employer:

</td>

<td>

<telerik:RadTextBox ID="RadTextBoxAdvanvedSearchEmployer" Width="120px" runat="server">

</telerik:RadTextBox>

</td>

</tr>

<tr>

<td style="text-align: right">

Greeting:

</td>

<td>

<telerik:RadTextBox ID="RadTextBoxAdvanvedSearchGreeting" Width="120px" runat="server">

</telerik:RadTextBox>

</td>

<td width="15px">

</td>

<td style="text-align: right">

DBA:

</td>

<td>

<telerik:RadTextBox ID="RadTextBoxAdvanvedSearchDBA" Width="120px" runat="server">

</telerik:RadTextBox>

</td>

</tr>

</table>

</fieldset>

</td>

<td colspan="2" width="1px">

</td>

</tr>

<tr>

<td colspan="3" style="text-align: left; padding: 10px">

(Partial entries will yield results, e.g. rich, son)

</td>

</tr>

<tr>

<td colspan="3" style="text-align: center">

<table width="100%" style="text-align: center">

<tr>

<td style="width: 45%; text-align: right">

<asp:Button ID="ButtonAdvancedSearch" runat="server" Text="Search" OnClick="ButtonAdvancedSearch_Click" />

</td>

<td style="width: 10%; text-align: center">

<asp:Button ID="ButtonCancelAdvancedSearch" runat="server" Text="Cancel" CausesValidation="false"

OnClick="ButtonCancelAdvancedSearch_Click" />

</td>

<td style="width: 45%; text-align: left">

<asp:Button ID="ButtonClearAdvancedSearch" runat="server" Text="Clear" CausesValidation="false"

OnClick="ButtonClearAdvancedSearch_Click" />

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

</td>

</tr>

</table>

</asp:Panel>

<table border="0px" style="margin-left: auto; margin-right: auto; text-align: center">

<tr>

<td>

<asp:Label ID="errorLabel" runat="server" Visible="false" Font-Size="Small" ForeColor="#ff3300"></asp:Label> </td>

</tr>

</table>

</div>

<div style="width: 99%; text-align: center;">

<telerik:RadGrid ID="RadGridContact" runat="server" GridLines="Vertical" AllowPaging="true"

OnPreRender="RadGridContact_PreRender" AutoGenerateColumns="False" EnableLinqExpressions="false"

AllowSorting="true" AllowFilteringByColumn="false" AllowCustomPaging="false"

Width="950px" OnNeedDataSource="RadGridContact_NeedDataSource" OnItemDataBound="RadGridContact_ItemDataBound"

OnColumnCreated="RadGridContact_ColumnCreated" OnItemCreated="RadGridContact_ItemCreated"

OnItemCommand="RadGridContact_ItemCommand" PageSize="25" TabIndex="7">

<ExportSettings IgnorePaging="true" OpenInNewWindow="true" ExportOnlyData="false"

FileName="ContactsExport">

<Pdf AllowAdd="false" AllowCopy="true" AllowModify="true" AllowPrinting="true" Author="Anonymous"

Keywords="None" PageBottomMargin="1in" PageLeftMargin="1in" PageRightMargin="1in"

PageTopMargin="1in" PageTitle="Contacts" Subject="Contacts Grid Export" Title="Contacts"

PaperSize="Letter" />

</ExportSettings>

<MasterTableView TableLayout="Fixed" HierarchyDefaultExpanded="true" ClientDataKeyNames="ContactID"

CommandItemDisplay="Top" DataKeyNames="ContactID, Name, Addresses, PreferredAddress, LastName, ContactType"

Name="Contact">

<Columns>

<telerik:GridTemplateColumn HeaderText="ContactID" Visible="false" UniqueName="ContactID"

HeaderStyle-Width="0%">

<ItemTemplate>

<%# Eval("ContactID")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Name" UniqueName="ContactName" HeaderStyle-Width="23%"

FilterControlWidth="140px" DataField="LastName" CurrentFilterFunction="StartsWith"

AutoPostBackOnFilter="true">

<ItemTemplate>

<asp:LinkButton ID="SOLink" runat="server" ForeColor="#73abc9" Font-Size="10pt" Font-Bold="true"

Text='<%# Eval("Name")%>'></asp:LinkButton>

<asp:Label ID="LabelContactName" runat="server" CssClass="label" Visible="false"><%# Eval("Name")%></asp:Label>

<br />

<asp:Label ID="Label2" runat="server" CssClass="label" Visible='<%# !Convert.IsDBNull(Eval("Type")) %>'><br /><b>Type</b>: </asp:Label><%# Eval("Type")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Title/Employer" UniqueName="Employer" HeaderStyle-Width="13%"

CurrentFilterFunction="StartsWith" AutoPostBackOnFilter="true" DataField="Employer">

<ItemTemplate>

<%# Eval("JobTitle")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Phone" UniqueName="Phone" HeaderStyle-Width="20%"

AllowFiltering="false">

<ItemTemplate>

<%# Eval("Phone")%>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<CommandItemTemplate>

<asp:LinkButton ID="LinkButtonExport" runat="server" CommandName="ExportToPdf" CausesValidation="false">

<img style="border:0px;vertical-align:middle;" alt="" src="App_Themes/MLightning/Layout/Reader.gif" />

<span class="printTop" > Export</span></asp:LinkButton>

</CommandItemTemplate>

<PagerStyle Position="TopAndBottom" PrevPageText="Prev" NextPageText="Next" Mode="NextPrev" />

</MasterTableView>

</telerik:RadGrid>

</div>

Grid css

/*Telerik RadGrid Default Skin*/

/*global*/

.RadGrid_MLightning

{

background-position: #F9F9F9;

background: #FFF;

border: 0px !important;

border-collapse: collapse !important;

color: #000;

border-right-width: 0px;

border-bottom-width: 0px;

}

.RadGrid_MLightning,

.RadGrid_MLightning .rgMasterTable,

.RadGrid_MLightning .rgDetailTable,

.RadGrid_MLightning .rgGroupPanel table,

.RadGrid_MLightning .rgCommandRow table,

.RadGrid_MLightning .rgEditForm table,

.RadGrid_MLightning .rgPager table,

.GridToolTip_MLightning

{

font: Tahoma;

border-right: 0px;

border-bottom: 0px;

border-top: 0px;

}

.RadGrid_MLightning .rgAdd,

.RadGrid_MLightning .rgRefresh,

.RadGrid_MLightning .rgEdit,

.RadGrid_MLightning .rgDel,

.RadGrid_MLightning .rgFilter,

.RadGrid_MLightning .rgPagePrev,

.RadGrid_MLightning .rgPageNext,

.RadGrid_MLightning .rgPageFirst,

.RadGrid_MLightning .rgPageLast,

.RadGrid_MLightning .rgExpand,

.RadGrid_MLightning .rgCollapse,

.RadGrid_MLightning .rgSortAsc,

.RadGrid_MLightning .rgSortDesc,

.RadGrid_MLightning .rgUpdate,

.RadGrid_MLightning .rgCancel,

.RadGrid_MLightning .rgUngroup,

.RadGrid_MLightning .rgExpXLS,

.RadGrid_MLightning .rgExpDOC,

.RadGrid_MLightning .rgExpPDF,

.RadGrid_MLightning .rgExpCSV

{

background-image:url('Grid/sprite.gif');

}

/*header*/

.RadGrid_MLightning .rgHeaderDiv

{

background:#ededed 0 -7550px repeat-x url('Grid/sprite.gif');

}

.rgTwoLines .rgHeaderDiv

{

background-position:0 -7050px;

}

.RadGrid_MLightning .rgHeader,

.RadGrid_MLightning th.rgResizeCol

{

border-right: solid 1px #FFFFFF;

background: #003e7e repeat-x 0 100%;

border-bottom: solid 1px #003e7e;

border-top: solid 1px #003e7e;

height: 16px;

color: #ffffff;

font-family:Tahoma;

padding : 0px 5px 0px 5px;

}

.RadGrid_MLightning th.rgSorted

{

background-color:#c4c4c4;

background-position:0 -2600px;

}

.RadGrid_MLightning .rgHeader,

.RadGrid_MLightning .rgHeader a

{

color: #ffffff;

text-decoration: none;

}

/*rows*/

.RadGrid_MLightning .rgRow td,

.RadGrid_MLightning .rgAltRow td,

.RadGrid_MLightning .rgEditRow td,

.RadGrid_MLightning .rgFooter td

{

border-style:solid;

border-width: 0 0 1px 0;

border-right-width : 1px;

border-color: #828282;

}

.RadGrid_MLightning .rgRow td

{

border-color:#ffffff;

padding : 0 0 5px 0;

}

.RadGrid_MLightning .rgSelectedRow .rgSorted,

.RadGrid_MLightning .rgActiveRow .rgSorted,

.RadGrid_MLightning .rgHoveredRow .rgSorted,

.RadGrid_MLightning .rgEditRow .rgSorted

{

background-color:transparent;

}

.RadGrid_MLightning .rgRow a,

.RadGrid_MLightning .rgAltRow a,

.RadGrid_MLightning .rgEditRow a,

.RadGrid_MLightning tr.rgEditRow a,

.RadGrid_MLightning tr.rgHoveredRow a,

.RadGrid_MLightning tr.rgActiveRow a,

.RadGrid_MLightning .rgFooter a,

.RadGrid_MLightning .rgEditForm a

{

color:#000000;

}

.RadGrid_MLightning .rgEditForm td

{

color:#000;

font-family: Tahoma;

font-size: 9pt;

}

.RadGrid_MLightning .rgSelectedRow

{

background:#828282 0 -3900px repeat-x url('Grid/sprite.gif');

color:#ffffff;

}

*+html .RadGrid_MLightning .rgSelectedRow .rgSorted{background-color:#828282}

* html .RadGrid_MLightning .rgSelectedRow .rgSorted{background-color:#828282}

.RadGrid_MLightning .rgSelectedRow a

{

color:#ffffff;

}

.RadGrid_MLightning .rgActiveRow,

.RadGrid_MLightning .rgHoveredRow

{

background:#c4c4c4 0 -2900px repeat-x url('Grid/sprite.gif');

color:#333333;

}

*+html .RadGrid_MLightning .rgActiveRow .rgSorted,

*+html .RadGrid_MLightning .rgHoveredRow .rgSorted{background-color:#c4c4c4}

* html .RadGrid_MLightning .rgActiveRow .rgSorted,

* html .RadGrid_MLightning .rgHoveredRow .rgSorted{background-color:#c4c4c4}

.RadGrid_MLightning .rgEditRow

{

background:#ffffff 0 -4900px repeat-x url('Grid/sprite.gif');

white-space: normal;

text-align: center;

color: #898a8c;

font-family: Tahoma;

font-size: 8pt;

padding: 10px 0px 10px 0px;

border: solid 1px #C4C4C4;

}

*+html .RadGrid_MLightning .rgEditRow .rgSorted{background-color:#ffffff}

* html .RadGrid_MLightning .rgEditRow .rgSorted{background-color:#ffffff}

.RadGrid_MLightning .rgActiveRow td,

.RadGrid_MLightning .rgActiveRow td.rgSorted,

.RadGrid_MLightning .rgHoveredRow td,

.RadGrid_MLightning .rgHoveredRow td.rgSorted

{

border-bottom-color:#9e9e9e;

}

.RadGrid_MLightning .rgSelectedRow td,

.RadGrid_MLightning .rgSelectedRow td.rgSorted

{

border-bottom-color:#6b6b6b;

}

/*footer*/

.RadGrid_MLightning .rgFooterDiv,

.RadGrid_MLightning .rgFooter

{

background:#ededed;

}

.RadGrid_MLightning .rgFooter td

{

border-top:1px solid #828282;

border-bottom:1px solid #ffffff;

}

/*status*/

.RadGrid_MLightning .rgPager .rgStatus

{

border:1px solid;

border-color:#828282 #c9c9c9 #ededed #c9c9c9;

border-left:0;

}

.RadGrid_MLightning .rgStatus div

{

background-image:url('Common/loading_small.gif');

}

/*pager*/

.RadGrid_MLightning .rgPager

{

background:#ededed;

}

.RadGrid_MLightning td.rgPagerCell

{

border:1px solid;

border-color:#828282 #ededed #ededed;

border-right:0;

}

.RadGrid_MLightning .rgInfoPart

{

color:#ffffff;

}

.RadGrid_MLightning .rgInfoPart strong

{

color:#ffffff;

}

.RadGrid_MLightning .rgPageFirst

{

background-position:0 -550px;

}

.RadGrid_MLightning .rgPageFirst:hover

{

background-position:0 -600px;

}

.RadGrid_MLightning .rgPagePrev

{

background-position:0 -700px;

}

.RadGrid_MLightning .rgPagePrev:hover

{

background-position:0 -750px;

}

.RadGrid_MLightning .rgPageNext

{

background-position:0 -850px;

}

.RadGrid_MLightning .rgPageNext:hover

{

background-position:0 -900px;

}

.RadGrid_MLightning .rgPageLast

{

background-position:0 -1000px;

}

.RadGrid_MLightning .rgPageLast:hover

{

background-position:0 -1050px;

}

.RadGrid_MLightning .rgPager .rgPagerButton

{

border-color:#d1d1d1 #adadad #8c8c8c;

background:#e8e8e8 repeat-x 0 -1550px url('Grid/sprite.gif');

color:#000000;

font-family:"segoe ui",arial,sans-serif;

}

.RadGrid_MLightning .rgNumPart a:hover,

.RadGrid_MLightning .rgNumPart a:hover span,

.RadGrid_MLightning .rgNumPart a.rgCurrentPage,

.RadGrid_MLightning .rgNumPart a.rgCurrentPage span

{

background:no-repeat url('Grid/sprite.gif');

}

.RadGrid_MLightning .rgNumPart a

{

color:#000000;

}

.RadGrid_MLightning .rgNumPart a:hover

{

background-position:100% -1250px;

}

.RadGrid_MLightning .rgNumPart a:hover span

{

background-position:0 -1150px;

}

.RadGrid_MLightning .rgNumPart a.rgCurrentPage,

.RadGrid_MLightning .rgNumPart a.rgCurrentPage:hover

{

background-position:100% -1450px;

}

.RadGrid_MLightning .rgNumPart a.rgCurrentPage span,

.RadGrid_MLightning .rgNumPart a.rgCurrentPage:hover span

{

background-position:0 -1350px;

}

/*sorting, reordering*/

.RadGrid_MLightning .rgHeader .rgSortAsc

{

background-position:3px -248px;

height:10px;

}

.RadGrid_MLightning .rgHeader .rgSortDesc

{

background-position:3px -198px;

height:10px;

}

.GridReorderTop_MLightning,

.GridReorderBottom_MLightning

{

background:0 0 no-repeat url('Grid/sprite.gif');

}

.GridReorderBottom_MLightning

{

background-position:0 -50px;

}

/*filtering*/

.RadGrid_MLightning .rgFilterRow

{

background:#ededed;

}

.RadGrid_MLightning .rgFilterRow td

{

border-bottom:1px solid #828282;

}

.RadGrid_MLightning .rgFilter

{

background-position:0 -300px;

}

.RadGrid_MLightning .rgFilter:hover

{

background-position:0 -350px;

}

.RadGrid_MLightning .rgFilterActive,

.RadGrid_MLightning .rgFilterActive:hover

{

background-position:0 -400px;

}

.RadGrid_MLightning .rgFilterBox

{

border-color:#8f8f8f #c9c9c9 #c9c9c9 #8f8f8f;

font-family:"segoe ui",arial,sans-serif;

color:#333333;

}

/*filter context menu*/

.RadMenu_MLightning .rgHCMClear,

.RadMenu_MLightning .rgHCMFilter

{

border-color:#d1d1d1 #a8a8a8 #8c8c8c;

background:#e8e8e8 center -23px repeat-x url('FormDecorator/ButtonSprites.gif');

color:#000000;

font-family:"segoe ui",arial,sans-serif;

}

.RadMenu_MLightning .rgHCMClear:hover,

.RadMenu_MLightning .rgHCMFilter:hover

{

border-color:#d1d1d1 #bababa #a3a3a3;

background-position:center -67px;

background-color:#e6e6e6;

}

/*grouping*/

.RadGrid_MLightning .rgGroupPanel

{

background-color: #e8e8e8;

width: 100%;

border-collapse: collapse;

border-bottom: 1px solid #b1b1b1;

}

.RadGrid_MLightning .rgGroupPanel td

{

padding: 2px 4px;

}

.RadGrid_MLightning .rgGroupPanel td td

{

padding:0;

}

.RadGrid_MLightning .rgGroupPanel .rgSortAsc

{

background-position:4px -144px;

}

.RadGrid_MLightning .rgGroupPanel .rgSortDesc

{

background-position:4px -94px;

}

.RadGrid_MLightning .rgUngroup

{

background-position:0 -6998px;

}

.RadGrid_MLightning .rgGroupItem

{

background: #efefef;

color: #999999;

border: solid 1px white;

border-right: solid 1px #c6c6c6;

border-bottom: solid 1px #c6c6c6;

white-space: nowrap;

font-size: 10px;

}

.RadGrid_MLightning .rgMasterTable td.rgGroupCol,

.RadGrid_MLightning .rgMasterTable td.rgExpandCol

{

border-color:#d9d9d9;

}

.RadGrid_MLightning .rgGroupHeader

{

height:15px;

}

.RadGrid_MLightning .rgGroupHeader td

{

border-left:0px solid #fff;

border-right:0;

border-bottom: solid 1px #c2c2c2;

font-family: Tahoma;

font-size: 10pt;

vertical-align: text-bottom !important;

}

.RadGrid_MLightning .rgGroupHeader td.rgGroupCol

{

border-top-color:#828282;

}

.RadGrid_MLightning .rgExpand

{

background-position:5px -496px;

}

.RadGrid_MLightning .rgCollapse

{

background-position:3px -444px;

}

/*editing*/

.RadGrid_MLightning .rgEditForm

{

border-bottom:1px solid #828282;

}

.RadGrid_MLightning .rgUpdate

{

background-position:0 -1800px;

}

.RadGrid_MLightning .rgCancel

{

background-position:0 -1850px;

}

/*hierarchy*/

.RadGrid_MLightning .rgDetailTable

{

border-color:#828282;

}

/*command row*/

.RadGrid_MLightning .rgCommandRow

{

background: #a7a7a9;

color: #ffffff;

}

.RadGrid_MLightning .rgCommandCell

{

background: #a7a7a9;

border: solid 1px #c7c7c7;

color: #ffffff;

height: 16px;

padding-top: 1px;

padding-bottom: 1px;

font-family: Tahoma;

font-size: 9pt;

text-align:right;

}

.RadGrid_MLightning tfoot .rgCommandCell

{

border-top:1px solid;

border-bottom:0;

}

.RadGrid_MLightning .rgCommandTable td

{

border:0;

padding:2px 7px;

}

.RadGrid_MLightning .rgCommandTable

{

border:0;

border-top:1px solid #fcfcfc;

border-bottom:1px solid #e8e8e8;

}

.RadGrid_MLightning .rgCommandRow a

{

color:#000000;

text-decoration:none;

}

.RadGrid_MLightning .rgAdd

{

margin-right:3px;

background-position:0 -1650px;

}

.RadGrid_MLightning .rgRefresh

{

margin-right:3px;

background-position:0 -1600px;

}

.RadGrid_MLightning .rgEdit

{

background-position:0 -1700px;

}

.RadGrid_MLightning .rgDel

{

background-position:0 -1750px;

}

.RadGrid_MLightning .rgSelected .rgDel

{

background-position:0 -1775px;

}

.RadGrid_MLightning .rgExpXLS,

.RadGrid_MLightning .rgExpDOC,

.RadGrid_MLightning .rgExpPDF,

.RadGrid_MLightning .rgExpCSV

{

background-image:url('Grid/export.gif');

}

.RadGrid_MLightning .rgExpXLS

{

background-position:0 0;

}

.RadGrid_MLightning .rgExpDOC

{

background-position:0 -50px;

}

.RadGrid_MLightning .rgExpPDF

{

background-position:0 -100px;

}

.RadGrid_MLightning .rgExpCSV

{

background-position:0 -150px;

}

/*multirow select*/

.GridRowSelector_MLightning

{

background:#545454;

}

/*row drag n drop*/

.GridItemDropIndicator_MLightning

{

border-top:1px dashed #666666;

}

/*tooltip*/

.GridToolTip_MLightning

{

border:1px solid #828282;

padding:3px;

background:#ffffff;

color:#333333;

}

/*rtl*/

.RadGridRTL_MLightning .rgPageFirst

{

background-position:0 -1000px;

}

.RadGridRTL_MLightning .rgPageFirst:hover

{

background-position:0 -1050px;

}

.RadGridRTL_MLightning .rgPagePrev

{

background-position:0 -850px;

}

.RadGridRTL_MLightning .rgPagePrev:hover

{

background-position:0 -900px;

}

.RadGridRTL_MLightning .rgPageNext

{

background-position:0 -700px;

}

.RadGridRTL_MLightning .rgPageNext:hover

{

background-position:0 -750px;

}

.RadGridRTL_MLightning .rgPageLast

{

background-position:0 -550px;

}

.RadGridRTL_MLightning .rgPageLast:hover

{

background-position:0 -600px;

}

DIV.RadGrid_MLightning TH.rgResizeCol {

BACKGROUND-COLOR: #003E7E;

}

DIV.RadGrid_MLightning .rgHeader {

BACKGROUND-COLOR: #003E7E;

}

DIV.RadGrid_MLightning .rgCommandRow {

BACKGROUND-IMAGE: none;

BACKGROUND-COLOR: #A7A7A9;

}

DIV.RadGrid_MLightning .rgCommandCell {

FONT-FAMILY: Tahoma;

COLOR: #FFFFFF;

}

DIV.RadGrid_MLightning TH.rgResizeCol {

BACKGROUND-IMAGE: none;

BORDER-TOP-COLOR: #00A1D6;

}

DIV.RadGrid_MLightning .rgHeader {

border-right: solid 1px #FFFFFF;

border-bottom: solid 1px #003e7e;

border-top: solid 1px #003e7e;

background: #003e7e;

font: bold 10pt Tahoma;

color: #ffffff;

height: 16px;

vertical-align:middle;

}

DIV.RadGrid_MLightning .rgHeader A {

color: #ffffff;

text-decoration: none;

font: bold 11px Verdana, Arial, Sans-serif;

}

DIV.RadGrid_MLightning .rgRow TD,

DIV.RadGrid_MLightning .rgAltRow TD,

DIV.RadGrid_MLightning .rgSelectedRow TD,

DIV.RadGrid_MLightning .rgActiveRow TD,

DIV.RadGrid_MLightning .rgEditRow TD

{

padding-top:2px;

padding-bottom:2px;

}

DIV.RadGrid_MLightning .rgFilterRow TD {

FONT-FAMILY: Tahoma;

}

DIV.RadGrid_MLightning .rgRow TD A,

DIV.RadGrid_MLightning .rgAltRow TD A {

color: #73abc9;

font-family:Tahoma;

font-size:8pt;

}

DIV.RadGrid_MLightning .rgRow TD,

DIV.RadGrid_MLightning .rgAltRow TD {

BACKGROUND-COLOR: #FFFFFF;

white-space: normal;

text-align: center;

color: #898a8c;

font-family: Tahoma;

font-size: 8pt;

padding: 10px 0px 10px 0px;

border: solid 1px #C4C4C4;

}

DIV.RadGrid_MLightning .rgRow TD DIV,

DIV.RadGrid_MLightning .rgAltRow TD DIV{

padding-left: 5px ;

}

DIV.RadGrid_MLightning .rgRow,

DIV.RadGrid_MLightning .rgAltRow {

COLOR: #898A8C;

background: #ffffff;

}

DIV.RadGrid_MLightning TR.rgSelectedRow {

BACKGROUND-COLOR: #707070;

}

DIV.RadGrid_MLightning TABLE .rgActiveRow {

BACKGROUND-COLOR: #EDF2D9;

}

DIV.RadGrid_MLightning TABLE TR.rgHoveredRow {

BACKGROUND-COLOR: #FFFFFF;

}

DIV.RadGrid_MLightning .rgPager {

BACKGROUND-COLOR: #898A8C;

border-right: 0;

color: #999;

}

DIV.RadGrid_MLightning .rgPager .rgPagerCell {

COLOR: #FFFFFF;

font-family: Tahoma;

border: 1px solid #c7c7c7;

height: 14px;

padding-top: 1px;

padding-bottom: 1px;

font-family: Tahoma;

font-size: 8pt;

}

DIV.RadGrid_MLightning .rgPager .rgPagerCell A{

FONT-FAMILY: Tahoma;

COLOR: #FFFFFF;

padding-left : 5px;

padding-right : 5px;

}

DIV.RadGrid_MLightning {

PADDING-BOTTOM: 5px;

MARGIN-TOP: 0px;

}

DIV.RadGrid_MLightning TH.rgResizeCol {

BORDER-LEFT-COLOR: transparent;

}

DIV.RadGrid_MLightning .rgHeader {

BORDER-LEFT-COLOR: transparent;

}

DIV.RadGrid_MLightning .rgFilterRow TD {

BORDER-BOTTOM: transparent 0px solid;

BORDER-LEFT: #FFFFFF 1px solid;

PADDING-BOTTOM: 0px;

BACKGROUND-COLOR: #8FBCD1;

BORDER-TOP-COLOR: transparent;

PADDING-LEFT: 0px;

PADDING-RIGHT: 0px;

BORDER-RIGHT-COLOR: transparent;

PADDING-TOP: 0px;

}

DIV.RadGrid_MLightning .rgSelectedRow TD {

PADDING-BOTTOM: 2px;

PADDING-TOP: 2px;

}

DIV.RadGrid_MLightning .rgFooter {

COLOR: #FFFFFF;

}

DIV.RadGrid_MLightning .rgPager {

COLOR: #FFFFFF;

}

DIV.RadGrid_MLightning .rgFooter TD {

BACKGROUND-COLOR: #8FBCD1;

}

Additional css on page:

body

{

background-color: #ffffff;

font-family: Tahoma;

font-size: medium;

margin: 0px;

text-align: center;

}

.RadGrid table

{

margin: 0;

}

/*td {

border: #999999 solid thin;

outline: black solid thin;

padding: 6px 6px 6px 6px;

}

th

{

padding: 5px;

outline: black solid thin;

}*/

.RadGrid td

{

padding: 0px 0px 3px 0px;

border-collapse: collapse !important;

}

.RadGrid .rgGroupHeader td

{

padding-top: 12px !important;

padding-bottom: 1px !important;

}

th.inner

{

font-size: 11px;

border-right-color: #c0c0c0;

border-left-color: #c0c0c0;

}

.linkButton

{

color: #73abc9;

font-size: 10pt;

font-family: Tahoma;

}

.label

{

color: #898a8c;

font-size: 8pt;

font-family: Tahoma;

}

.rgGroupCol

{

padding-left: 3px !important;

padding-right: 3px !important;

}

Grid

answered on 10 Nov 2010