Questions on UI for ASP.NET AJAX Forum

15 answers

1.8K+ views

Hi,
I'm using the RadGrid from prometheus Q3 2007. What I want to do is to add a row in the header of the grid to group the colomuns. Exemple:

<table>
<tr>
<td colspan="2">group1</td>
<td colspan="2">group2</td>
</tr>
... Followed by the standart header, assuming that my grid has 4 columns...

I'm creating my grid programmatically and adding it to a placeholder like the exemple showed here in the section "Creating ItemTemplate/EditItemTemplate of GridTemplateColumn programmatically".

I' using visual studio 2008, framework 3.5.

Iv'e looked at http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/GroupB but this is just for grouping. All I want to do is just add a customer header that show two or more column headers grouped togeather. I don't need to group any data.

Thanks,
Michael

Grid

answered on 18 May 2011

4 answers

161 views

RadTabStrip with UserControls within FormTemplate.

I have a RadGrid that has within it a RadTabStrip (which is within the FormTemplate of the EditFormSettings). For each tab, I have a user control that contains the fields I want the user to interact with. These user controls have (Microsoft) ListBox and DropDownList controls and bind themselves to their own data to populate each of these controls with the possible values and this all works fine. The RadGrid properly populates the textbox values of the tab when the user clicks Edit (GridEditColumn) using values from the database. However, I need to update the RadTab's user control DropDownList/ListBox with the selections from the database, but how do I access the User Control (or these child controls) within the RadTab? I can't seem to catch any of the RadTabStrip events to do this (I'm guessing that these aren't being bubbled up to the grid's level?) and I haven't been able to use FindControl to locate the friendly control names (I know I could use ugly names like ctl00_ctl14_ctl00, but this is way too brittle :) ).

The user control within each RadTab does all it's databinding events first, so all the controls are loaded with data. I'm thinking the DataBound event for the Grid is the right place to start, since this is the last visible event I've found after clicking Edit (before the RadTab is rendered -- other than perhaps PreRender, but then I have to walk the UI control tree).

Am I nesting things too deep here? Is there any easier/better way to approach this? Basically, I'm trying to have a RadTabStrip for editing a grid row's (detailed) data (not just the fields I show in the row). I don't think the updating will be an issue (updating already works for propagating textbox/checkbox values to the database), since I have access to the control tree through the ItemCommand event handler for the Update event.

Here's the markup snippet:

<%@ Register Src="~/Views/UserControls/AccountInfo.ascx" TagName="AccountInfo"

TagPrefix="dd" %>

<%@ Register Src="~/Views/UserControls/AddressInfo.ascx" TagName="AddressInfo" TagPrefix="dd" %>

<%@ Register Src="~/Views/UserControls/RoleInfo.ascx" TagName="RoleInfo" TagPrefix="dd" %>

<telerik:RadGrid ID="GridUser" AllowSorting="True" PageSize="10" AutoGenerateColumns="false"

ItemStyle-Font-Size="11px" AlternatingItemStyle-Font-Size="11px" AllowPaging="True"

AllowFilteringByColumn="true" PagerStyle-AlwaysVisible="true" AllowMultiRowSelection="False"

runat="server" Width="700px" Skin="Office2007" HeaderStyle-CssClass="RadGridHeader"

DataSourceID="MasterDataSource" ShowGroupPanel="true"

AllowAutomaticInserts="True" AllowAutomaticUpdates="True">

<MasterTableView Name="GridUserView" DataSourceID="MasterDataSource" DataKeyNames="ID" Width="100%"

Summary="RadGrid table" CommandItemDisplay="Top">

<Columns>

<telerik:GridEditCommandColumn UniqueName="GridEditAccountInfo">

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="FirstName" AllowSorting="true" Visible="true"

HeaderText="First Name">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LastName" AllowSorting="true" Visible="true"

HeaderText="Last Name">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="UserName" AllowSorting="true" Visible="true"

HeaderText="User Name">

</telerik:GridBoundColumn>

</Columns>

<EditFormSettings EditFormType="Template">

<FormTemplate>

<telerik:RadTabStrip ID="userTabStrip" runat="server" SelectedIndex="0" MultiPageID="UserMultiPage1" >

<Tabs>

<telerik:RadTab runat="server" Text="Account Info" PageViewID="AccountInfoPageView">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Address Info" PageViewID="AddressInfoPageView">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Roles" PageViewID="RolesPageView">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="UserMultiPage1" SelectedIndex="0" RenderSelectedPageOnly="false">

<telerik:RadPageView runat="server" ID="AccountInfoPageView">

<asp:Label ID="lblUserName" Font-Bold="true" Font-Italic="true" Text='<%# Eval("Username") %>'

Visible="false" runat="server" />

<dd:AccountInfo runat="server" ID="EditAccountInfo" />

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="AddressInfoPageView">

<dd:AddressInfo runat="server" ID="EditAddressInfo" />

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="RolesPageView">

<dd:RoleInfo runat="server" ID="EditRoleInfo" />

</telerik:RadPageView>

</telerik:RadMultiPage>

<br />

<asp:Button ID="btnUpdate" runat="server" Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Insert", "Update") %>'

CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Insert", "Update")%>' TabIndex="40"  CausesValidation="False" />

<asp:Button ID="btnCancel" runat="server" Text="Cancel" TabIndex="41" />

</FormTemplate>

</EditFormSettings>

</MasterTableView>

<HeaderStyle CssClass="RadGridHeader"></HeaderStyle>

<ClientSettings EnableRowHoverStyle="true">

<Selecting AllowRowSelect="True" />

</ClientSettings>

<SelectedItemStyle BorderColor="Yellow" BorderWidth="2px" BackColor="Yellow" Font-Bold="true" />

<AlternatingItemStyle Font-Size="11px"></AlternatingItemStyle>

<ItemStyle Font-Size="11px"></ItemStyle>

<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

</telerik:RadGrid>

Any and all help appreciated!

Jon

Grid

answered on 18 May 2011

4 answers

794 views

Displaying RadEditor without a toolbar and readonly with scrolling enabled

I am using a RadEditor control to display some HTML formatted text. The text is readonly (cannot be edited). I don't want any toolbars to display.

I am setting Enabled="false" which prevents the toolbar display but it also disables the scrollbars which I need.

Any suggestions on how to use RadEditor with no toolbars and in a readonly format with scrolling enabled?

Thanks

Editor

answered on 18 May 2011

1 answer

78 views

UserControl with grid inside nodetemplate problem

Hello

In this post : http://www.telerik.com/community/forums/aspnet-ajax/treeview/how-to-handle-node-templates-with-load-on-demand.aspx
i've asked support about how to put togheter load on demand and treeview nodes templates, and the following post has given me hints on how to add gridviews into node templates at runtimes :
http://www.telerik.com/community/forums/aspnet-ajax/treeview/adding-the-radgrid-in-the-nodetemplate-dynamically.aspx.
Now i've got a tree with the following structure :
year 1
    |_ first quarter
            |_ department (uses load on demand , server side)
                |_code (uses load on demand , server side)
                    |_template Node : contains an asp.net userControl with a radgrid
    |_ second quarter ...
year 2 ...

All nodes are added programmatically, and the department and code subnodes load their children on demand. Now i need the template node to contains some richer controls to display more than a string , so i've chosen a radgrid.

The radgrid rows should contain also a link button to allow the user to edit the selected record (not inline but redirecting to an appropriate page ).
I've put the grid into a usercontrol and bound it to an objectdatasource, hoping it avoided me to define all the grid properties programmatically, but i can't achieve it , instead if i set the datasource programmaticaly to one of my businness object (which returns a datatable ) it gets instantiated, but i haven't sorting, paging etc.
the second problem happens when i open any of the load on demand nodes : if i had preaviuosly opened another load on demand node , its template node (the grid) gets resetted to an empty node.

Below i've added the code of the page that uses the custom control with grid and the custom control itsself :

1. load on demand expand method

protected void RTVIndagini_NodeExpand(object sender, RadTreeNodeEventArgs e)

{

//if (e.Node.Nodes.Count != 0) return;

switch (e.Node.Category)

{

case "trimestre":

{

decimal anno = int.Parse(e.Node.ParentNode.Value);

decimal trimestre = int.Parse(e.Node.Value);

IndagineModel im = new IndagineModel();

IDictionary<decimal, String> enti = im.getEnti(anno, trimestre);

foreach (decimal key in enti.Keys)

{

RadTreeNode nodoEnte = new RadTreeNode(enti[key], key.ToString());

nodoEnte.Category = "ente";

nodoEnte.ExpandMode = TreeNodeExpandMode.ServerSide;

e.Node.Nodes.Add(nodoEnte);

}

break;

}

case "ente":

{

Decimal ente = Decimal.Parse(e.Node.Value);

RadTreeNode trimestre = e.Node.ParentNode;

Decimal trimestreValue = Decimal.Parse(trimestre.Value);

Decimal anno = Decimal.Parse(trimestre.ParentNode.Value);

IndagineModel im = new IndagineModel();

IDictionary<String,String> codiciReclamo = im.getCodiciReclamo(anno, trimestreValue, ente);

foreach (String key in codiciReclamo.Keys )

{

RadTreeNode nodoCodiceReclamo = new RadTreeNode(

String.Format("{0} - {1}", key, codiciReclamo[key]), key);

nodoCodiceReclamo.Category = "codicereclamo";

nodoCodiceReclamo.ExpandMode = TreeNodeExpandMode.ServerSide;

e.Node.Nodes.Add(nodoCodiceReclamo);

}

break;

}

case "codicereclamo":

{

DatiPratiche dto = new DatiPratiche();

dto.reclamo = e.Node.Value;

RadTreeNode ente = e.Node.ParentNode;

dto.ente = decimal.Parse(e.Node.ParentNode.Value);

RadTreeNode trimestre = ente.ParentNode;

dto.trimestre = decimal.Parse(trimestre.Value);

dto.anno = decimal.Parse(trimestre.ParentNode.Value);

//TestNodeTempateOnDemand tst = new TestNodeTempateOnDemand();

customControls_Indagine_NodeTemplate tst = new customControls_Indagine_NodeTemplate();

RadTreeNode temp = new RadTreeNode();

tst.InstantiateIn(temp);

e.Node.Nodes.Add(temp);

RTVIndagini.DataBind();

}

break;

}

//e.Node.Expanded = true;

e.Node.ExpandMode = TreeNodeExpandMode.ClientSide;

//RTVIndagini.DataBind();

}

2. custom control node template html

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="NodeTemplate.ascx.cs" Inherits="customControls_Indagine_NodeTemplate" %>

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="ObjectDataSource1"

GridLines="None" Skin="Web20" onitemdatabound="RadGrid1_ItemDataBound"

AllowPaging="True" AllowSorting="True">

<MasterTableView DataSourceID="ObjectDataSource1" AutoGenerateColumns="False"

DataKeyNames="C_COD_REC">

<RowIndicatorColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn>

<HeaderStyle Width="20px"></HeaderStyle>

</ExpandCollapseColumn>

<Columns>

<telerik:GridBoundColumn DataField="C_COD_REC" HeaderText="C_COD_REC"

ReadOnly="True" SortExpression="C_COD_REC" UniqueName="C_COD_REC">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="C_MAC_ARE" HeaderText="C_MAC_ARE"

SortExpression="C_MAC_ARE" UniqueName="C_MAC_ARE">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="C_ARE" HeaderText="C_ARE"

SortExpression="C_ARE" UniqueName="C_ARE">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="C_DET" HeaderText="C_DET"

SortExpression="C_DET" UniqueName="C_DET">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="T_RIF_TAB" DataType="System.Decimal"

HeaderText="T_RIF_TAB" SortExpression="T_RIF_TAB" UniqueName="T_RIF_TAB">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="C_MOD" HeaderText="C_MOD"

SortExpression="C_MOD" UniqueName="C_MOD">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"

DeleteMethod="delete" InsertMethod="insert"

OldValuesParameterFormatString="original_{0}" SelectMethod="getDatiCodice"

TypeName="CodiceReclamo" UpdateMethod="update">

<DeleteParameters>

<asp:Parameter Name="Original_C_COD_REC" Type="String" />

<asp:Parameter Name="Original_C_MAC_ARE" Type="String" />

<asp:Parameter Name="Original_C_ARE" Type="String" />

<asp:Parameter Name="Original_C_DET" Type="String" />

</DeleteParameters>

<UpdateParameters>

<asp:Parameter Name="T_RIF_TAB" Type="Decimal" />

<asp:Parameter Name="Original_C_COD_REC" Type="String" />

<asp:Parameter Name="Original_C_MAC_ARE" Type="String" />

<asp:Parameter Name="Original_C_ARE" Type="String" />

<asp:Parameter Name="C_MOD" Type="String" />

<asp:Parameter Name="Original_C_DET" Type="String" />

</UpdateParameters>

<InsertParameters>

<asp:Parameter Name="C_COD_REC" Type="String" />

<asp:Parameter Name="C_MAC_ARE" Type="String" />

<asp:Parameter Name="C_ARE" Type="String" />

<asp:Parameter Name="C_DET" Type="String" />

<asp:Parameter Name="T_RIF_TAB" Type="Decimal" />

<asp:Parameter Name="C_MOD" Type="String" />

</InsertParameters>

</asp:ObjectDataSource>

3. custom control template node code behind:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

public partial class customControls_Indagine_NodeTemplate : System.Web.UI.UserControl,ITemplate

{

protected void Page_Load(object sender, EventArgs e)

{

}

#region ITemplate Members

public void InstantiateIn(Control container)

{

RadGrid RadGrid1 = new RadGrid();

RadGrid1.DataBinding += new EventHandler(RadGrid_DataBinding);

container.Controls.Add(RadGrid1);

}

void RadGrid_DataBinding(object sender, EventArgs e)

{

// I must add the following line of code to see the grid displayed

//inside the tree node, but i don't have any paging, sorting ...

//RadGrid target = (RadGrid)sender;

//RadTreeNode node = (RadTreeNode)target.BindingContainer;

//EnteModello em = new EnteModello();

//target.DataSource = em.getModelliPerEnte();

}

#endregion

protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)

{

}

thank you in advance for your support

TreeView

answered on 18 May 2011

6 answers

232 views

Two RadDatePickers

Hi Telerik,

    I am having 2 raddatepickers. When I am done with setting the date of the first date picker, the second datepicker must display a date 14 days lesser than the selected date of raddatepicker1. Also, I must be able to edit the RaddatePicker2

    I would like to do this in javascript.

    Thanks for your help.

Regards,
Raj

Calendar

answered on 18 May 2011

2 answers

219 views

RadMenu GroupSetting

Hi.
I have a problem with my radmenu 2009.
when i set a DefaultGroupSetting for my menu, for exmaple :

<

telerik:RadMenu ID="FarsiMenu" Runat="server" DataFieldParentID="MenuParentID" dir="rtl"

DataNavigateUrlField="AdminValue" DataSourceID="sdsMenuBuilder"

DataTextField="MenuText" DataValueField="Value" DataFieldID="MenuID" Width="650px"

onprerender="FarsiMenu_PreRender"

style="position:absolute;right:40px;" EnableOverlay="False" AutoScrollMinimumHeight="100" EnableAutoScroll="True">

</telerik:RadMenu>

When my submenu items height is less thatn 200px, the submenu window is 200px with some empty space.
how can i solbe this problem?
i want when my items heght is less than 200px, the submenu window height be fit to these items.

Thank u all.

Menu

answered on 18 May 2011

1 answer

42 views

What chart type support Empty Value option ?

Hi,

In case, we use the Empty value option, RadChart has supported for Area, Bar, Pie, Buble, Point, Line, SpLine, StackedArea, StackedArea100 chart-type, except for StackedBar and StackedBar100. It's work-as-design of RadChart, isn't it?

Thanks / Phong Dang.

Chart (Obsolete)

answered on 18 May 2011

3 answers

204 views

HTML markup validation for Rad Editor

Hi,

We are using Teleric Rad Editor for contnet areas in SHarePoint 2007.

While editing Rad Editpr HTML content, if the HTML markup is not properly formed, the editor doesnt give any messages for malformed HTML markup.

We are planning to use a custom button there to validate the HTML and specify the errors if any. This button internally will call a web service or use some tool on the server, pass the HTML content to it and shows the errors/messages if any returned from the service/tool.

Is there any add-on or something Telerik provides for Rad Editor for HTML markup validation?

If not, can you please suggest us some tool/web service which we can use with Rad Editor? For some security reasons we do not want to use validator.w3c.org web service. Please suggest us some other web service or tool which suites rad editor more. Also it would be great help if you can tell us what steps we can follow to achieve this customization.

Regards,
Mahavir

WebParts for SharePoint

answered on 18 May 2011

1 answer

128 views

Drag and drop functionality between Radgrid and RadTreeview

When I drag and drop a selected row from ASP.NET Ajax (Telerik.web.ui) Radgrid (inside a usercontrol) to a RadTreeview node (inside a usercontrol),

I am able to capture the Datakeyitem of the Radgrid on the RowDrop serverside event of the Radgrid, like

Private Sub grdEquipments_RowDrop(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridDragDropEventArgs) Handles grdEquipments.RowDrop

Dim dataItem As GridDataItem = e.DraggedItems(0)

Dim s As String = dataItem.OwnerTableView().Items(dataItem.ItemIndex).GetDataKeyValue("ID")

End Sub

But I am not able to get the refrence to the Treeview Node on which the Item is being dropped.
Do you have any sample projects where you have this functinality.

please note that these two controls are in separate usercontrols.

Thanks
Madhu Rao

Grid

answered on 18 May 2011

3 answers

124 views

context menu not properly working

Hi sir,
context menu not disappearing after select an option from the menu, also context menu is not working in firefox, the sample code is shown below, please help me
.aspx page
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!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>Untitled Page</title>
<telerik:RadScriptBlock>
    <script language="javascript" type="text/javascript">
        function ClientContextMenuItemClicking(sender, eventArgs)
        {
            var node = eventArgs.get_node();
            var item = eventArgs.get_menuItem();

            if (item.get_text() == "Add Category")
            {
                document.getElementById("uxAddCategoryTextBox").value="";
                document.getElementById("uxAddCategorypanel").style.display="";
                document.getElementById("uxEditCategorypanel").style.display="none";
                document.getElementById("uxDeleteCategorypanel").style.display="none";
            }
            else if (item.get_text() == "Edit Category")
            {
                document.getElementById("uxEditCategoryTextBox").value=node.get_text();
                document.getElementById("uxAddCategorypanel").style.display="none";
                document.getElementById("uxEditCategorypanel").style.display="";
                document.getElementById("uxDeleteCategorypanel").style.display="none";
            }
            else if (item.get_text() == "Delete Category")
            {
                document.getElementById("uxAddCategorypanel").style.display="none";
                document.getElementById("uxEditCategorypanel").style.display="none";
                document.getElementById("uxDeleteCategorypanel").style.display="";
            }
        }
    </script>
    </telerik:RadScriptBlock>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>

<table width="820px" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="2" style="padding-top:10px;">
            <h3 class="ms-standardheader ms-WPTitle">
                <asp:Label ID="uxCaption2" Text="Additional Custom Community Categories" runat="server"></asp:Label> 
            </h3>
        </td>
    </tr>
    <tr>
        <td colspan="2" style="padding-top:10px;">
            <asp:Label ID="uxPageDescription2" Text="Custom Categories to be added to your seller's booths in addition to the default collection" runat="server"
             Font-Bold="False" Font-Names="Verdana" Font-Size="8pt" Height="15px"></asp:Label>
        </td>
    </tr>
    <tr>
        <td style="padding-top:10px;">
            <Telerik:RadTreeView ID="uxCustomCategories" BorderWidth="1px" ShowLineImages="false" runat="server"
                Height="212px" Font-Bold="true" Font-Size="9" Font-Names="Verdana" OnClientContextMenuItemClicking="ClientContextMenuItemClicking">

                <ContextMenus>
                    <Telerik:RadTreeViewContextMenu runat="server" ID="HelpDeskMenu" ClickToOpen="True"
                        Skin="Telerik">
                        <Items>
                            <Telerik:RadMenuItem Text="Add Category" Value="Add">
                            </Telerik:RadMenuItem>
                            <Telerik:RadMenuItem Text="Edit Category" Value="Edit">
                            </Telerik:RadMenuItem>
                            <Telerik:RadMenuItem Text="Delete Category" Value="Delete">
                            </Telerik:RadMenuItem>
                        </Items>
                    </Telerik:RadTreeViewContextMenu>
                </ContextMenus>
                <Nodes>
                </Nodes>
            </Telerik:RadTreeView>
        </td>
        <td style="padding-top:10px; padding-left:10px;" valign="top">
            <asp:Panel ID="uxAddCategorypanel" runat="server" BorderWidth="1" Height="150px" Width="450px">
                <table Width='100%' cellpadding='0' cellspacing='0' style='padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px; border:0; font-family:Verdana; font-size:11px;'>
                    <tr>
                        <td style="padding-left:5px;" colspan="2">
                            <h3 class="ms-standardheader ms-WPTitle">
                                Add Category
                            </h3>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left:5px; padding-top:10px; width:100px;">
                            Name
                        </td>
                        <td style="padding-top:10px;">
                            <asp:TextBox ID="uxAddCategoryTextBox" runat="server" Width="240px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:100px; padding-top:10px;">
                        </td>
                        <td style="padding-top:10px;">
                            <asp:Button Text="Submit" runat="server" ID="uxAddCategorySubmit"/> 
                            <asp:Button Text="Cancel" runat="server" ID="uxAddCategoryCancel" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>

            <asp:Panel ID="uxEditCategoryPanel" runat="server" BorderWidth="1" Height="150px" Width="450px">
                <table Width='100%' cellpadding='0' cellspacing='0' style='padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px; border:0; font-family:Verdana; font-size:11px;'>
                    <tr>
                        <td style="padding-left:5px;" colspan="2">
                            <h3 class="ms-standardheader ms-WPTitle">
                                Edit Category
                            </h3>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left:5px; padding-top:10px; width:100px;">
                            Name
                        </td>
                        <td style="padding-top:10px;">
                            <asp:TextBox ID="uxEditCategoryTextbox" runat="server" Width="240px"></asp:TextBox>
                        </td>
                    </tr>
                    <tr>
                        <td style="width:100px; padding-top:10px;">
                        </td>
                        <td style="padding-top:10px;">
                            <asp:Button Text="Sumbit" runat="server" ID="uxEditCategorySubmit"/> 
                            <asp:Button Text="Cancel" runat="server" ID="uxEditCategoryCancel" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>

            <asp:Panel ID="uxDeleteCategoryPanel" runat="server" BorderWidth="1" Height="150px" Width="450px" >
                <table Width='100%' cellpadding='0' cellspacing='0' style='padding-left:0px;padding-right:0px;padding-top:0px;padding-bottom:0px; border:0; font-family:Verdana; font-size:11px;'>
                    <tr>
                        <td style="padding-left:5px;" colspan="2">
                            <h3 class="ms-standardheader ms-WPTitle">
                                Delete Category
                            </h3>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" style="padding-left:30px; padding-top:10px;">
                            Are you sure,you want to delete the category Buisness & Industrial ?
                        </td>
                    </tr>
                    <tr>
                        <td style="width:20px; padding-top:10px;">
                        </td>
                        <td style="padding-top:10px;">
                            <asp:Button Text="OK" ID="uxDeleteCategoryOK" runat="server" Width="50px"/> 
                            <asp:Button Text="Cancel" ID="uxDeleteCateGoryCancel" runat="server" />
                        </td>
                    </tr>
                </table>
            </asp:Panel>
        </td>
    </tr>
</table>
    </div>
    </form>
</body>
</html>

CS code

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using Telerik.Web.UI;

public partial class _Default : System.Web.UI.Page
{
    protected override void OnLoad(EventArgs e)
    {
        base.OnLoad(e);

        AddCategoryNodes();

    }

    protected void AddCategoryNodes()
    {
        DataTable dtCustomCategories = new DataTable();
        dtCustomCategories.Columns.Add("CategoryName");
        dtCustomCategories.Rows.Add("Category1");
        dtCustomCategories.Rows.Add("Category2");
        dtCustomCategories.Rows.Add("Category3");
        dtCustomCategories.Rows.Add("Category4");

        for (int i = 0; i < dtCustomCategories.Rows.Count; i++)
        {
            RadTreeNode categories = new RadTreeNode();
            categories.Text = dtCustomCategories.Rows[i][0].ToString().Trim();
            categories.Value = dtCustomCategories.Rows[i][0].ToString().Trim();
            categories.ExpandMode = Telerik.Web.UI.TreeNodeExpandMode.ClientSide;
            uxCustomCategories.Nodes.Add(categories);
        }
    }
}

TreeView

answered on 18 May 2011