How to change background gradient color of Header Group Row

  1. #1

    How to change background gradient color of Header Group Row

    Hello!

    When I create a grid with column header grouping, the column headers background gradient is greenish while the group header background is gray. I see they are using a background-image with a different WebResource.axd url. Where is this set? How can I make both look greenish?

    Click for zoomed screenshot:
    Click image for larger version. 

Name:	Header.png 
Views:	45 
Size:	2.1 KB 
ID:	10881

    Thanks and regards,

    Andrew
  2. #2
    Hi @ALobpreis,

    I cannot reproduce it either with your Ext.NET.dll or with the latest one.

    What browser are you testing with?4

    I see they are using a background-image with a different WebResource.axd url.
    Please post both the URLs. Maybe, it will give me a clue. Btw, it is better to use ext.axd instead of WebResource.axd.
  3. #3
    I am a bit confused about how this works. Let me show you what I found:

    The "highest" header tag is <div class="x-grid3-header" id="ext-gen17">, and it takes its greenish background from here:

    /*
     * Ext GWT Library 2.0
     * Copyright(c) 2006-2009, Ext JS, LLC.
     * licensing@extjs.com
     * 
     * http://extjs.com/license
     */
    
    .x-grid3-header {
      background: #f9f9f9 url("WebResource.axd?d=3ncbWb3K_E1Niqrr-dSz-P68QangeISJExadJF6wZEqJt0NK6NMT8G1BhFbPnnVydv65wT-_TeZ0PAQc2DgSaofvdDKjnfgT_dtPawRP73EoJFrbRGvD6JsmZkJjT33Dff0fYLL_ND4hk3sRZO1yA6jsqP9HDCZ9lzat8G5Ua9q2n3UklpzTrYiDD_9X8bZ00&t=635331694741987000") repeat-x 0 bottom;
    }
    That style is overwriting the gray one, found here:

    /*!
     * Ext JS Library 3.2.0
     * Copyright(c) 2006-2010 Ext JS, Inc.
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    
    .x-grid3-header{
        background-color:#f9f9f9;
    	background-image:url("WebResource.axd?d=HbPaKbV2UXuZQX-Gq02RbQ7wTOq95TnYpQ8qVNg46ZpCSXMZ_rW60oUmOKTvNbjKicmbUsfFz33gp6hleg8PJKVM2Mis1sOLDmyK6djchTDWPyQRXG0Cc64s4DW2gDYDDwwwS2Niae4RsB26jnzTZRGlM33YtoHMVcGXpgxCK1XXBB42ZP6EY6msESlQvaj10&t=635331694741987000");
    }
    On the other hand, in the group header row, each column (td) has the gray background image thanks to their class "ux-grid-hd-group-cell", taken from here:

    /*!
     * Ext JS Library 3.0+
     * Copyright(c) 2006-2009 Ext JS, LLC
     * licensing@extjs.com
     * http://www.extjs.com/license
     */
    td.ux-grid-hd-group-cell {
        background: url("WebResource.axd?d=-loflQi2A-7M4lWa5sQYqPkoFLfUBEz1nlLSBK3VIrY0Kt6E3kAEYujAFPyvuc-vceWK53A2HCl6EgwDy5mDz6uzrNqkp2u2OMOBYEACuEYjSxprvSrhyYM5rWeKeI60OX62_RN_BqDc7RN0mBtiZf-8vTfYkfKVLfs3NBGEV9FW_3ESI20G6LQcSI1xwUCp-89XE0YUn8BkSy1FbJ8N1Q2&t=635331694741987000") repeat-x bottom;
    }
    Is it ok that my site is using all those different css?

    Using the untouched group header example from the web has the same issue, so I guess it may be something in the web.config. Any ideas where I should start looking? How can I use ext.axd instead?

    Thanks and regards,

    Andrew
  4. #4
    If you are using an Ext GWT Library 2.0 Theme, I would expect strange results.

    How can I use ext.axd instead?
    By default Ext.NET uses an ext.axd file path, instead of the webresource.axd. You appear to have something configured somewhere that is overriding that default.
    Geoffrey McGill
    Founder
  5. #5
    I am using version 1.0.0.34580, and I found all that css code inside the very Ext.Net.dll file! Just out of curiosity I checked the following versions of the dll and I found that the GWT Library is present in all versions up to 1.7. Am I doing something wrong?
  6. #6
    Ok, it does appear there is an "Ext GWT Library 2.0" copyrighted Slate Theme in 1.x.

    I'm not entirely sure where that file came from, or why it's copyrighted to "Ext GWT Library 2.0". Maybe an issue from Sencha or the original author.

    I guess it's not an issue.
    Geoffrey McGill
    Founder
  7. #7
    So is there a "normal" way for me to fix this, maybe somehow adding the class "x-grid3-header" to the header group row? Meanwhile I did the opposite: I overrode in my page the background of the group cell class:

            td.ux-grid-hd-group-cell {
                background: #f9f9f9 url("WebResource.axd?d=3ncbWb3K_E1Niqrr-dSz-P68QangeISJExadJF6wZEqJt0NK6NMT8G1BhFbPnnVydv65wT-_TeZ0PAQc2DgSaofvdDKjnfgT_dtPawRP73EoJFrbRGvD6JsmZkJjT33Dff0fYLL_ND4hk3sRZO1yA6jsqP9HDCZ9lzat8G5Ua9q2n3UklpzTrYiDD_9X8bZ00&t=635331694741987000") repeat-x 0 bottom;
            }
    Can you foresee any issues with this?

    Thanks and regards,

    Andrew
    Last edited by ALobpreis; May 15, 2014 at 3:29 PM.
  8. #8
    I think it is the only solution - override the background as you did. I cannot foresee any problems with that.
  9. #9
    Quote Originally Posted by ALobpreis View Post
    Using the untouched group header example from the web has the same issue, so I guess it may be something in the web.config. Any ideas where I should start looking? How can I use ext.axd instead?
    Although the background issue has already been solved, I wanted to share how I changed the resource handler for future readers of this thread.

    I had to replace ResourceManager with ResourceHandler in my Web.Config:

    Wrong:
      <system.web>
        <httpHandlers>
          <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceManager" validate="false"/>
      <system.webServer>
        <handlers>
          <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceManager"/>
    Correct:
      <system.web>
        <httpHandlers>
          <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false"/>
      <system.webServer>
        <handlers>
          <add name="DirectRequestHandler" verb="*" path="*/ext.axd" preCondition="integratedMode" type="Ext.Net.ResourceHandler"/>
    More info here.

Similar Threads

  1. How to capture click on Header Group Row
    By ALobpreis in forum 1.x Help
    Replies: 19
    Last Post: May 22, 2014, 2:02 PM
  2. Header Group in Grid Panel
    By Rakeshkumar.a in forum 1.x Help
    Replies: 1
    Last Post: Dec 21, 2010, 9:59 AM
  3. Gridpanel + Group Header plugin
    By Birgit in forum 1.x Help
    Replies: 2
    Last Post: Nov 11, 2010, 9:31 AM
  4. Replies: 1
    Last Post: Mar 02, 2010, 10:53 AM
  5. Capture GRID Group Click
    By Cr@iG in forum 1.x Help
    Replies: 0
    Last Post: Feb 19, 2010, 7:04 AM

Tags for this Thread

Posting Permissions