[CLOSED] How to setup ImageCommandColumn's border-bottom line?

  1. #1

    [CLOSED] How to setup ImageCommandColumn's border-bottom line?

    HI Ext.net Team,

    I want to show bold line in Grid, but the line will be interrupted in ImageCommandColumn column.

    Do you have any idea?

    Click image for larger version. 

Name:	2013-05-06-ImageCommand.png 
Views:	25 
Size:	5.4 KB 
ID:	6159

    And there is my code:

    <script type="text/javascript">
            var getRowClass = function (record, index) {
                var nextidx = index + 1;
                var count = MainStore.getCount();
                var curr = record.data.PClass;
                var nextpclass = '';
                if (nextidx < count) {
                    nextpclass = MainStore.getAt(nextidx).data.PClass;
    
                    if (nextpclass != curr) {
                        return "borderline";
                    }
                    else {
                        return "";
                    }
                }
            }
        </script>
        <style type="text/css">
            .borderline {
            }
            .borderline .x-grid-cell-inner {
                border-bottom: 1px solid black;
            }
        </style>
    
    <ext:GridPanel ID="MainGrid" runat="server" StoreID="MainStore" Title="Sample Grid" Region="Center" StyleSpec="z-index:1" Height="455" Scroll="Both" Border="false" RowLines="true">
                    <ColumnModel ID="MainColumnModel" runat="server">
                        <Columns> 
                            <ext:RowNumbererColumn runat="server" ID="colRowNum" Text="No" Width="30"  />                        
                            <ext:ImageCommandColumn runat="server" ID="colProdImg" Width="30" Align="Center" >
                                <Commands>
                                    <ext:ImageCommand CommandName="ProdImage" Icon="Picture" ToolTip-Text="Click to show item's picture" Style="margin-left:5px !important;"/>                                
                                </Commands>
                            </ext:ImageCommandColumn>
                             <ext:DateColumn runat="server" ID="colStartDate" DataIndex="StartDate" Text="Start Date" Width="95" Align="Center"/>
                            <ext:DateColumn runat="server" ID="colEndDate" DataIndex="EndDate" Text="End Date" Width="95" Align="Center"/>                        
                            
                        </Columns>
                    </ColumnModel>
                    <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server"></ext:RowSelectionModel>
                    </SelectionModel>
                    <View>
                        <ext:GridView ID="GridView1" runat="server">
                            <GetRowClass Fn="getRowClass" />
                        </ext:GridView>
                    </View>
            </ext:GridPanel>
    Sincerely,
    Last edited by Daniil; May 06, 2013 at 3:04 PM. Reason: Please use [CODE] tags, [CLOSED]
  2. #2
    Hi @capbarbell,

    Please use this rule instead of your one.
    .borderline .x-grid-cell {
        border-bottom: 1px solid black;
    }
  3. #3
    HI Daniil,

    That solved it. thank you.

Similar Threads

  1. [CLOSED] Panel topBar bottom border of buttons .
    By supera in forum 2.x Legacy Premium Help
    Replies: 9
    Last Post: Oct 22, 2012, 10:44 AM
  2. [CLOSED] NumberField missing the bottom line on IE8 ?
    By Fahd in forum 2.x Legacy Premium Help
    Replies: 14
    Last Post: Jul 17, 2012, 4:48 PM
  3. [CLOSED] IE6 Combo box bottom border not rendered
    By musher in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 09, 2012, 9:57 AM
  4. Replies: 3
    Last Post: Aug 11, 2011, 11:07 AM
  5. [CLOSED] FieldSet - Bottom border-line missing on IE-8
    By ndotis in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Feb 03, 2011, 5:04 PM

Posting Permissions