Questions on UI for ASP.NET AJAX Forum

2 answers

148 views

Hi Team,

I have some problem showing a background image in the :hover state. I´ve tried to sort it out by using firebug but I can´t see what I´m doing wrong. Instead of showing background image it shows a background color that I have not set in my css.
Css

.RadPanelBar_UnigolfBlack

{

background: #4f4f4f;

width:100% !important;

}

.RadPanelBar_UnigolfBlack .rpRootGroup

{

border-color: #080808;

}

.RadPanelBar_UnigolfBlack .rpLink,

.RadPanelBar_UnigolfBlack .rpTemplate

{

color: #fff;

font: bold 12px/24px "Segoe UI", Arial, sans-serif;

}

.RadPanelBar_UnigolfBlack .rpLink

{

background-image: url('PanelBar/SideBarSubMenuItem.png');

height: 46px;

background-repeat: no-repeat;

border-color: #4f4f4f;

}

.RadPanelBar_UnigolfBlack .rpLink .rpText

{

padding: 10px 0px 0px 20px;

margin:0px;

}

.RadPanelBar_UnigolfBlack .rpLink:hover

{

color: #909a0e;

background-image: url('PanelBar/SideBarSubMenuItemHover.png')!important;

height: 46px;

background-repeat: no-repeat;

}

.RadPanelBar_UnigolfBlack .rpFocused,

.RadPanelBar_UnigolfBlack .rpExpanded,

.RadPanelBar_UnigolfBlack .rpSelected,

.RadPanelBar_UnigolfBlack .rpSelected:hover

{

background-color: #2d2d2d;

border-color: #000;

}

.RadPanelBar_UnigolfBlack .rpOut

{

border-color: #000;

}

/* <disabled items> */

.RadPanelBar_UnigolfBlack .rpDisabled,

.RadPanelBar_UnigolfBlack .rpDisabled:hover

{

color: #777;

}

/* </disabled items> */

/* <expand arrows> */

.RadPanelBar_UnigolfBlack .rpExpandable .rpText,

.RadPanelBar_UnigolfBlack .rpExpanded .rpText

{

background-color: transparent;

background-image: url('PanelBar/Expandable.png');

}

/* </expand arrows> */

/* <subitems> */

.RadPanelBar_UnigolfBlack .rpGroup

{

background-color: #4f4f4f;

}

.RadPanelBar_UnigolfBlack .rpGroup .rpLink,

.RadPanelBar_UnigolfBlack .rpGroup .rpTemplate

{

color: #a9a9a9;

background-image: none;

background-color: transparent;

}

.RadPanelBar_UnigolfBlack .rpGroup .rpLink:hover

{

color: #9eda29;

}

.RadPanelBar_UnigolfBlack .rpGroup .rpLink,

.RadPanelBar_UnigolfBlack .rpGroup .rpLink .rpOut

{

background-color: transparent;

background-image: url('PanelBar/SubItemStates.png');

background-repeat: no-repeat;

}

.RadPanelBar_UnigolfBlack .rpGroup .rpSelected,

.RadPanelBar_UnigolfBlack .rpGroup .rpSelected:hover

{

color: #fff;

}

/* <subitems (disabled)> */

.RadPanelBar_UnigolfBlack .rpGroup .rpDisabled,

.RadPanelBar_UnigolfBlack .rpGroup .rpDisabled:hover,

.RadPanelBar_UnigolfBlack .rpGroup .rpDisabled .rpOut

{

background-image: none;

}

.RadPanelBar_UnigolfBlack .rpGroup .rpDisabled,

.RadPanelBar_UnigolfBlack .rpGroup .rpDisabled:hover

{

color: #777;

}

/* <subitems (disabled)> */

/* </subitems> */

/* <background positioning> */

.RadPanelBar_UnigolfBlack .rpLink,

.RadPanelBar_UnigolfBlack .rpExpanded

{

background-position: 0 0;

}

.RadPanelBar_UnigolfBlack .rpFocused,

.RadPanelBar_UnigolfBlack .rpLink:hover,

.RadPanelBar_UnigolfBlack .rpExpanded:hover

{

background-position: 0 -200px;

}

.RadPanelBar_UnigolfBlack .rpSelected,

.RadPanelBar_UnigolfBlack .rpSelected:hover

{

background-position: 0 -400px;

}

.RadPanelBar_UnigolfBlack .rpFirst .rpLink,

.RadPanelBar_UnigolfBlack .rpFirst .rpExpanded

{

background-position: 0 -1px;

}

.RadPanelBar_UnigolfBlack .rpFirst .rpFocused,

.RadPanelBar_UnigolfBlack .rpFirst .rpLink:hover

{

background-position: 0 -201px;

}

.RadPanelBar_UnigolfBlack .rpFirst .rpSelected,

.RadPanelBar_UnigolfBlack .rpFirst .rpSelected:hover

{

background-position: 0 -401px;

}

/* <root items (disabled)> */

.RadPanelBar_UnigolfBlack .rpDisabled:hover

{

cursor: default;

}

.RadPanelBar_UnigolfBlack .rpDisabled,

.RadPanelBar_UnigolfBlack .rpDisabled:hover,

.RadPanelBar_UnigolfBlack .rpDisabled:hover .rpOut

{

background-position: 0 0;

}

/* </root items (disabled)> */

/* <expand arrows> */

.RadPanelBar_UnigolfBlack .rpExpandable .rpText,

.RadPanelBar_UnigolfBlack .rpExpanded .rpText

{

padding-right: 20px;

background-repeat: no-repeat;

}

.RadPanelBar_UnigolfBlack_rtl .rpExpandable .rpText,

.RadPanelBar_UnigolfBlack_rtl .rpExpanded .rpText

{

padding-left: 20px;

}

.RadPanelBar_UnigolfBlack_rtl .rpGroup .rpText

{

padding: 0 10px;

}

.RadPanelBar_UnigolfBlack .rpExpandable .rpText { background-position: 100% 0; }

.RadPanelBar_UnigolfBlack .rpExpanded .rpText { background-position: 100% -176px; }

.RadPanelBar_UnigolfBlack_rtl .rpExpandable .rpText { background-position: 6px 0; }

.RadPanelBar_UnigolfBlack_rtl .rpExpanded .rpText { background-position: 6px -176px; }

/* </expand arrows> */

.RadPanelBar_UnigolfBlack .rpGroup .rpLink,

.RadPanelBar_UnigolfBlack .rpGroup .rpLink .rpOut { background-position: 0 200px; }

.RadPanelBar_UnigolfBlack .rpGroup .rpLink:hover,

.RadPanelBar_UnigolfBlack .rpGroup .rpFocused { background-position: 100% -22px; }

.RadPanelBar_UnigolfBlack .rpGroup .rpLink:hover .rpOut,

.RadPanelBar_UnigolfBlack .rpGroup .rpFocused .rpOut { background-position: 0 0; }

/* <subitems (selected)> */

.RadPanelBar_UnigolfBlack .rpGroup .rpSelected,

.RadPanelBar_UnigolfBlack .rpGroup .rpSelected:hover { background-position: 100% -222px; background-color: transparent; }

.RadPanelBar_UnigolfBlack .rpGroup .rpSelected .rpOut,

.RadPanelBar_UnigolfBlack .rpGroup .rpSelected:hover .rpOut { background-position: 0 -200px; }

/* </subitems (selected)> */

/* <subitems (expand arrows)> */

.RadPanelBar_UnigolfBlack .rpGroup .rpExpandable .rpText,

.RadPanelBar_UnigolfBlack .rpGroup .rpExpandable:hover .rpText { background-position: 100% -938px; }

.RadPanelBar_UnigolfBlack .rpGroup .rpExpanded .rpText,

.RadPanelBar_UnigolfBlack .rpGroup .rpExpanded:hover .rpText { background-position: 100% -1078px; }

.RadPanelBar_UnigolfBlack_rtl .rpGroup .rpExpandable .rpText,

.RadPanelBar_UnigolfBlack_rtl .rpGroup .rpExpandable:hover .rpText { background-position: 6px -938px; }

.RadPanelBar_UnigolfBlack_rtl .rpGroup .rpExpanded .rpText,

.RadPanelBar_UnigolfBlack_rtl .rpGroup .rpExpanded:hover .rpText { background-position: 6px -1078px; }

/* </subitems (expand arrows)> */

/* </background positioning> */

DIV.RadPanelBar_UnigolfBlack .rpRootGroup .rpLink {

FONT-WEIGHT: bold;

}

DIV.RadPanelBar_UnigolfBlack .rpRootGroup .rpLink:hover {

COLOR: #909A0E;

font-weight:bold;

background-image: url('PanelBar/SideBarSubMenuItemHover.png')!important;

height: 46px;

background-repeat: no-repeat;

}

PanelBar

answered on 23 Aug 2010

2 answers

149 views

Problems with grid alignment.

Hello,

I'm trying to set up a grid where the rows and columns are dynamically added at runtime, and the user can click the cells in the grid to select individual items. We used text boxes within the grid to do it and it works, but we are having issues with the grid alignment.

The second I turn on UseStaticHeaders="true" the columns are slightly offset to the headers when page is loaded, then if you scroll to the right on the grid and try to resize a column the alignment goes wonky.

Here is my grid code and most of my code behind (simplified down as much as possible to still show the issue)

<telerik:RadGrid ID="RadGridStandard" OnDataBinding="RadGridStandard_DataBinding"

runat="server" Skin="WebBlue" GridLines="None" Width="1100px" >

<MasterTableView EditMode="InPlace" TableLayout="Fixed" CommandItemDisplay="None" >

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="true" SaveScrollPosition="True" FrozenColumnsCount="1" >

</Scrolling>

<Resizing AllowColumnResize="True" EnableRealTimeResize="true" />

<ClientEvents />

</ClientSettings>

<SelectedItemStyle BackColor="#FF8080" />

</telerik:RadGrid

>




protected void Page_Load(object sender, EventArgs e) 
{ 
    DataTable dt = MapDataFromCollectionToGrid(Constants.SecurityMode.Standard); 
    RadGridStandard.PageSize = dt.Rows.Count; 
    RadGridStandard.DataSource = dt; 
    RadGridStandard.DataBind(); 
    SetUpKeys(RadGridStandard); 
} 
protected void RadGridStandard_DataBinding(object sender, EventArgs e) 
{ 
    for (int i = 0; i < RadGridStandard.PageSize; i++) 
    { 
        RadGridStandard.EditIndexes.Add(i); 
    } 
} 
private void SetUpKeys(RadGrid radGridSecurity) 
{ 
    radGridSecurity.ClientSettings.Scrolling.FrozenColumnsCount = 1; 
    radGridSecurity.CellPadding = 0; 
    // Attach the event handlers to the client side events of the TextBoxes.  
    foreach (GridDataItem item in radGridSecurity.MasterTableView.Items) 
    { 
        if (item != null) 
        { 
            for (int i = 2; i < radGridSecurity.MasterTableView.RenderColumns.Length; i++) 
            { 
                GridColumn column = radGridSecurity.MasterTableView.RenderColumns[i]; 
                if (item[column.UniqueName].Controls.Count > 0) 
                { 
                    column.HeaderStyle.Width = 90; 
                    item[column.UniqueName].Style["Padding"] = "0"; 
                    item[column.UniqueName].CssClass = "GridItem"; 
                    item[column.UniqueName].BorderColor = Color.LightGray; 
                    TextBox textBox = (item[column.UniqueName].Controls[0]) as TextBox; 
                    if ((textBox != null)) 
                    { 
                        textBox.ReadOnly = true; 
                        textBox.Attributes.Add("class", "readOnly"); 
                        textBox.CssClass = "GridAltRow_WebBlue"; 
                        textBox.BorderStyle = BorderStyle.None; 
                        textBox.Width = 90; 
                    } 
                } 
            } 
        } 
    } 
} 
private DataTable MapDataFromCollectionToGrid(string mode) 
{ 
    ApplicationRoleList applicationRoleColl = LoadRoles(); 
    DataTable dt = new DataTable(); 
    //Set the columns 
    dt.Columns.Add("PageName"); 
    foreach (ApplicationRoleType appRole in applicationRoleColl) 
    { 
        dt.Columns.Add(appRole.Name); 
    } 
    ApplicationPageRoleCollection appPageRoles = LoadPageRoles(mode); 
    string laststring = string.Empty; 
    //Set the rows has to be sorted by pagename 
    foreach (ApplicationPageRoleType d in appPageRoles) 
    { 
        if (d.PageName != laststring) 
        { 
            DataRow drGridRow = dt.NewRow(); 
            dt.Rows.Add(drGridRow); 
            drGridRow["PageName"] = d.PageName; 
        } 
        if (d.RoleName == "") 
        { 
            d.RoleName = Constants.SecurityMode.Administrator; 
        } 
        dt.Rows[dt.Rows.Count - 1][d.RoleName] = d.AccessLevel; 
        laststring = d.PageName; 
    } 
    return dt; 
}

Grid

answered on 23 Aug 2010

7 answers

161 views

Is this even possible?

I have a basic RadGrid (no heirarchy etc.) on a page, with sort, filter and paging enabled and it is associated with a sqldatasource (SELECT * FROM table1), autogeneratecolumns is set to true.

When I select a value from a dropdownlist I programatically change the datasource select string to another value (SELECT * FROM table2) and then databind the grid to change the columns etc.

The table appears to update successfully, showing the columns from the new table. But when I click on a header to sort a column, I get an error saying "Column not found" for that column name.

a) Does anybody know what is causing this?

b) Is there any way to perform the equivalent of a "Refresh schema" on the RadGrid so that it "resets" itself internally to match the new table?

Grid

answered on 23 Aug 2010

1 answer

71 views

Treeview bug with TriStateCheckBoxes=true and intermediate levels Checkable=false

Hi,

I have a treeview with four levels (1 - 4), CheckBoxes="true" and TriStateCheckBoxes="true". If I make level 2 and 3 Checkable = false, and I have an unchecked level 4 node, its parent level 1 node doesn't shows as indeterminate. But if I check and uncheck that level 4 node, level 1 updates correctly

It's that really a bug?

Rubens

TreeView

answered on 23 Aug 2010

8 answers

325 views

[Solved] Update validation group rad tabstrip

Hi,

We used to be able to use the following script to change the validation group each time a user clicks another tab:

function UpdateValidationGroup()
{
var tabStrip = <%=RadTabStrip1.ClientID%>;
tabStrip.ValidationGroup = tabStrip.SelectedTab.Value;
}

</script>

Currently our company is in the process of buying asp.net ajax 2009 Q1 controls and it seems that the script does not apply anymore.
Can you please help?
We have a tabstrip with four tabs. Each one with it's corresponding pageview with a set of controls. We would like to make each tab validate separately (for which we assigned a different validation group, and even a differente validation summary)
We set Radtabstrip has causesValidation=true

What are we missing here?

TabStrip

answered on 23 Aug 2010

1 answer

116 views

RadTabStrip - load on demand

Hello:

We are using Telerik v2009Q2; the business scenario is as follows:

1. RadTabStrip contains 2 RadTabs;
2. Each RadTab has 1 RadGrid;
3. Business wants data to be available only in RadTab-0 on load;
4. When user selects RadTab-1, it will load data, using AJAX;

Here is the problem we are facing:

. When user selects RadTab-1, the data in RadTab-0 gets cleared;

Note: We have tried a lot of combinations while calling AjaxSettingsCollection.AddAjaxSetting() method, but end result is always the same.

Will appreciate if a solution is provided.

Thanks .. Rohit Dehar

TabStrip

answered on 23 Aug 2010

1 answer

101 views

Changing a charts dimensions etc

Hi All,

I currently have a command that enlarges a dock to a bigger size. I want to make the small chart I have made to enlarge as well while still being legible. I can't get my head round where to start and preferably would like to do it without using a postback, please reply ASAP if you can I have attached 2 images so you can see what I mean by filling chart to the dock size.

many regards for your ongoing support,

Ash

Chart (Obsolete)

answered on 23 Aug 2010

1 answer

87 views

a s p x DOCTYPE

I have two web pages that each use the radpanelbar. Each page is setup the same as far as the panel bar. The only difference is the aspx "doctype". If I use the version HTML 4.0 doctype, then the panelbar works great. If I use the XHTML 1.0, then the bar will not work at all. In fact IE goes to lunch and I have to kill the process from the task manager.

Can anyone explain why the radpanelbar will work with this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

but won't work with this

<!

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

PanelBar

answered on 23 Aug 2010

3 answers

133 views

[Solved] Sort by Value

Rather than sorting my listboxes by the Text property of the ListBoxItems, I want to use the Value property.

I understand that I'm going to have to do that server-side and I have no problem with that it's just that the following seems a lot of work...

public partial class HierarchyMaintenance : System.Web.UI.Page

{

protected void ListBox_Transferred(object sender, RadListBoxTransferredEventArgs e)

{

e.DestinationListBox.Items.Sort(new ListBoxValueComparer());

}

public class ListBoxValueComparer : System.Collections.IComparer

{

int System.Collections.IComparer.Compare(Object x, Object y)

{

string xValue = (x as RadListBoxItem).Value;

string yValue = (y as RadListBoxItem).Value;

return Comparer.DefaultInvariant.Compare(xValue, yValue);

}

And if I want to sort by an attribute I would have to create a comparer for each one.

It would be nice to be just able to write something like ...

e.DestinationListBox.Items = 

e.DestinationListBox.Items.OrderBy(i=>i.Attributes[

"MyAttribute"]);

Or have I missed something?

--
Stuart

ListBox

answered on 23 Aug 2010

1 answer

84 views

DetailsTable with different datasources

I have a single details table with AutoGenerateColumns="true" as I would like the datasource of the details table to depend on what parent item was clicked. However, the details table seem to take structure (column setup) once (at first databind) and then stick with this structure.

Can I have one details table take structure at run time every time the details table is databound?

Grid

answered on 23 Aug 2010