DataGrid CSS not working - Sitefinity - Front- & Back-End Development

All Replies

Posted by Community Admin on 01-Apr-2011 00:00

For 3.7 we have created custom skin that is using various css files for different controls. For grid we have css and that css is applied to the datagrid control. This is working fine on 3.7. Please refer the attached 3.7DataGrid.png file.

For 4.0 we learned that Sitefinity does not support custom skins(please correct if I am wrong). So our existing skins not working neither the css is applied to datagrid. To workaround we tried to apply the Theme to page template and that theme has global folder where we have added all the css but the datagrid is not using the css. I am not sure how the css files from Global would be applied on the pages.

Alternately We have then added css class to individual user control but still not luck. Please refer to 4.0DataGrid.png file to see how the grid is looking. 4.0DatagridConfig.png for control and its configuration and “4.0SitefinityThemeConfig.png” for the folder structure of theme and the same theme applied on the Page template.
Please let me know the workaround or something I am missing.

Regards

Sham

Posted by Community Admin on 07-Apr-2011 00:00

Hi Sham,

Can you confirm that the CSS class property is applied and the CSS file is loaded properly. If so, there shouldn't be a problem. If not - one of these actions is not done correctly. Please check this so we can go deeper.

Greetings,
Jordan
the Telerik team

Posted by Community Admin on 07-Apr-2011 00:00

Hi Jorden,

please refer my attachments i took using firebug. with 3.7 the GridHeader class is getting applied(refer firebugdatagrid3.7.png) because custom skin has all the configuration regarding the grid behavior.

Following is the code from Skin

<asp:DataGrid runat="server" AutoGenerateColumns="False" CssClass="data-form" >
    <FooterStyle CssClass="GridFooter" />
    <AlternatingItemStyle CssClass="GridAlternatingRow" />
    <ItemStyle CssClass="GridRow" />
    <PagerStyle CssClass="GridPager" />
    <HeaderStyle CssClass="GridHeader" />
</asp:DataGrid>

but since the skin is not getting applied on 4.0. (refer firebugdatagrid4.0.png) the grid doesn not displayed properly. i am not able to find way to apply the class for the Datagrid. please let me know how i should apply the class to datagrid

i have following option
1. Add the class to each usercontrol and upload the control to Sitefinity but this process would take a lot time since i have hundreds of controls. i tried for single grid and it works. but need better way from support team.

regards

Sham

Posted by Community Admin on 07-Apr-2011 00:00

Hello Sham,

I am not able to replicate this issue when the css is properly locaded

<asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="True" CssClass="data-form" PageSize="2">

<FooterStyle CssClass="GridFooter" />

<AlternatingItemStyle CssClass="GridAlternatingRow" />

<ItemStyle CssClass="GridRow" />

<PagerStyle CssClass="GridPager" />

<HeaderStyle CssClass="GridHeader" />

</asp:DataGrid>

var list = new List<String>();

for (int i = 0; i < 20; i++)

list.Add(i.ToString());

DataGrid1.DataSource = list;

DataGrid1.DataBind();

css

.data-form

background-color:Red !important;

.GridFooter

background-color:Blue!important;

.GridAlternatingRow

background-color:Green!important;

I attached a short video that illustrates this.

Greetings,
Ivan Dimitrov
the Telerik team

Posted by Community Admin on 07-Apr-2011 00:00

Hi Ivan,

Sorry if i haven't explained my problem clearly. i already mentioned that if i apply the cssClass to DataGrid control it is working fine. but since my website is having hundreds of DataGrid i cannot use following approach.

<asp:DataGrid ID="DataGrid1" runat="server" AutoGenerateColumns="True" CssClass="data-form" PageSize="2">

<FooterStyle CssClass="GridFooter" />

<AlternatingItemStyle CssClass="GridAlternatingRow" />

<ItemStyle CssClass="GridRow" />

<PagerStyle CssClass="GridPager" />

<HeaderStyle CssClass="GridHeader" />

</asp:DataGrid>

i tried adding the CSS to Template as you shown in the video but it is not working. My 3.7 site working fine with Custom skin why the similar thing i cannot do with 4.0? above method may not be best fit for my requirement. i want a way so that i apply CSS/Skin at one level and it applies to all DataGrids on my website

Thanks in Advance for your suggestion

Sham

Posted by Community Admin on 07-Apr-2011 00:00

Hi Sham,

Technically the widget that I am using - CSS widget allow you to inject and css file to the page. Another option is using css that comes from your stylesheet, so if the css is loaded on the page it should apply which my video clearly shows

Greetings,
Ivan Dimitrov
the Telerik team

Posted by Community Admin on 07-Apr-2011 00:00

Hi Ivan,

Reply from Telerik team FYI.

This is a known issue. It is logged as bug and you can track its status from our public issue tracking system(http://www.telerik.com/support/pits.aspx#/public/sitefinity/5443). Unfortunately, there is no work around for that problem and data-grids, drop-downs, textbox, buttons, etc. properties have to be set on user control level.

Regards,
Katia
the Telerik team

This thread is closed