This is a migrated thread and some comments may be shown as answers.

GridDataItem CssClass Set in ItemDataBound Event Replaces Skin CssClass

13 Answers 1330 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Theodora asked on 21 Jan 2008, 10:13 PM

I am currently using RadGrid for ASP.NET in my production environment and am trying to make the transition to the Prometheus controls, specifically with the RadGrid control.

I have created a custom skin using the Office2007 as a template and changing minor things like font size, color, some images, etc. For the row css classes, the only difference between GridRow and GridAltRow is the background colour (white or gray) and font colour.

    
            .GridRow_TelerikCustomSkin td 
        
            { 
        
                background-color:White; 
        
                color: #333333; 
        
                border-bottom: 1px solid #dedede; 
        
                border-right: 1px solid white; 
        
                padding-top:4px; 
        
                padding-bottom:4px; 
        
            } 
        
            .GridAltRow_TelerikCustomSkin td 
        
            { 
        
                background-color:#f2f2f2; 
        
                border-right: solid 1px #f2f2f2; 
        
                border-bottom: solid 1px #dedede; 
        
                padding-top:4px; 
        
                padding-bottom:4px; 
        
            }

In the current version of RadGrid for ASP.NET, I can customize the cssclass for certain records in the ItemDataBound event (e.g. showing cancelled records in red font, etc.) A custom cssclass like statusPurchaseOrderCancelled would look like this -

    
            .statusPurchaseOrderCancelled td 
        
            { 
        
                color: red;     
        
                font-style: italic; 
        
            }

The original skin cssclass for each row would be preserved such that if it is a GridRow, it would still show up with a white background and the new red and italic font and if it is a GridAltRow, it would show up with a gray background with the new red and italic font. So the statusPurchaseOrderCancelled cssclass seemed to be APPENDED to any existing ones.

Unfortunately the new Prometheus controls don't work the same way and instead the new cssclass REPLACES the original GridRow_TelerikCustomSkin or GridAltRow_TelerikCustomSkin so that the default background colour, row height and padding is lost. In order to preserve the existing styling functionality I would have to create two css classes for every record "status" with each one duplicating the properties of the original class except for font color. For example there would be a statusPurchaseOrderCancelled_GridRow and statusPurchaseOrderCancelled_GridAltRow and I would have to add case statements in the ItemDataBound event to determine which one to use.

Is this the intended functionality of the Prometheus controls?

13 Answers, 1 is accepted

answered on 25 Jan 2008, 01:02 PM

117803_grid.zip

Hello Theodora,

I tested with both RadGrid for ASP.NET and RadGrid Prometheus and tried adding a CSS class to grid items in both the ASPX file and code-behind. However, the two controls exhibited the same behavior - the CSS class was appended when being added in the ASPX and it was replaced when being added in the code-behind. Both results are an expected behavior.

I used the following code:

==========

ASPX:

<MasterTableView>
<ItemStyle CssClass="test1" />
<AlternatingItemStyle CssClass="test2" />
</MasterTableView>

===========

CODE-BEHIND:

protected void RadGrid_ItemDataBound(object sender, Telerik.WebControls.GridItemEventArgs e)
{
        if (e.Item is GridDataItem)
        {
            e.Item.CssClass += " test";
        }
}

===========

Afterwards, I succeeded in making RadGrid append the CSS classname in the code behind. I have attached a simple project, showing how to do it (Prometheus assemblies are not included).

We will appreciate it if you provide some more information about what code you are using that causes different behavior in RadGrid for ASP.NET and Prometheus. Thank you in advance.

All the best,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 31 Jan 2008, 05:27 PM

I've played around with the sample you provided and I believe I have found the property that produces the behaviour I described.

It is -

    
            <ClientSettings ApplyStylesOnClient="True"></ClientSettings>

I've modified your sample with the following changes -

1. Change css declaration to

    
            <style type="text/css">  
        
            .Test td  
        
            {  
        
                background: white;  
        
            }  
        
            .altTest td  
        
            {  
        
                background:#ddf;  
        
            }  
        
            .yellowfont td  
        
            {  
        
                color: yellow;  
        
            }  
        
            </style>

2. Change Skin for Prometheus grid from "Telerik" to "" (to eliminate any interference). New code is shown below

    
            <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="XmlDataSource1" Skin="" OnItemDataBound="RadGrid1_ItemDataBound">  
        
                    <MasterTableView> 
        
                        <ItemStyle CssClass="Test" /> 
        
                        <AlternatingItemStyle CssClass="altTest" />           
        
                    </MasterTableView> 
        
                    <ClientSettings ApplyStylesOnClient="True"></ClientSettings> 
        
                </telerik:RadGrid>

3. Add new RadGrid for ASP.NET grid with the same settings as RadGrid1 right below (for easy comparison when rendered)

    
            <radG:RadGrid ID="RadGrid2" runat="server" DataSourceID="XmlDataSource1" Skin="None" OnItemDataBound="RadGrid2_ItemDataBound">  
        
                    <MasterTableView> 
        
                        <ItemStyle CssClass="Test" /> 
        
                        <AlternatingItemStyle CssClass="altTest" />           
        
                    </MasterTableView> 
        
                    <ClientSettings ApplyStylesOnClient="True"></ClientSettings> 
        
                </radG:RadGrid>

4. Change .cs code as follows

    
            protected void RadGrid1_ItemDataBound(object sender, Telerik.Web.UI.GridItemEventArgs e)  
        
                {  
        
                    if (e.Item is GridDataItem)  
        
                    {  
        
                        if (e.Item.ItemIndex % 3 == 0)  
        
                            e.Item.CssClass = "yellowfont";  
        
                    }  
        
                }  
        
                protected void RadGrid2_ItemDataBound(object sender, Telerik.WebControls.GridItemEventArgs e)  
        
                {  
        
                    if (e.Item is Telerik.WebControls.GridDataItem)  
        
                    {  
        
                        if (e.Item.ItemIndex % 3 == 0)  
        
                            e.Item.CssClass = "yellowfont";  
        
                    }  
        
                }

When you load the page, you will notice that in RadGrid2 (ASP.NET), the background colour is preserved and only the font colour changes. This is the behaviour I am looking for and which I am currently utilizing in my production environment. I am NOT appending the new cssclass (so the code is NOT e.Item.CssClass = "altTest yellowfont") it is automatically done by the control.

In RadGrid1 (Prometheus), the background colour is lost when the font colour is yellow, which tells me that the cssclass is replaced, not appended as in RadGrid2.

I hope this helps. If you are unable to reproduce, please let me know.

answered on 07 Feb 2008, 06:17 PM

Thank you Dimo.

A related problem (I think) happens when selecting a default record in the PreRender event. I have to have a record selected at all times and using the sample provided in your help files this has worked fine with the RadGrid for ASP.NET but does not work in the new Prometheus grid.

You can further modify the previous code as follows to reproduce -

1. Add new cssclass for selected records

    
            .selectedRecord td  
        
            {  
        
                background-color: green;  
        
            }

2. Add the following properties to the respective grids

OnPreRender="RadGrid1_PreRender"
OnPreRender="RadGrid2_PreRender"

3. Add the PreRender event in the .cs page

    
            protected void RadGrid1_PreRender(object sender, System.EventArgs e)  
        
                {  
        
                    if (RadGrid1.SelectedItems.Count == 0)  
        
                        if (RadGrid1.Items.Count > 0)  
        
                            RadGrid1.MasterTableView.Items[0].Selected = true;  
        
                }  
        
                protected void RadGrid2_PreRender(object sender, System.EventArgs e)  
        
                {  
        
                    if (RadGrid2.SelectedItems.Count == 0)  
        
                        if (RadGrid2.Items.Count > 0)  
        
                            RadGrid2.MasterTableView.Items[0].Selected = true;  
        
                }

4. Optionally, add the AllowRowSelect="true" so that the ClientSettings look like -

    
            <ClientSettings ApplyStylesOnClient="True">       
        
                        <Selecting AllowRowSelect="true" /> 
        
                    </ClientSettings>

You will notice that RadGrid1 (Prometheus) does NOT select the first record on the first load, but RadGrid2 (ASP.NET) does.

Hope this explanation is clear.

Thanks.

answered on 13 Feb 2008, 08:08 AM

074257_117803_grid-2.zip

Hi Theodora,

Since I cannot observe any problems, I have uploaded a screenshot as well as a sample project for your reference. Please take a look at them and let me know if I am missing something out.

Regards,
Pavel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 13 Feb 2008, 03:28 PM

Hi Pavel,

Yes, I see that the row is selected in your sample, but there are two problems/differences with the code you sent compared with the sample I laid out in previous posts.

1. As-is, the OnItemDataBound event is missing from your aspx pages. If I run the pages as you have sent them, then yes the first record is selected on the Prometheus grid, but try clicking on another record and you will notice that the first record is NOT deselected. I don't know if this is a related problem or another one altogether.

2. After adding the OnItemDatabound event to both grids, you can clearly see that the first row is not selected as I originally stated.

I also noticed that the dll version you are using is your project sample is 2007.3.1314.20 with a build date of 1/14/2008 which is not yet available for download under Client.net. The version I have been using is the latest official release of 2007.3.1218.20 with a build date of 12/17/2007. In this particular scenario I don't think the dll versions would have made a difference, but I imagine that this may not always be the case.

It takes a lot of time and effort to report bugs and post messages and I would appreciate it if in the future you could take an extra minute to make sure that when you say you cannot reproduce a problem, that you make sure are working with the same dll versions, same code and same scenarios as the one reported to eliminate any confusion.

Thanks.

answered on 14 Feb 2008, 07:30 AM

Screenshot.zip

Hi Theodora,

I apologize for that oversight on my part. Indeed you are right and when another style is applied on the ItemDataBound event, the SelectedItemStyle is not correctly applied. I have logged the issue in our bug-tracking system and our developers will fix it. As a token of gratitude for your effort and feedback I have also updated your Telerik points.

Regarding the latest official version, the .dll I sent with the project is exactly that, released on the 15th of January this year. You can download it from your Client.net account and I have attached a screenshot to demonstrate it.

Let me know if further questions arise.

Greetings,
Pavel
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 20 Mar 2008, 07:32 AM

Hi prashanth,

To modify an existing grid skin in par with your preferences, refer to these articles in the product documentation:

http://www.telerik.com/help/radcontrols/prometheus/?grdCreatingNewSkins.html
http://www.telerik.com/help/radcontrols/prometheus/?grdSkins.html
http://www.telerik.com/help/radcontrols/prometheus/?CreateCustomSkin.html

The relevant sections from the RadGrid Classic help are listed below:

http://www.telerik.com/help/aspnet/grid/?grdCreatingNewSkins.html
http://www.telerik.com/help/aspnet/grid/?grdSkins.html

Regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

answered on 21 Mar 2008, 10:51 AM

Hello Stephen,
Thanks for the mail and the links. But for me still i didnt found answer to my question
I am looking for Cell spacing=1 and BorderColor="#383839"
as exact as this

<asp:GridView ID="GridView1"
style="font-family:vrinda; color:#FF0000; font-size:12px; text-align:left;" runat="server" Width="868px" BorderColor="#383839" BorderWidth="0px" ForeColor="White" Height="180px" CellPadding="0" CellSpacing="1" Font-Names="Vrinda" Font-Size="13px" BorderStyle="None" HorizontalAlign="Left" OnSelectedIndexChanged="GridView1_SelectedIndexChanged"><HeaderStyle BackColor="Red" ForeColor="White" Font-Names="Vrinda" Font-Size="13px" HorizontalAlign="Center" /><AlternatingRowStyle Font-Names="Vrinda" BorderWidth="1px" ForeColor="White" /><RowStyle ForeColor="White" BackColor="Silver" HorizontalAlign="Center" Font-Size="14px" Font-Underline="False" /><EditRowStyle ForeColor="Blue" /</asp:GridView>

my current RAdgrid, monochrome serves all the reqd thing, just only the vertical and column line color is white, i want to make it gray. I tried a lot but no luck. If you can guide me it will be a great help.

current rad grid is this. Plz tell me wt else i need to change.

radG:RadGrid ID="RadGrid1" runat="server" EnableAJAX="True" BackColor="#383839"

AllowPaging="True" PageSize="10"

OnDeleteCommand="RadGrid1_DeleteCommand"

OnUpdateCommand="RadGrid1_UpdateCommand"

OnInsertCommand="RadGrid1_InsertCommand"

OnNeedDataSource="RadGrid1_NeedDataSource"

ToolTip="Customer Details"

HeaderStyle-Font-Underline="false" ActiveItemStyle-BackColor="#383839" ItemStyle-BackColor="#383839" MasterTableView-BackColor="#383839" Width="476px"

CellPadding="0" ForeColor="#383839" BackImageUrl="~/images/LOGO.gif" Skin="Monochrome" Height="18px" Font-Names="Vrinda">

<MasterTableView DataKeyNames="Id" Name="CustomerTableView" AutoGenerateColumns="False"

BackColor="#383839">

<radG:GridEditCommandColumn ButtonType="ImageButton" >

</radG:GridEditCommandColumn>

<radG:GridButtonColumn ConfirmText="Delete this Customer?" ButtonType="ImageButton" ImageUrl="~/RadControls/Grid/Skins/Default/Delete.gif" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn">

</radG:GridButtonColumn>

<radG:GridBoundColumn DataField="Id" DataType="System.Int32" HeaderText="Id"

ReadOnly="True" Visible="False" SortExpression="Id" UniqueName="Id">

</radG:GridBoundColumn>

<radG:GridDropDownColumn DataField="RoleId" DataSourceID="SqlDataSource3"

HeaderText="Role" ListTextField="RoleName" ListValueField="RoleId"

UniqueName="RoleId">

</radG:GridDropDownColumn>

<radG:GridCheckBoxColumn DataField="Active" HeaderText="Active" SortExpression="Active"

UniqueName="Active">

</radG:GridCheckBoxColumn>

<radG:GridBoundColumn DataField="UserName" HeaderText="UserName" SortExpression="UserName"

UniqueName="UserName">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Password" HeaderText="Password" SortExpression="Password"

UniqueName="Password">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Name" HeaderText="Name" SortExpression="Name"

UniqueName="Name">

</radG:GridBoundColumn>

<radG:GridCheckBoxColumn DataField="Gender" ReadOnly="True" HeaderText="Gender" SortExpression="Gender"

UniqueName="Gender">

</radG:GridCheckBoxColumn>

<radG:GridBoundColumn DataField="Office_E_Mail" ReadOnly="True" HeaderText="Office EMail" SortExpression="Office_E_Mail"

UniqueName="Office_E_Mail">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Office_Phone_Number" ReadOnly="True" HeaderText="Off Phone No." SortExpression="Office_Phone_Number"

UniqueName="Office_Phone_Number">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Mobile_Number" ReadOnly="True" HeaderText="Mobile Number" SortExpression="Mobile_Number"

UniqueName="Mobile_Number" >

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Home_Phone_Number" ReadOnly="True" HeaderText="Home Phone No." SortExpression="Home_Phone_Number"

UniqueName="Home_Phone_Number">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Home_Address" ReadOnly="True" HeaderText="Home Address" SortExpression="Home_Address"

UniqueName="Home_Address">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Post_Code" ReadOnly="True" HeaderText="Post_Code" SortExpression="Post_Code"

UniqueName="Post_Code">

</radG:GridBoundColumn>

</Columns>

</ExpandCollapseColumn>

</RowIndicatorColumn>

</EditColumn>

</EditFormSettings>

<CommandItemSettings AddNewRecordImageUrl="RadControls/Grid/Skins/Brick/AddRecord.gif"

RefreshImageUrl="RadControls/Grid/Skins/Brick/Refresh.gif" />

</MasterTableView>

</GroupPanel>

</radG:RadGrid>

radG:RadGrid ID="RadGrid1" runat="server" EnableAJAX="True" BackColor="#383839"

AllowPaging="True" PageSize="10"

OnDeleteCommand="RadGrid1_DeleteCommand"

OnUpdateCommand="RadGrid1_UpdateCommand"

OnInsertCommand="RadGrid1_InsertCommand"

OnNeedDataSource="RadGrid1_NeedDataSource"

ToolTip="Customer Details"

HeaderStyle-Font-Underline="false" ActiveItemStyle-BackColor="#383839" ItemStyle-BackColor="#383839" MasterTableView-BackColor="#383839" Width="476px"

CellPadding="0" ForeColor="#383839" BackImageUrl="~/images/LOGO.gif" Skin="Monochrome" Height="18px" Font-Names="Vrinda">

<MasterTableView DataKeyNames="Id" Name="CustomerTableView" AutoGenerateColumns="False"

BackColor="#383839">

<radG:GridEditCommandColumn ButtonType="ImageButton" >

</radG:GridEditCommandColumn>

</radG:GridButtonColumn>

<radG:GridBoundColumn DataField="Id" DataType="System.Int32" HeaderText="Id"

ReadOnly="True" Visible="False" SortExpression="Id" UniqueName="Id">

</radG:GridBoundColumn>

<radG:GridDropDownColumn DataField="RoleId" DataSourceID="SqlDataSource3"

HeaderText="Role" ListTextField="RoleName" ListValueField="RoleId"

UniqueName="RoleId">

</radG:GridDropDownColumn>

<radG:GridCheckBoxColumn DataField="Active" HeaderText="Active" SortExpression="Active"

UniqueName="Active">

</radG:GridCheckBoxColumn>

<radG:GridBoundColumn DataField="UserName" HeaderText="UserName" SortExpression="UserName"

UniqueName="UserName">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Password" HeaderText="Password" SortExpression="Password"

UniqueName="Password">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Name" HeaderText="Name" SortExpression="Name"

UniqueName="Name">

</radG:GridBoundColumn>

<radG:GridCheckBoxColumn DataField="Gender" ReadOnly="True" HeaderText="Gender" SortExpression="Gender"

UniqueName="Gender">

</radG:GridCheckBoxColumn>

<radG:GridBoundColumn DataField="Office_E_Mail" ReadOnly="True" HeaderText="Office EMail" SortExpression="Office_E_Mail"

UniqueName="Office_E_Mail">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Office_Phone_Number" ReadOnly="True" HeaderText="Off Phone No." SortExpression="Office_Phone_Number"

UniqueName="Office_Phone_Number">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Mobile_Number" ReadOnly="True" HeaderText="Mobile Number" SortExpression="Mobile_Number"

UniqueName="Mobile_Number" >

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Home_Phone_Number" ReadOnly="True" HeaderText="Home Phone No." SortExpression="Home_Phone_Number"

UniqueName="Home_Phone_Number">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Home_Address" ReadOnly="True" HeaderText="Home Address" SortExpression="Home_Address"

UniqueName="Home_Address">

</radG:GridBoundColumn>

<radG:GridBoundColumn DataField="Post_Code" ReadOnly="True" HeaderText="Post_Code" SortExpression="Post_Code"

UniqueName="Post_Code">

</radG:GridBoundColumn>

</Columns>

</ExpandCollapseColumn>

</RowIndicatorColumn>

</EditColumn>

</EditFormSettings>

<CommandItemSettings AddNewRecordImageUrl="RadControls/Grid/Skins/Brick/AddRecord.gif"

RefreshImageUrl="RadControls/Grid/Skins/Brick/Refresh.gif" />

</MasterTableView>

</GroupPanel>

</radG:RadGrid>

Thanks & Regards,
Prashanth Kumar G.

answered on 21 Mar 2008, 12:26 PM

Hello Prashanth,

You can specify CellSpacing in the MasterTableView tag :

As for the border-color, the best way to have a custom border color is to edit the skin CSS file. Please open the Monochrome CSS file and locate the following code :

.GridRow_Monochrome td,
.GridAltRow_Monochrome td,
.SelectedRow_Monochrome td,
.ActiveRow_Monochrome td,
.GridEditRow_Monochrome td
{
	border-bottom:1px solid #d3d3d3;
	padding-top:4px;
	padding-bottom:5px;
}

Then replace it with the following:

.GridRow_Monochrome td,
.GridAltRow_Monochrome td,
.SelectedRow_Monochrome td,
.ActiveRow_Monochrome td,
.GridEditRow_Monochrome td
{
 border-right:1px solid #383839;        border-bottom:1px solid #383839;

	padding-top:4px;
	padding-bottom:5px;
}

This should do the work.

Best wishes,
Dimo
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center