Default sort image when not sorting

[rick]

Hi Syncfusion team,

We are using your grid component on a .net Core project, but we have some styling issues for the header.
The default behavior doesn’t show the sorting arrows before you click a header, but what we want is the arrows on the background in light grey.
See included images.

I can style the arrows that show up after clicking by changing the style for the class of the span that’s added, but there is no span for before.

Is there a good way to go about making this work?

Thanks in advance!

Attachment: Images_2a3fdf72.zip

[Saravanan Arunachalam]

Hi Rick, 

Thanks for contacting Syncfusion’s support. 

We have analyzed your requirement and achived it by using “headerTemplate” property of column’s feature and “actionComplete” event of Grid control. In that, we have rendered the customized image (light-gray) with the help of “headerTemplate” property and hide the default sort icon by using “actionComplete” event. Please refer to the below code example and screenshot. 

[html] 

<div id="template1"> 

        Order ID 

        <div class="e-updown" style="float:right;width:16px;height:30px"> 

            <span><img src="../content/ejthemes/common-images/reports/updown.png"></span> 

        </div> 

    </div> 

    <div id="template2"> 

        Customer ID 

        <div class="e-updown" style="float:right;width:16px;height:30px"> 

            <span><img src="../content/ejthemes/common-images/reports/updown.png"></span> 

        </div> 

    </div> 

    <div id="template3"> 

        Employee ID 

        <div class="e-updown" style="float:right;width:16px;height:30px"> 

            <span><img src="../content/ejthemes/common-images/reports/updown.png"></span> 

        </div> 

    </div> 

    <ej-grid id="FlatGrid" datasource="ViewBag.datasource" allow-sorting="true" action-complete="ActionComplete"> 

        <e-columns> 

            <e-column field="OrderID" header-text="Order ID" width="90" header-template="#template1"></e-column> 

            <e-column field="CustomerID" header-text="Customer ID" width="100" header-template="#template2"></e-column> 

            <e-column field="EmployeeID" header-text="Employee ID" width="100" header-template="#template3"></e-column> 

 

        </e-columns> 

    </ej-grid> 

 

[JS] 

<script type="text/javascript"> 

       function ActionComplete(args) { 

                  if (args.requestType == "sorting") { 

                     //To hide and show icon based on the sort direction 

                      var colIndex = this.getColumnIndexByField(args.columnName); 

                      var $th = this.getHeaderTable().find("th"); 

                      $th.eq(colIndex).find("span.e-icon").hide(); 

                      $th.find("img").attr("src", "../content/ejthemes/common-images/reports/updown.png"); 

                      if (args.columnSortDirection == "ascending") 

                          $th.eq(colIndex).find("img").attr("src", "../content/ejthemes/common-images/reports/up.png"); 

                      else 

                          $th.eq(colIndex).find("img").attr("src", "../content/ejthemes/common-images/reports/down.png"); 

                  } 

              } 

</script> 

 

 

 Note: In the above code we have used three images such as up, down and updown. You can customize these images by using icomoon app. 

Regards, 

Saravanan A.