+1-888-365-2779
Try Now
More in this section

Forums / Designing & Styling / DataGrid CSS not working

DataGrid CSS not working

7 posts, 0 answered
  1. Sham
    Sham avatar
    27 posts
    Registered:
    08 Dec 2010
    01 Apr 2011
    Link to this post

    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

  2. Jordan
    Jordan avatar
    172 posts
    Registered:
    20 Oct 2015
    07 Apr 2011
    Link to this post
    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

  3. Sham
    Sham avatar
    27 posts
    Registered:
    08 Dec 2010
    07 Apr 2011
    Link to this post
    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
  4. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    07 Apr 2011
    Link to this post
    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

  5. Sham
    Sham avatar
    27 posts
    Registered:
    08 Dec 2010
    07 Apr 2011
    Link to this post
    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
  6. Ivan Dimitrov
    Ivan Dimitrov avatar
    16072 posts
    Registered:
    25 Nov 2016
    07 Apr 2011
    Link to this post
    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

  7. Sham
    Sham avatar
    27 posts
    Registered:
    08 Dec 2010
    07 Apr 2011
    Link to this post
    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

     
7 posts, 0 answered