Remove From My Forums

No Sorting on Few Columns

Question
0

Sign in to vote

User-1499457942 posted

Hi

I have gridview in Jquery Datatable . I dont want to do sorting on some columns . Secondly Instead of Sorting Icons can we show Underline in Columns

$(document).ready(function () {
$('#gvw').dataTable({
order: [],
"pageLength": 20
});
});

Thanks

Sunday, August 26, 2018 9:33 AM

All replies

User-893317190 posted

Hi JagjitSingh,

You could set the orderable property to false if you don't want to do sorting on some columns.

If you want to remove the sort icom , you could remove the sort class of the header cells in jquerydatatable's fnDrawCallback callback.

As to underline , you could set HeaderStyle-Font-UnderLine="true" in gridview.

Below is my code.'

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

 <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
   
  <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EntryNo" DataSourceID="SqlDataSource1">
            <HeaderStyle HorizontalAlign="Center" />

            <Columns>
                <asp:BoundField DataField="EntryNo" HeaderText="EntryNo" InsertVisible="False" ReadOnly="True"  HeaderStyle-Font-UnderLine="true" />
                <asp:BoundField DataField="Code" HeaderText="Code"  HeaderStyle-Font-UnderLine="true" />
                <asp:BoundField DataField="Description" HeaderText="Description"  HeaderStyle-Font-UnderLine="true"  />
                <asp:BoundField DataField="categoryid" HeaderText="categoryid"  />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EntityExe %>" SelectCommand="SELECT [EntryNo], , [Description], [categoryid] FROM [Entries]"></asp:SqlDataSource>

         <script>

               $("<thead class='bg-primary text-white'></thead>").append($("#GridView1 tr:first")).prependTo($("#GridView1"));
             $('#GridView1').dataTable(
                 {
                    order:[],
                           // the target refers to the index of the column,you could choose more than one column like [1,2,3]
                     "columnDefs": [{ "orderable": false, "targets": [3] }],

                      
                "fnDrawCallback": function( oSettings ) { 
                    $("#GridView1 thead  th").removeClass("sorting_asc sorting sorting_desc");
                    
              }
                    
                 }

             );

         </script>
The 
 result.
Best regards,
Ackerly Xu

Monday, August 27, 2018 7:10 AM

0

Sign in to vote

User-1499457942 posted

Hi Ackerly

Thanks . It s o.k . Can we change style when mouse is over Header column

Thanks

Monday, August 27, 2018 7:21 AM

User-893317190 posted

Hi JagjitSingh ,

You could use onmouseover and onmouseout event to help you. Below is my code.

               $("<thead class='bg-primary text-white'></thead>").append($("#GridView1 tr:first")).prependTo($("#GridView1"));
             $('#GridView1').dataTable(
                 {
                    order:[],

                     "columnDefs": [{ "orderable": false, "targets": [3] }],

                      
                "fnDrawCallback": function( oSettings ) { 
                    $("#GridView1 thead  th").removeClass("sorting_asc sorting sorting_desc");
                    
                }
                    
                 }

             );
             $("#GridView1 thead th").not("#GridView1 thead th:eq(3)").mouseover(

                 function () {
                 
                     $(this).css("color", "red");
                 }
             ).mouseout(
                 function() {
                     $(this).css("color", "white");
                 }
             )

The eq(3) refers to the index of column which you don't want to sort. If you want don't want to sort more than one column ,you could write your code as follows.

 $("#GridView1 thead th").not("#GridView1 thead th:eq(3)").not("#GridView1 thead th:eq(2)").mouseover(

                 function () {
                 
                     $(this).css("color", "red");
                 }
             ).mouseout(
                 function() {
                     $(this).css("color", "white");
                 }
             )

The result.

Best regards,

Ackerly Xu

Tuesday, August 28, 2018 2:13 AM

0

Sign in to vote

User-1499457942 posted

Hi Ackerly

Cant we change it to Hand

Thanks

Tuesday, August 28, 2018 5:32 AM

User-893317190 posted

Hi JagjitSingh,

You could try css style cursor.

   $("<thead class='bg-primary text-white'></thead>").append($("#GridView1 tr:first")).prependTo($("#GridView1"));
             $('#GridView1').dataTable(
                 {
                    order:[],

                     "columnDefs": [{ "orderable": false, "targets": [3] }],

                      
                "fnDrawCallback": function( oSettings ) { 
                    $("#GridView1 thead  th").removeClass("sorting_asc sorting sorting_desc");
                    
                }
                    
                 }

             );
                          $("#GridView1 thead th").not("#GridView1 thead th:eq(3)").css("cursor","pointer")
             $("#GridView1 thead th").not("#GridView1 thead th:eq(3)").mouseover(

                 function () {
                 
                     $(this).css("color", "red");
                 }
             ).mouseout(
                 function() {
                     $(this).css("color", "white");
                 }
             )
             

         </script>

Best regards,

Ackerly Xu

Tuesday, August 28, 2018 7:50 AM

Asked by:

No Sorting on Few Columns

Question

All replies