2 Replies - 157 Views - Last Post: 18 October 2017 - 06:05 AM

#1 ikhlas06  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 178
  • Joined: 20-May 16

How can I make whole header blocks click able?

Posted 17 October 2017 - 01:02 PM

Please take a look at: https://mdbootstrap....tables/#sorting

In this example, you can click on any where in header and it will sort the col.

I have created some thing similar by below code.

issue is that I have to click on a header text to sort.


<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" 
            DataKeyField="ID" CssClass="GridView1C"  
            AllowSorting="True"  OnSorting="GridView1_Sorting" 
            AllowPaging="true" PageSize="20" OnPageIndexChanging="GridView1_PageIndexChanging"  
            OnRowDataBound="OnRowDataBound"
            ShowFooter="true">
            <HeaderStyle cssclass="myGridHeaderStyle"></HeaderStyle>  
            <RowStyle  Wrap="False" />

                <Columns>
                    <asp:BoundField DataField="d1" HeaderText="d1" SortExpression="d1" />
                    <asp:BoundField DataField="d2" HeaderText="d2" SortExpression="d2" />
                    <asp:BoundField DataField="d3" HeaderText="d3" SortExpression="d3" />
                    <asp:BoundField DataField="d4" HeaderText="d4" SortExpression="d4" />
                </Columns>
                <PagerStyle CssClass="myPagerStyle" />
            </asp:GridView>
			


so I wrote some css code to fix this issue:

.myGridHeaderStyle a  
{
    color: #000;
    font-weight: bold;
    display:block;
    text-decoration: none;
    margin: 0 auto;
}


this works good if col name fits in 1 row. but if col name is long and it fits in 2 row than there is a issue.

How can I make whole header blocks click able?

This post has been edited by ikhlas06: 17 October 2017 - 01:21 PM


Is This A Good Question/Topic? 0
  • +

Replies To: How can I make whole header blocks click able?

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5074
  • View blog
  • Posts: 13,697
  • Joined: 18-April 07

Re: How can I make whole header blocks click able?

Posted 17 October 2017 - 04:32 PM

I am not sure why the wordwrap would make a difference here. If the link tag is a being displayed as a block, then no matter where you click in the block it should be clicking the link. Now that doesn't mean anywhere in the header cell because the anchor element isn't going to be the same size as its parent header tag. One way you can trick this is by setting the styling on the header tags to be like 0px tall and then force open the anchor tags with padding and widths. An example can be seen here...

https://codepen.io/anon/pen/NaedVP

Notice in the example how I have crushed the header and then using a widths and padding I have opened up the link. One thing I also want to point out is the use of box-sizing here to make sure the padding is included in the width of the item so the table will stretch around it. If you want to play with the wrapping, just adjust the width of the really long cell in the HTML code. The gray is showing you where the link is clickable at. Which at the start of this demo is the entire header cell. :)
Was This Post Helpful? 1
  • +
  • -

#3 ikhlas06  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 178
  • Joined: 20-May 16

Re: How can I make whole header blocks click able?

Posted 18 October 2017 - 06:05 AM

Thanks Martyr2, This was exactly what i was looking for.

I see the trick here is:
.example-table th {
  height: 0;
}
 


makes sense now
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1