Questions on UI for ASP.NET AJAX Forum

2 answers

114 views

Possibly.

When I started work on my current project, there were some nasty bits of code. One of them was a banner used on the page. It was decided to replace it with something more in keeping with style of the RadControls and something that was, ideally, skinnable.

I decided to have a bit of a go at cheating. I liked the layout of the title bar of the RadWindow and it fitted our requirements very nicely. So, I recreated the RadWindow title bar from the rendered HTML and came up with my PageBanner control. Clipboard1.gif shows what it looks like (using the Hay skin).

The code looks like this ...

<asp:Panel ID="Panel1"

runat="server" CssClass="RadWindow">

<asp:Table ID="Table1"

runat="server"

Width="100%"

CellPadding="0"

CellSpacing="0">

<asp:TableRow runat="server"

CssClass="rwTitleRow">

<asp:TableCell runat="server"

ID="Cell1"

CssClass="rwTitlebar"

Width="10px">

</asp:TableCell>

<asp:TableCell runat="server"

ID="Cell2"

CssClass="rwTitlebar">

<asp:Panel ID="Panel2"

runat="server"

CssClass="rwTopResize">

</asp:Panel>

<asp:Table ID="Table2"

runat="server"

CssClass="rwTitlebarControls"

CellPadding="0"

CellSpacing="0"

HorizontalAlign="Left">

<asp:TableRow runat="server"

ID="InnerRow1">

<asp:TableCell runat="server"

ID="InnerCell1"

Width="16px"

Style="vertical-align: top !important;">

<asp:HyperLink ID="HyperLink1"

runat="server"

CssClass="rwIcon"></asp:HyperLink>

</asp:TableCell>

<asp:TableCell runat="server" VerticalAlign="Bottom">

<asp:Label ID="UEAPLBannerTitleText"

runat="server"></asp:Label>

</asp:TableCell>

<asp:TableCell runat="server"

ID="SkinPickerContainer"

Style="width: 40px;">

</asp:TableCell>

<asp:TableCell Style="width: 100px;">

<telerik:RadSkinManager ID="RadSkinManager1" runat="server"

OnPreRender="RadSkinManager1_PreRender">

</telerik:RadSkinManager>

</asp:TableCell>

<asp:TableCell runat="server"

ID="InnerCell3">

<ul class="rwControlButtons"></ul>

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</asp:TableCell>

<asp:TableCell runat="server"

ID="TableCell1"

CssClass="rwTitlebar"

Width="10px">

</asp:TableCell>

</asp:TableRow>

</asp:Table>

</asp:Panel>

public partial class PageBannerBanner : System.Web.UI.UserControl

{

/// <summary>

///

/// </summary>

/// <remarks></remarks>

string iconUrl;

/// <summary>

///

/// </summary>

/// <remarks></remarks>

string message;

/// <summary>

///

/// </summary>

/// <remarks></remarks>

string skin;

/// <summary>

///

/// </summary>

/// <remarks></remarks>

string title;

/// <summary>

///

/// </summary>

/// <remarks></remarks>

Unit width;

/// <summary>

/// Gets or sets the icon URL.

/// </summary>

/// <value>The icon URL.</value>

/// <remarks></remarks>

public string IconUrl

{

get

{

return iconUrl;

}

set

{

iconUrl = value;

HyperLink1.Style.Add(HtmlTextWriterStyle.BackgroundImage, Page.ResolveClientUrl(value));

HyperLink1.Style.Add("background-position", "0px 0px");

}

/// <summary>

/// Gets or sets the message.

/// </summary>

/// <value>The message.</value>

/// <remarks></remarks>

public string Message

{

get

{

return message;

}

set

{

message = value;

}

/// <summary>

/// Gets or sets the skin.

/// </summary>

/// <value>The skin.</value>

/// <remarks></remarks>

public string Skin

{

get

{

return skin;

}

set

{

skin = value;

Panel1.CssClass = String.Format("RadWindow RadWindow_{0} rwNormalWindow rwTransparentWindow", value);

}

public RadSkinManager SkinManager

{

get

{

return RadSkinManager1;

}

/// <summary>

/// Gets or sets the title.

/// </summary>

/// <value>The title.</value>

/// <remarks></remarks>

public string Title

{

get

{

return title;

}

set

{

title = value;

}

/// <summary>

/// Gets or sets the width.

/// </summary>

/// <value>The width.</value>

/// <remarks></remarks>

public Unit Width

{

get

{

return width;

}

set

{

width = value;

Panel1.Width = value;

}

bool allowDefaultSkinOverride

{

get

{

object o = ViewState[GlobalConstants.ViewState.ALLOWDEFAULTSKINUSEROVERRIDE];

if (o == null)

{

string s = System.Configuration.ConfigurationManager.AppSettings[GlobalConstants.Controls.SkinManger.WEBCONFIGKEY];

if (String.IsNullOrEmpty(s))

{

o = false;

}

else

{

o = s.ToLower().StartsWith("t");

}

ViewState[GlobalConstants.ViewState.ALLOWDEFAULTSKINUSEROVERRIDE] = o;

}

return (bool)o;

}

/// <summary>

/// Raises the <see cref="E:Load" /> event.

/// </summary>

/// <param name="e">The <see cref="EventArgs" /> instance containing the event data.</param>

/// <remarks></remarks>

protected override void OnLoad(EventArgs e)

{

if (!allowDefaultSkinOverride)

{

RadSkinManager1.Skin = GlobalFunctions.GetDefaultSkin();

}

SetSkinChooser(allowDefaultSkinOverride);

base.OnLoad(e);

}

/// <summary>

/// Raises the <see cref="E:PreRender" /> event.

/// </summary>

/// <param name="e">The <see cref="EventArgs" /> instance containing the event data.</param>

/// <remarks></remarks>

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

PageBannerTitleText.Text = String.Format("<em>{0} {1}<em>", title, message);

LoadLocalSkinStylesheets(RadSkinManager1.Skin);

Panel1.CssClass = String.Format("RadWindow RadWindow_{0}", RadSkinManager1.Skin);

}

protected void RadSkinManager1_PreRender(object sender, EventArgs e)

{

if (RadSkinManager1.ShowChooser)

{

RadComboBox skinChooser = RadSkinManager1.FindControl("SkinChooser") as RadComboBox;

AvailableSkinCollection skins = GlobalFunctions.GetSkins();

int i = 0;

while (i < skinChooser.Items.Count)

{

if (!skins.Contains(skinChooser.Items[i].Text))

{

skinChooser.Items.Remove(skinChooser.Items[i]);

}

i++;

}

foreach (AvailableSkin skin in skins.Where(s => !s.IsEmbedded))

{

skinChooser.Items.Add(new RadComboBoxItem(skin.Name));

}

void LoadLocalSkinStylesheets(string SkinName)

{

string cssFileName = String.Format("~/StyleSheets/Local/Local_{0}.css", SkinName);

HtmlLink css = new HtmlLink();

css.Href = Page.ResolveUrl(cssFileName);

css.Attributes["rel"] = "stylesheet";

css.Attributes["type"] = "text/css";

css.Attributes["media"] = "all";

Page.Header.Controls.Add(css);

}

void SetSkinChooser(bool Value)

{

SkinPickerContainer.Text = String.Format("<em>{0}<em>", "Style:");

SkinPickerContainer.Visible = Value;

RadSkinManager1.ShowChooser = Value;

RadSkinManager1.PersistenceMode = RadSkinManager1.ShowChooser ? RadSkinManagerPersistenceMode.Cookie : RadSkinManagerPersistenceMode.Session;

}

I have to say that I'm rather pleased with it in all but one regard; It looks pants in IE7 and IE8 Compatibility Mode. Clipboard2.gif shows it using the same skin in IE8 Compatibility Mode.

Clearly there is something different about how IE7 works and I've tried to figure out what exactly is going on, but to no avail. I did think that there might be an IE7 hack in the CSS but if there is, I can't find it.

Can anyone offer any suggestions?

--
Stuart

Window

answered on 18 May 2011

5 answers

538 views

How to select/deselect all RadButtons (as checkbox) into a radgrid with javascript

Hi, i have a RadGrid with checkbox like this

<telerik:GridTemplateColumn UniqueName="Assigned" >

<ItemTemplate>

<telerik:RadButton ID="checkAssigned" runat="server" ToggleType="CheckBox" ButtonType="ToggleButton" AutoPostBack="false" Skin="Forest" EnableEmbeddedSkins="true" EnableEmbeddedBaseStylesheet="true" >

<ToggleStates>

<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckboxChecked" Selected="true" />

<telerik:RadButtonToggleState PrimaryIconCssClass="rbToggleCheckbox" />

</ToggleStates>

</telerik:RadButton>

</ItemTemplate>

<ItemStyle Width="50px" />

</telerik:GridTemplateColumn>

I need a javascript function to select/deselect all the checkboxes in the grid. How can I do this?
Thanks

Button

answered on 18 May 2011

1 answer

44 views

Loader Issue / Undefined issue in Rad Tab

Hi,

I am using Tab Strip in splitter. in Tab strip there is on demand load tab. in all tabs there are user controls. in user control clicking on any control gives JS error, Null or undefined.

Looking forward to your response

TabStrip

answered on 18 May 2011

5 answers

157 views

Export to CSV only gives MasterTableView data

I have an instance of a RadGrid on my page with hierarchical data. Exporting to Excel or Word works wonderfully. However, exporting to CSV results in only the MasterTableView data being exported. Any clues?

If anyone is thinking of suggesting I expand all of my MasterTableView items by default, please don't. As I said, it works for Excel and Word, so this is not the problem.

Thank you in advance!

Grid

answered on 18 May 2011

5 answers

211 views

Page Number etc, css

Hi
I have my grids set to numericpages and i am hiding the pagesize drop-down etc.

On the left is the pages.. 1,2,3...
and on the far right is "Page 1 of 2, items 1 to 200 of 202"

I'm sure this is a simple question, but... How do i align the "Page 1 of 2,..." after the pages, on the left ?
Also, is it possible to change the word "items" ?

Many Thanks
Mark

Grid

answered on 18 May 2011

5 answers

168 views

RadAsyncUpload not Asyncronous

We are Building a Simple Widget
The widget has a designer. The designer has a RadAsyncUpload control. The upload control has a handler for the OnClientFileUploaded event. The event fires when the files selection is complete. The files doesn't upload until I click a button on the designer. The file is only uploaded after the pages is refreshed(posted back).

Of course the button doesn't post back asynchronously.

AsyncUpload

answered on 18 May 2011

2 answers

182 views

Prevent Row Click

Hi

How can I prevent a user to single click on a row (thereby changing the selected row). I only want the user to be able to double click on a row to change selected row.

I also want to programatically change row (I'm already doing this using set_selected(true);)

I have also changed the CSS for selected row (.rlbSelected) to show a background picture.

I've tried using some javascript to intercept SelectionIndexChanging and set_cancel(true); to prevent single click, but it still changes the focused row thereby causing other problems.

/Keivan

ListBox

answered on 18 May 2011

2 answers

72 views

Problem with configuration

Hello,
I have following layout;
1. 3 columns on page.
2. Each column contains its own asp:panel
3. When I press button on 1st panel I want to show loading on second on, when press on 2 want to show on 3.

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="pnlFullDescription">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlFullDescription" LoadingPanelID="ralMain" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="pnlShortDescription">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlFullDescription" LoadingPanelID="ralMain" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

But cannot make it work. Updating the same panel working. Ajax update is displaying. Updating the same and next one also working. But updating next one not.

Could you help me with configuration?
Kind Regards
Marcin

Ajax

answered on 18 May 2011

3 answers

777 views

Override HeaderStyle Color

I build my grid in code

RadGrid RadGrid1 = new RadGrid();

RadGrid1.ID = "RadGrid1";

RadGrid1.DataSourceID = "SqlDataSource1";

RadGrid1.MasterTableView.DataKeyNames = new string[] { "Jobnumber" };

RadGrid1.Skin = "WebBlue";

//RadGrid1.EnableEmbeddedSkins = false;

RadGrid1.Width = Unit.Percentage(100);

RadGrid1.PageSize = 15;

RadGrid1.AllowPaging = true;

RadGrid1.PagerStyle.Mode = GridPagerMode.NextPrev;

RadGrid1.AllowSorting = true;

RadGrid1.AllowFilteringByColumn = false;

RadGrid1.AutoGenerateColumns = false;

RadGrid1.ClientSettings.Resizing.AllowColumnResize = true;

RadGrid1.ClientSettings.Resizing.ResizeGridOnColumnResize = true;

RadGrid1.ClientSettings.Resizing.ClipCellContentOnResize = true;

RadGrid1.ClientSettings.AllowColumnsReorder = true;

RadGrid1.ClientSettings.ColumnsReorderMethod = GridClientSettings.GridColumnsReorderMethod.Reorder;

RadGrid1.GridLines = GridLines.Both;

RadGrid1.ItemCommand += new GridCommandEventHandler(RadGrid1_ItemCommand);

RadGrid1.PageIndexChanged += new GridPageChangedEventHandler(RadGrid1_PageIndexChanged);

//Add columns

GridButtonColumn buttonColumn = new GridButtonColumn();

buttonColumn.HeaderText = "Select File";

buttonColumn.CommandName = "Select";

buttonColumn.ButtonType = GridButtonColumnType.PushButton;

buttonColumn.Text = "Go";

buttonColumn.ItemStyle.HorizontalAlign = HorizontalAlign.Center;

buttonColumn.HeaderStyle.Width = 50;

buttonColumn.HeaderStyle.BackColor = System.Drawing.Color.Crimson;

buttonColumn.HeaderStyle.BorderColor = System.Drawing.Color.Crimson;

RadGrid1.Columns.Add(buttonColumn);

I use the embedded Skin "WebBlue" However when I try to override the headerstyle color of the first column only half the header is changed.

Grid

answered on 18 May 2011

4 answers

552 views

Populating DropDownList in EditForm

Ihave a grid that is set to edit useing EditForms. On the ItemDataBound I fill the dropdownlist in the EditForm this works great for Inserting records. The issue is when I select and record from the grid to edit I use

<asp:DropDownList ID="ddState" runat="server" SelectedValue='<%# Bind("StateID") %>' />

So when I select the record the dropdownlist has not been populated yet. How can I populate the dropdownlist so I can set the select value.

Thanks,
Eric

Grid

answered on 18 May 2011