Query in ascending and descending order icon

Query in ascending and descending order icon

Posted by: nilesh_nichal on 18 March 2024, 9:15 pm EST

• 

  nilesh_nichal

  • Post Options:
  • Link
    Copy

  Posted 18 March 2024, 9:15 pm EST - Updated 18 March 2024, 9:20 pm EST

  Hi Team,

  We want to use only ascending and descending order icon, but instead we are getting the icon up and down with text of ascending and descending.
  
  Could you please provide solution where we can use ascending and descending order icon without text.
  
  Below is the code we have used

  .....
  export class MdmColumnFilterEditor extends ColumnFilterEditor {
    static override controlTemplate =
      '<div class="filter-sort-content-wrapper">' +
      '<div wj-part="div-sort" class="filter-sort-btn-wrapper">' +
      '<button wj-part="btn-asc" class="wj-btn sort-btn" ></button>' +
      '<button wj-part="btn-dsc" class="wj-btn sort-btn" ></button>' +
      '</div>' +
      '<div wj-part="div-type" class="wj-filtertype">' +
  .....

  Please find the existing filter where we are using both icon and text from the attachment and let us know if having any query.

  

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 19 March 2024, 11:42 pm EST

  Hello,

  You’re using a custom template for the ColumnFilterEditor, but you can achieve your requirement using CSS alone. By applying custom style classes and making some CSS modifications, you can achieve the desired outcome. Please refer to the sample provided below, where I’ve applied appropriate styling to display only arrows on the buttons without any text.

  Sample: https://jscodemine.mescius.io/sample/DzZR485oA0icITYQoqEx2Q/

  Note that the arrows on the buttons in the sample are text symbols, not icons. Also, it’s important to mention that directly adding content to the template may not work as intended. The purpose of the template is to provide a structure to the editor, and its content can be overridden during filter creation. However, we can assign style classes to elements within the template and make modifications there.

  I hope this solution helps you achieve your desired functionality.

  Regards