We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Default sort image when not sorting

Thread ID:

Created:

Updated:

Platform:

Replies:

127805 Dec 9,2016 03:43 PM UTC Dec 14,2016 05:12 AM UTC ASP.NET Core 1
loading
Tags: Grid
rick
Asked On December 9, 2016 03:43 PM UTC

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 [Syncfusion]
Replied On December 14, 2016 05:12 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;