Questions on UI for ASP.NET AJAX Forum

4 answers

267 views

Hi

I have radpanelbar inside RadSlidingPanel. I have 2 RadPanelItem which has Itemtemplate. I want both to show as collapsed but both showing expanded when control loads. I tried ExpandMode as per demo but still no collapsible icon showing up for any radpanel item.

<telerik:RadSlidingPane ID="RadSlidingPane2" runat="server" Width="300px" Title="Add Filters"

MinWidth="225">

<telerik:RadPanelBar runat="server" ExpandMode="FullExpandedItem" Width="100%" Height="150">

<Items>

<telerik:RadPanelItem runat="server" Text="Filter By">

<ItemTemplate>

</ItemTemplate>

</telerik:RadPanelItem>

<telerik:RadPanelItem runat="server" Text="Filter By SQL Criteria">

<ItemTemplate>

</ItemTemplate>

</telerik:RadPanelItem>

</Items>

</telerik:RadPanelBar>

</telerik:RadSlidingPane>

PanelBar

answered on 05 Dec 2013

1 answer

164 views

RadTab Text vertical alignment

hi i want to align the RadTab Text vertically "Middle"

<telerik:RadTabStrip ID="setupTab" CausesValidation="false" Width="100%" Skin="" EnableEmbeddedSkins="false"

MultiPageID="setupMP" Orientation="VerticalLeft" SelectedIndex="0" runat="server">

<Tabs>

<telerik:RadTab BackColor="#F3F0EB" ForeColor="Black" SelectedCssClass="setupTabSelected"

Height="30px" Font-Size="14px" Text="Organization Settings" Value="os">

</telerik:RadTab>

<telerik:RadTab BackColor="#F3F0EB" ForeColor="Black" SelectedCssClass="setupTabSelected"

Height="30px" Font-Size="14px" Text="Users & Groups" Value="ug">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

.setupTabSelected

{

background-color: #FFFFFF !important;

}

TabStrip

answered on 05 Dec 2013

1 answer

248 views

Working with RadMultiPage PageViewCreated on Postback

Hi There,

The issue I am having is related to these next two threads but was never really answered.

http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/trying-to-understand-quot-pageviewcreated-quot-functionality.aspx

http://www.telerik.com/community/forums/aspnet-ajax/tabstrip/pageviewcreated-fires-before-tabclick.aspx

I completely understand that it is by design that the RadMultiPage PageViewCreated event fires (it seems) on every postback before Page_Load even occurs.

My problem is this:

I am building a sort of survey application that will have a dynamic number of pages (tabs) that follows the wizard format in the Telerik online demos for the RadTabStrip. As a part of the page view creation for each page, I am loading a user control and doing an initialization routine where I dynamically load other user controls depending on the type of page that I am loading.

As a result, whenever I do a postback (e.g. a button click on a user control within a page that does a search) it takes a really long time to finish the request. I thought about doing some sort of conditional initialization of the controls to cut out some of the over head but I find the fact that PageViewCreated fires before everything else a bit difficult.

Also, if I don't fully intialise and load the controls (using LoadControl) on first page load, it seems the RadTabStrip and RadMultiPage lose state and the controls are no longer there.

Can anyone suggest an approach?

Thanks for any suggestions or input.

Kevin Parkinson

TabStrip

answered on 05 Dec 2013

5 answers

102 views

Chrome is not supporting displaying all selected nodes

I am using RadTreeDropdown on a page to display hierarchical data with checkboxes with Multiple nodes selection. When I checked a parent node (let us Node1) and it has two other child nodes (Node2,Node3), then it automatically selects the child nodes, but in the dropdown text it is just showing the parent node text and not showing child node text in Chrome. It is just showing ;;;;; in place of node text.

It is working fine with other browsers.I am using Chrome latest version i.e. Version 31.0.1650.57 m.

Please help. Thanks in advance.

DropDownTree

answered on 05 Dec 2013

1 answer

252 views

Hide and show radgrid on its buttonclick

Hi.
I have two buttons.one to show radgrid and one to hide it. Can i hide and show radgrid on its buttonclick in clientside using javascript?

Grid

answered on 05 Dec 2013

2 answers

89 views

touch mode

i know here is not the best way to ask this, but i have a webiste and i want that when user clicks on o button it changes all telerik controls to thouch skin mode and when is not on that button switch to normal

ListBox

answered on 05 Dec 2013

1 answer

228 views

In HeaderContextMenu, Only Show the Show/Hide Columns List

Current Setup
I have a RadGrid and only want to provide a header context menu with an option to show/hide columns.

HeaderContextMenus are enabled and disabled grouping such that the only menu item that appears is the 'Columns' menu item which I've renamed. Please see the attached screenshot headercontextmenu_singleitem.png to get an idea of how the context menu appears when right-clicked. I have a javascript method that is applied to the client event OnHeaderMenuShowing. This is what I'm using to rename my 'Columns' column and do some other formatting.

What I Would Like to Do
In short I would like to only show the list of columns with checkboxes to show/hide, nothing more. I am checking in the javascript OnHeaderMenuShowing to see how many items I have in my main level menu. If only 1 item I want to only show the child popout menu which lists the columns with the checkboxes to show/hide columns.

if(args.get_menu().get_items()._array.length == 1) {

// do something here when only 1 item

}

I have managed to simulate this by setting the groupSettings offsetX and offsetY for the 'Columns' menu item to cause it to move over the main menu and setting the menu clickToOpen to true. (see screenshot headercontextmenu_singleitem_exampleonlychildshowing.png) This is more a hack and unfortunately inconsistent. After I left click on the page and right click again the menu does not appear in the same place. Multiple left clicks (on other columns) works correctly. I also cannot seem to turn off the expand and collapse animations.

Sample for moving the child menu when 1 item:

if (items._array.length == 1) {

items._parent.set_clickToOpen(true);

args.get_menu().get_items().getItem(0).open();

args.get_menu().get_items().getItem(0)._groupSettings.set_offsetX(-188); // static numbers for now

args.get_menu().get_items().getItem(0)._groupSettings.set_offsetY(-28);

}

Sample for setting animations:

args.get_menu().get_expandAnimation().set_type("None");

args.get_menu().get_collapseAnimation().set_type("None");

Thanks in advance for any suggestions.

Grid

answered on 05 Dec 2013

9 answers

166 views

[Solved] Extremely Fast Scrolling on Mouse Over

I'm using a RadRotator control to display testimonials on our website, whenever anyone hovers over the control it begins scrolling through the items rapidly. I've tried setting the PauseOnMouseOver property and I've also tried setting the OnClientMouseOver property both to no avail. How can I fix this?

Thanks

Rotator

answered on 05 Dec 2013

1 answer

119 views

Exporting programtically created template columns

I have a radgrid with programtically created template columns. There are no fancy controls in the template columns. Just Links and Table.
When I download as excel it doesnt download any of the template column data. Attached below is the source code sample. I've also attached image snapshot of html rendered and excel downloaded. Creating template columns dynamically is critical for me as I'll not know the number of columns until I run some database queries to get the data.
Appreciate your help.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ScaleAnalysisTemplateTest.aspx.cs" Inherits="DSSAnalytics.DashboardWidgets.ScaleAnalysisTool.ScaleAnalysisTemplateTest" %>

<%@ 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></title>

</head>

<body>

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

<telerik:RadScriptManager ID="MuniWebScriptMgr" runat="server" EnablePartialRendering="true"

AsyncPostBackTimeout="36000">

<Scripts>

<asp:ScriptReference Path="~/scripts/jquery-1.3.2.js" />

</Scripts>

</telerik:RadScriptManager>

<asp:ImageButton runat="server" ID="IMG_Excel" OnClick="DownloadAsExcel" CssClass="ExcelBtnStyle"

ImageUrl="../../images/excel.png" ToolTip="Export to Excel" />

<div id="gridCtrl" runat="server">

</div>

</form>

</body>

</html>

RadGrid r;

protected void Page_Init(object sender, EventArgs e)

{

BuildRadGrid();

}

protected void Page_Load(object sender, EventArgs e)

{

}

private void BuildRadGrid()

{

r = new RadGrid();

r.ID = "ScaleAnalysisSummaryByRow";

r.GridLines = GridLines.None;

r.EnableEmbeddedSkins = false;

r.MasterTableView.AutoGenerateColumns = false;

r.MasterTableView.TableLayout = GridTableLayout.Fixed;

r.AllowSorting = true;

r.MasterTableView.AllowNaturalSort = true;

r.ClientSettings.Scrolling.SaveScrollPosition = false;

r.EnableViewState = false;

r.Height = Unit.Pixel(450);

r.Width = Unit.Pixel(1200);

r.MasterTableView.Width = Unit.Pixel(900);

GridBoundColumn boundColumn1 = new GridBoundColumn();

boundColumn1.HeaderText = "Name";

boundColumn1.DataField = "name";

boundColumn1.UniqueName = "name";

boundColumn1.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;

boundColumn1.ItemStyle.HorizontalAlign = HorizontalAlign.Left;

boundColumn1.HeaderStyle.VerticalAlign = VerticalAlign.Bottom;

boundColumn1.HeaderStyle.Width = Unit.Pixel(150);

boundColumn1.HeaderStyle.Font.Bold = true;

r.Columns.Add(boundColumn1);

GridTemplateColumn boundColumn2 = new GridTemplateColumn();

boundColumn2.HeaderText = "Series";

boundColumn2.ItemTemplate = new ScaleAnalysisRowSeriesNameTemplate();

boundColumn2.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;

boundColumn2.ItemStyle.HorizontalAlign = HorizontalAlign.Left;

boundColumn2.HeaderStyle.VerticalAlign = VerticalAlign.Bottom;

boundColumn2.HeaderStyle.Width = Unit.Pixel(130);

boundColumn2.HeaderStyle.Font.Bold = true;

r.Columns.Add(boundColumn2);

GridBoundColumn boundColumn3 = new GridBoundColumn();

boundColumn3.HeaderText = "Amount";

boundColumn3.DataField = "amt";

boundColumn3.UniqueName = "amt";

boundColumn3.HeaderStyle.HorizontalAlign = HorizontalAlign.Center;

boundColumn3.ItemStyle.HorizontalAlign = HorizontalAlign.Right;

boundColumn3.HeaderStyle.VerticalAlign = VerticalAlign.Bottom;

boundColumn3.HeaderStyle.Width = Unit.Pixel(60);

boundColumn3.HeaderStyle.Font.Bold = true;

boundColumn3.DataFormatString = "{0:N0}";

r.Columns.Add(boundColumn3);

int year = 2010;

string col1 = "col1_d1";

string col2 = "col1_d2";

string col3 = "col1_d3";

string col4 = "col1_d4";

GridTemplateColumn templateColumn = new GridTemplateColumn();

templateColumn.HeaderTemplate = new ScaleAnalysisRowHeaderTemplate(year);

templateColumn.ItemTemplate = new ScaleAnalysisRowItemTemplate(col1 , col2, col3 , col4);

r.Columns.Add(templateColumn);

year = 2011;

col1 = "col2_d1";

col2 = "col2_d2";

col3 = "col2_d3";

col4 = "col2_d4";

GridTemplateColumn templateColumn2 = new GridTemplateColumn();

templateColumn2.HeaderTemplate = new ScaleAnalysisRowHeaderTemplate(year);

templateColumn2.ItemTemplate = new ScaleAnalysisRowItemTemplate(col1, col2, col3, col4);

r.Columns.Add(templateColumn2);

r.ClientSettings.Scrolling.AllowScroll = true;

r.ClientSettings.Scrolling.UseStaticHeaders = true;

r.ClientSettings.Selecting.AllowRowSelect = true;

r.NeedDataSource += new GridNeedDataSourceEventHandler(Grid_NeedDataSource);

gridCtrl.Controls.Add(r);

}

protected void Grid_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

DataTable dt = new DataTable();

dt.Columns.Add("name", typeof(String));

dt.Columns.Add("series", typeof(String));

dt.Columns.Add("amt", typeof(Decimal));

dt.Columns.Add("col1_d1", typeof(Decimal));

dt.Columns.Add("col1_d2", typeof(Decimal));

dt.Columns.Add("col1_d3", typeof(Decimal));

dt.Columns.Add("col1_d4", typeof(Decimal));

dt.Columns.Add("col2_d1", typeof(Decimal));

dt.Columns.Add("col2_d2", typeof(Decimal));

dt.Columns.Add("col2_d3", typeof(Decimal));

dt.Columns.Add("col2_d4", typeof(Decimal));

DataRow dr = dt.NewRow();

dr["name"] = "John Smith";

dr["series"] = "S1";

dr["amt"] = 200.98;

dr["col1_d1"] = 120;

dr["col1_d2"] = 11;

dr["col1_d3"] = 12090;

dr["col1_d4"] = 1221;

dr["col2_d1"] = 320;

dr["col2_d2"] = 110;

dr["col2_d3"] = 1190;

dr["col2_d4"] = 121;

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["name"] = "Mary Jones";

dr["series"] = "S2";

dr["amt"] = 200.98;

dr["col1_d1"] = 120;

dr["col1_d2"] = 11;

dr["col1_d3"] = 12090;

dr["col1_d4"] = 1221;

dr["col2_d1"] = 20;

dr["col2_d2"] = 10;

dr["col2_d3"] = 190;

dr["col2_d4"] = 21;

dt.Rows.Add(dr);

dr = dt.NewRow();

dr["name"] = "Test User";

dr["series"] = "S3";

dr["amt"] = 200.98;

dr["col1_d1"] = 120;

dr["col1_d2"] = 11;

dr["col1_d3"] = 12090;

dr["col1_d4"] = 1221;

dr["col2_d1"] = 200;

dr["col2_d2"] = 109;

dr["col2_d3"] = 1990;

dr["col2_d4"] = 218;

dt.Rows.Add(dr);

RadGrid grid = (RadGrid)source;

grid.DataSource = dt;

}

protected void DownloadAsExcel(object sender, EventArgs e)

{

try

{

r.ExportSettings.IgnorePaging = true;

r.ExportSettings.OpenInNewWindow = true;

r.ExportSettings.ExportOnlyData = true;

r.ExportSettings.FileName = "ExcelSample";

r.MasterTableView.ExportToExcel();

}

catch (Exception ex)

{

throw ex;

}

internal class ScaleAnalysisRowSeriesNameTemplate : ITemplate

{

protected LiteralControl securityWindow;

public ScaleAnalysisRowSeriesNameTemplate()

{

}

public void InstantiateIn(System.Web.UI.Control container)

{

Table table = new Table();

table.CellSpacing = 0;

table.CellPadding = 0;

table.Width = Unit.Percentage(100);

table.BorderStyle = BorderStyle.None;

TableRow tr1 = new TableRow();

TableCell td1 = new TableCell();

td1.BorderStyle = BorderStyle.None;

td1.BorderWidth = Unit.Pixel(0);

securityWindow = new LiteralControl();

securityWindow.DataBinding += new EventHandler(lControl_Series_DataBinding);

td1.Controls.Add(securityWindow);

td1.HorizontalAlign = HorizontalAlign.Left;

td1.VerticalAlign = VerticalAlign.Middle;

td1.Controls.Add(securityWindow);

tr1.Cells.Add(td1);

table.Rows.Add(tr1);

container.Controls.Add(table);

}

public void lControl_Series_DataBinding(object sender, EventArgs e)

{

LiteralControl l = (LiteralControl)sender;

GridDataItem container = (GridDataItem)l.NamingContainer;

string securityWinLink = "openwin('" + ((DataRowView)container.DataItem)["series"].ToString() + "')";

l.Text = "<a onclick=" + securityWinLink + " title='Click to Open series details'><b><u>" + ((DataRowView)container.DataItem)["series"].ToString() + "</u></b></a>";

}

internal class ScaleAnalysisRowHeaderTemplate : ITemplate

{

private int _year;

public ScaleAnalysisRowHeaderTemplate(int year)

{

_year = year;

}

public void InstantiateIn(System.Web.UI.Control container)

{

Table table = new Table();

table.CellSpacing = 0;

table.CellPadding = 0;

table.Width = Unit.Percentage(100);

table.BorderStyle = BorderStyle.None;

TableRow tr0 = new TableRow();

TableRow tr1 = new TableRow();

TableRow tr2 = new TableRow();

int colspan = 2;

TableCell td0 = new TableCell();

TableCell td1 = new TableCell();

TableCell td2 = new TableCell();

TableCell td3 = new TableCell();

TableCell td4 = new TableCell();

td0.HorizontalAlign = HorizontalAlign.Center;

td0.Text = _year.ToString();

td0.Font.Bold = true;

tr0.Cells.Add(td0);

table.Rows.Add(tr0);

colspan = 2;

td1.Text = "Data1";

td2.Text = "Data2";

td3.Text = "Data3";

td4.Text = "Data4";

td1.HorizontalAlign = HorizontalAlign.Center;

td2.HorizontalAlign = HorizontalAlign.Center;

td3.HorizontalAlign = HorizontalAlign.Center;

td4.HorizontalAlign = HorizontalAlign.Center;

td1.Font.Bold = true;

td2.Font.Bold = true;

td3.Font.Bold = true;

td4.Font.Bold = true;

td1.Width = Unit.Percentage(50);

td2.Width = Unit.Percentage(50);

tr1.Cells.Add(td1);

tr1.Cells.Add(td2);

tr2.Cells.Add(td3);

tr2.Cells.Add(td4);

table.Rows.Add(tr1);

table.Rows.Add(tr2);

td0.ColumnSpan = colspan;

container.Controls.Add(table);

}

internal class ScaleAnalysisRowItemTemplate : ITemplate

{

string _col1;

string _col2;

string _col3;

string _col4;

string _view;

protected LiteralControl lControl1;

protected LiteralControl lControl2;

protected LiteralControl lControl3;

protected LiteralControl lControl4;

int _colcounter;

public ScaleAnalysisRowItemTemplate(string col1, string col2, string col3, string col4)

{

_col1 = col1;

_col2 = col2;

_col3 = col3;

_col4 = col4;

}

public void InstantiateIn(System.Web.UI.Control container)

{

Table table = new Table();

table.CellSpacing = 0;

table.CellPadding = 0;

table.Width = Unit.Percentage(100);

table.BorderStyle = BorderStyle.None;

TableRow tr1 = new TableRow();

TableRow tr2 = new TableRow();

TableCell td1 = new TableCell();

TableCell td2 = new TableCell();

TableCell td3 = new TableCell();

TableCell td4 = new TableCell();

lControl1 = new LiteralControl();

lControl1.ID = "lControl1" + _col1 + _colcounter.ToString();

lControl1.DataBinding += new EventHandler(lControl_col1_DataBinding);

lControl2 = new LiteralControl();

lControl2.ID = "lControl2" + _col2 + _colcounter.ToString();

lControl2.DataBinding += new EventHandler(lControl_col2_DataBinding);

lControl3 = new LiteralControl();

lControl3.ID = "lControl3" + _col3 + _colcounter.ToString();

lControl3.DataBinding += new EventHandler(lControl_col3_DataBinding);

lControl4 = new LiteralControl();

lControl4.ID = "lControl4" + _col4 + _colcounter.ToString(); ;

lControl4.DataBinding += new EventHandler(lControl_col4_DataBinding);

td1.Controls.Add(lControl1);

td2.Controls.Add(lControl2);

td3.Controls.Add(lControl3);

td4.Controls.Add(lControl4);

td1.HorizontalAlign = HorizontalAlign.Center;

td2.HorizontalAlign = HorizontalAlign.Center;

td3.HorizontalAlign = HorizontalAlign.Center;

td4.HorizontalAlign = HorizontalAlign.Center;

td1.BorderStyle = BorderStyle.None;

td1.BorderWidth = Unit.Pixel(0);

td2.BorderStyle = BorderStyle.None;

td2.BorderWidth = Unit.Pixel(0);

td3.BorderStyle = BorderStyle.None;

td3.BorderWidth = Unit.Pixel(0);

td4.BorderStyle = BorderStyle.None;

td4.BorderWidth = Unit.Pixel(0);

td1.Width = Unit.Percentage(50);

td2.Width = Unit.Percentage(50);

tr1.Cells.Add(td1);

tr1.Cells.Add(td2);

tr2.Cells.Add(td3);

tr2.Cells.Add(td4);

table.Rows.Add(tr1);

table.Rows.Add(tr2);

_colcounter++;

container.Controls.Add(table);

}

public void lControl_col1_DataBinding(object sender, EventArgs e)

{

LiteralControl l = (LiteralControl)sender;

GridDataItem container = (GridDataItem)l.NamingContainer;

l.Text = String.Format("{0:N0}", ((DataRowView)container.DataItem)[_col1]);

}

public void lControl_col2_DataBinding(object sender, EventArgs e)

{

LiteralControl l = (LiteralControl)sender;

GridDataItem container = (GridDataItem)l.NamingContainer;

l.Text = String.Format("{0:N2}", ((DataRowView)container.DataItem)[_col2]);

}

public void lControl_col3_DataBinding(object sender, EventArgs e)

{

LiteralControl l = (LiteralControl)sender;

GridDataItem container = (GridDataItem)l.NamingContainer;

l.Text = String.Format("{0:N2}", ((DataRowView)container.DataItem)[_col3]);

}

public void lControl_col4_DataBinding(object sender, EventArgs e)

{

LiteralControl l = (LiteralControl)sender;

GridDataItem container = (GridDataItem)l.NamingContainer;

l.Text = String.Format("{0:N0}", ((DataRowView)container.DataItem)[_col4]);

}

Grid

answered on 05 Dec 2013

1 answer

152 views

iPad audio control plays only once

I am experiencing a problem with playing mp3 audio on iPad within a window, while the same code running in a test page NOT USING A WINDOW runs fine. The audio player is the simple <audio> control supported by html 5

The symptom of the problem is that in the window, the text and controls show fine initially, and the audio will play, but if the window is then closed and a new window opened, the window text shows and remains, but the audio control shows for about 1 second and then disappears!

If I purge all memory of the site from the iPad and revisit the site, again the audio will show up and play once only.

Can anyone suggest what to do next? This is a problem on Safari on iPhone and iPad (IOS7).

I have inserted nocache etc in the code for the page displayed in the window, but it doesn't have any effect.

I can confirm that the window works normally on Safari 5 on my mac. It is just iPad and iPhone where the problem arises.

Thanks for any ideas!

Clive

Window

answered on 05 Dec 2013