ContextMenu -> on button click sortColumn() does not work

[Laurin S]

Hi, I've created my own Context Menu for the Grid Component. One button of the Context menu should sort the selected column, but when I execute the following piece of code, nothing happens:

case "sortAscending":

                    //console.log(grid.isContextMenuOpen()) returns always true and therefore does not sort

                    grid.sortModule.sortColumn(args.column.field, "Ascending", false);

                    break;

                case "sortDescending":

                    //console.log(grid.isContextMenuOpen()) returns always true and therefore does not sort

                    grid.sortColumn(args.column.field, "Descending", false);

                    break;

I tried both approaches, using directly grid.sortColumn() or using grid.sortModule.sortColumn(..). I've debugged a bit and recognised that the problem is in the following piece of code in the sort.js file (ej2-grids/src/grid/actions/sort.js), where the call on this.parent.isContextMenuOpen() always returns true:

Sort.prototype.sortColumn = function (columnName, direction, isMultiSort) {

        var gObj = this.parent;

        if (this.parent.getColumnByField(columnName).allowSorting === false || this.parent.isContextMenuOpen()) {      ---------> Problem

            this.parent.log('action_disabled_column', { moduleName: this.getModuleName(), columnName: columnName });

            return;

        }

What have to do?  Thanks.

[Ajith Govarthan]

Hi Laurin, 

 

Thanks for contacting Syncfusion support. 

 

Query: I've created my own Context Menu for the Grid Component. One button of the Context menu should sort the selected column, but when I execute the following piece of code, nothing happens 

 

We have prepared sample based on your requirement. In this sample, we have rendered the custom context menu items and perform the sorting operation. 

 

We also set isOpen value as false to perform sorting operation properly. For your convenience we have attached the sample so please refer the sample for your reference. 

 

Code Example: 

Index.js 

export class ContextMenuSample extends SampleBase { 

  constructor() { 

    super(...arguments); 

    this.groupOptions = { showGroupedColumn: true }; 

    this.contextMenuItems = [ 

      "FirstPage", 

      "PrevPage", 

      "LastPage", 

      "NextPage", 

      { text: "SortColumn", target: ".e-gridheader", id: "sortColumn" }, 

      { text: "ClearSorting", target: ".e-gridheader", id: "clearSort" } 

    ]; 

    this.editing = { allowDeleting: true, allowEditing: true }; 

  } 

  contextMenuClick(args) { 

    if (this.grid && args.item.id === "sortColumn") { 

      this.grid.contextMenuModule.isOpen = false;   // set the isOpen as false to perform sorting operation. 

      if (!this.grid.sortSettings.columns.length) { 

        this.grid.sortColumn(args.column.field, "Descending", false); 

      } else { 

        this.grid.sortColumn(args.column.field, "Descending", true); 

      } 

    } 

    if (this.grid && args.item.id === "clearSort") { 

      this.grid.clearSorting(); 

    } 

  } 

  render() { 

    return ( 

      <div className="control-pane"> 

        <div className="control-section"> 

          <GridComponent 

            ref={g => (this.grid = g)} 

            dataSource={orderDetails} 

            allowPaging={true} 

            allowSorting={true} 

            allowExcelExport={true} 

            allowPdfExport={true} 

            contextMenuItems={this.contextMenuItems} 

            editSettings={this.editing} 

            contextMenuClick={this.contextMenuClick.bind(this)} 

          > 

            <ColumnsDirective> 

              <ColumnDirective 

                field="OrderID" 

                headerText="Order ID" 

                width="120" 

                textAlign="Right" 

                isPrimaryKey={true} 

              /> 

              <ColumnDirective 

                field="CustomerName" 

                headerText="Customer Name" 

              /> 

              <ColumnDirective 

                field="Freight" 

                headerText="Freight" 

                format="C2" 

                textAlign="Right" 

                editType="numericedit" 

              /> 

              <ColumnDirective 

                field="ShipName" 

                headerText="Ship Name" 

                width="200" 

              /> 

              <ColumnDirective 

                field="ShipCountry" 

                headerText="Ship Country" 

                width="150" 

                editType="dropdownedit" 

              /> 

              <ColumnDirective 

                field="ShipCity" 

                headerText="Ship City" 

                width="150" 

              /> 

            </ColumnsDirective> 

            <Inject 

              services={[ 

                Resize, 

                Sort, 

                ContextMenu, 

                Filter, 

                Page, 

                ExcelExport, 

                Edit, 

                PdfExport 

              ]} 

            /> 

          </GridComponent> 

        </div> 

      </div> 

    ); 

  } 

} 

render(<ContextMenuSample />, document.getElementById("sample")); 

 

Sample Link: https://stackblitz.com/edit/react-8p8qip-qtwcyv?file=index.js 

 

UG-Link: https://ej2.syncfusion.com/react/documentation/grid/context-menu/ 

 

Please get back to us if you need further assistance. 

 

Regards, 

Ajith G.