BuyLog In
Ticket T186385
Visible to All Users
Duplicate

We have closed this ticket because another page addresses its subject:

How to inspect CSS rules

GridView - How to customize CSS

created 10 years ago

Hi,

I am trying to dynamically set the css style of a gridview heading. The headings are going to change on different pages so i cannot used a standard theme.

I have looked through alot of the previous support tickets and everything i have tried has failed. Please see code below.

C#
@{  
    var grid = Html.DevExpress().GridView(settings => {  
        settings.Name = "gvItemsToBuy";  
        settings.CallbackRouteValues = new { Controller = "Home", Action = "GridViewPartial" };  

        settings.SettingsEditing.BatchUpdateRouteValues = new { Controller = "Home", Action = "GridViewPartialUpdate" };  
        settings.SettingsEditing.Mode = GridViewEditingMode.Batch;  

        settings.CommandColumn.Visible = true;  
        settings.CommandColumn.ShowSelectCheckbox = true;  
        settings.CommandColumn.Width = System.Web.UI.WebControls.Unit.Pixel(50);  
        settings.Settings.ShowHeaderFilterButton = true;  
        settings.RightToLeft = DefaultBoolean.False ;  
        settings.Styles.Cell.Font.Size = 8;  
        settings.KeyFieldName = "Plants";  

        settings.SettingsPager.Visible = true;  
        settings.Settings.ShowGroupPanel = true;  
        settings.Settings.ShowFilterRow = true;  
        settings.SettingsBehavior.AllowSelectByRowClick = true;  
        settings.SettingsBehavior.AllowSelectSingleRowOnly = false;  

        settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);  
        settings.Settings.HorizontalScrollBarMode = ScrollBarMode.Visible;  
        settings.Styles.HeaderFilterItem.CssClass = "dxgvControl MVCxGridViewHeader1";  
        settings.Styles.Header.CssClass = "dxgvControl MVCxGridViewHeader1";  



        settings.Columns.Add(column =>  
        {  
            column.FieldName = "Plants";  
            column.Width = System.Web.UI.WebControls.Unit.Pixel(65);  
            column.EditFormSettings.Visible = DefaultBoolean.False;  
        });  
});  
        if (ViewData["EditError"] != null){  
        grid.SetEditErrorText((string)ViewData["EditError"]);  
    }  
}  
@grid.Bind(Model).GetHtml()

I have tried setting the style as above using headerfilteritem, header, both. I want to be able to set the colours and the header filter image.

CSS Style - Placed in Site.css but Want to create a Seperate stylesheet, Gridviews.css
.dxgvControl MVCxGridViewHeader1{
    background-color: seagreen;
    color: lightgreen;
}

Thanks in advance

Sign in to comment on this post

Answers approved by DevExpress Support

created 10 years ago

Hello Kevin,

Try to use the following CSS rules to customize the GridView header:

CSS
.MVCxGridViewHeader1, .MVCxGridViewHeader1 td {  
    background-color: seagreen;  
    color: lightgreen;  
}  
C#
settings.Styles.HeaderFilterItem.CssClass = "MVCxGridViewHeader1";  
settings.Styles.Header.CssClass = "MVCxGridViewHeader1";

I also suggest that you examine the K18570: How to inspect CSS rules KB article that shows how to examine CSS rules manually.

    Comments (2)
    KW KW
    Kevin Wall 10 years ago

      The settings.Styles.Header.CssClass worked perfectly, thank you. I am still having trouble changing the filter button's css following K18570 as you suggested and it will not change.
      If i change the url in Chrome developer tools it changes fine but when i try to change it in my css it does not change?
      From Chrome:
      .dxGridView_gvHeaderFilter_SoftOrange {
      background-position: -23px 0px;
      width: 21px;
      height: 21px;
      }
      .dxGridView_gvCellError_SoftOrange, .dxGridView_gvCMClearFilter_SoftOrange, .dxGridView_gvCMClearGrouping_SoftOrange, .dxGridView_gvCMCollapseDetailRow_SoftOrange, .dxGridView_gvCMCollapseDetailRowDisabled_SoftOrange, .dxGridView_gvCMCollapseRow_SoftOrange, .dxGridView_gvCMCollapseRowDisabled_SoftOrange, .dxGridView_gvCMDeleteRow_SoftOrange, .dxGridView_gvCMEditRow_SoftOrange, .dxGridView_gvCMExpandDetailRow_SoftOrange, .dxGridView_gvCMExpandDetailRowDisabled_SoftOrange, .dxGridView_gvCMExpandRow_SoftOrange, .dxGridView_gvCMExpandRowDisabled_SoftOrange, .dxGridView_gvCMFullCollapse_SoftOrange, .dxGridView_gvCMFullExpand_SoftOrange, .dxGridView_gvCMGroupByColumn_SoftOrange, .dxGridView_gvCMNewRow_SoftOrange, .dxGridView_gvCMRefresh_SoftOrange, .dxGridView_gvCMShowCustomizationWindow_SoftOrange, .dxGridView_gvCMShowFilterEditor_SoftOrange, .dxGridView_gvCMShowGroupPanel_SoftOrange, .dxGridView_gvCMSortAscending_SoftOrange, .dxGridView_gvCMSortDescending_SoftOrange, .dxGridView_gvCMSummaryAverage_SoftOrange, .dxGridView_gvCMSummaryCount_SoftOrange, .dxGridView_gvCMSummaryMax_SoftOrange, .dxGridView_gvCMSummaryMin_SoftOrange, .dxGridView_gvCMSummarySum_SoftOrange, .dxGridView_gvCMUngroupColumn_SoftOrange, .dxGridView_gvCollapsedButton_SoftOrange, .dxGridView_gvCollapsedButtonRtl_SoftOrange, .dxGridView_gvDetailCollapsedButton_SoftOrange, .dxGridView_gvDetailCollapsedButtonRtl_SoftOrange, .dxGridView_gvDetailExpandedButton_SoftOrange, .dxGridView_gvDetailExpandedButtonRtl_SoftOrange, .dxGridView_gvDragAndDropArrowDown_SoftOrange, .dxGridView_gvDragAndDropArrowUp_SoftOrange, .dxGridView_gvDragAndDropHideColumn_SoftOrange, .dxGridView_gvExpandedButton_SoftOrange, .dxGridView_gvExpandedButtonRtl_SoftOrange, .dxGridView_gvFilterRowButton_SoftOrange, .dxGridView_gvHeaderFilter_SoftOrange, .dxGridView_gvHeaderFilterActive_SoftOrange, .dxGridView_gvHeaderSortDown_SoftOrange, .dxGridView_gvHeaderSortUp_SoftOrange, .dxGridView_gvParentGroupRows_SoftOrange, .dxGridView_WindowResizer_SoftOrange, .dxGridView_WindowResizerRtl_SoftOrange {
      background-image: url('/DXR.axd?r=0_4746-io7K9');
      background-repeat: no-repeat;
      background-color: transparent;
      }
      .dx-vam, .dx-valm {
      vertical-align: middle;
      }

      Anthony (DevExpress Support) 10 years ago

        Hi Kevin,

        Would you please clarify what changes you made to change the icon? As I can see, the image is taken from the sprite, thus it is necessary to override the "background-position" style. Perhaps, you changes the styles correctly, but the default style to have a higher priority? To test this, add the "!important" keyword to the style:

        CSS
        background-position: -Xpx Ypx !important;
        Sign in to comment on this post

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.