Wijmo Grid Sorting

Posted by: technical.store.technical on 6 July 2021, 9:02 pm EST

  • Posted 6 July 2021, 9:02 pm EST

    Hi team,

    Sorting is not working as expected.

    Example - try to sort subjects column. It gives wrong result.

    getting :-

    Can you please check and provide solution asap.

    https://stackblitz.com/edit/angular-us2yuk?file=src/app/app.component.ts

    Thank you.

  • Posted 6 July 2021, 11:13 pm EST

    Hi Team,

    Please help us with the above issue.

    Regards,

  • Posted 7 July 2021, 3:35 pm EST

    Hi Team,

    Please help us with the above issue.

    Regards,

  • Posted 7 July 2021, 7:07 pm EST

    Hi Team,

    Similar issue we found for filter by value:-

    If we select 5,6 values from subsubjects filter by values condition then it shows the data with ALL value.

    If the data with 5,6 value is not available on UI then it ideally should return empty object but it is giving us wrong result like above sorting issue.

    Sorting and Filtering should work on the UI displayed Values.

    https://stackblitz.com/edit/angular-nfmqzf?file=src/app/app.component.ts

    Please provide us a solution for this.

    Thank you.

  • Posted 7 July 2021, 11:20 pm EST

    Hi,

    The above sorting behavior is correct as it sorts the data based on the first element of the array (similar to the sort() method of Array in JS). Like in the shared sample, the subject and Subsubjects data array were not sorted which was producing the above sorting behavior.

    To change this, we may sort the subject and Subsubjects array in the collectionView, which would produce the desired sorting behaviour.

    • "* “We may perform the above-mentioned sorting initially when the FlexGrid is initialized.”

    • “We may perform the same above-mentioned sorting of the array in the checkedItemsChanged event of Multiselect so that whenever a new item is added, the array should be sorted.”

      "

    Sample: https://stackblitz.com/edit/angular-4vcqab?file=src%2Fapp%2Fapp.component.ts

    The filtering part we are still working on. We will update you once this is finished.

    Regards,

    Ashwin

  • Posted 8 July 2021, 3:16 pm EST - Updated 3 October 2022, 4:18 am EST

    Hi Ashwin,

    This is not what we want,

    Eg if you apply a ascending sorting in Subjects column, then why ‘All’ is appearing in second row ideally it should appear in first row, then (chemistry, computers) etc.

    We want sorting and searching to be happen on UI displayed data.

    Thanks

    https://stackblitz.com/edit/angular-4vcqab?file=src/app/app.component.ts

    Please provide solution

  • Posted 8 July 2021, 4:58 pm EST

    Hi,

    I have updated the sample for sorting accordingly using the sortConverter method of CollectionView.

    For filtering, you will need to override the apply method of that particular column’s filter.

    I have added comments in the apply method on how to override it and how to fetch the check values. You will need to implement it according to your use cases. Return true if the value should not be filtered and false if it should be.

    https://stackblitz.com/edit/angular-puyfhh

    ~regards

  • Posted 8 July 2021, 6:03 pm EST - Updated 3 October 2022, 4:17 am EST

    Hi Ashwin,

    Sort is still not working properly - We want sorting on UI display Data.

    After above snippet, ALL is at correct position but French value is not at it’s correct position.

    Please go through the below image for sorting issue.

    And for filtering - we are unable to understand the comment. Can you please provide a small example demonstrating how to omit 5,6 values if it is not present in UI.

    example : - If the data with 5,6 value is not available on UI then it ideally should return empty object but it is giving us wrong result.

    Regards,

  • Posted 9 July 2021, 4:07 pm EST

    Hi Ashwin,

    Please provide solution.

    Thank you.

  • Posted 11 July 2021, 5:38 pm EST

    Hi,

    I have updated the sortConverter method to perform sorting correctly.

    Regarding filtering, I cannot properly understand where exactly the All display is coming from in the subsubjects column. If you can provide the line or method which updates the display of Subsubjects multiselect to All, then I can use that for filtering values.

    Here is the updated sample: https://stackblitz.com/edit/angular-tcstyn

    ~regards

  • Posted 11 July 2021, 9:34 pm EST

    hi ashwin,

    In case of Sorting, there is a lot of delay if we have huge data. How can we remove that ?

    And also we don’t want sortConvertor for text fields, how can we avoid it there ?

    Snippet for sorting : -

    https://stackblitz.com/edit/angular-u4utc8?file=src/app/app.component.ts

    In case of filtering -

    If we apply filter in subsubjects column with data value as 5,6,7 then it returns value ALL.

    ALL logic : -if we have more than 1 subjects then subsubjects value becomes ALL.

    if (col.binding === 'Subsubjects') {
            const item = row.dataItem;
            const host = document.createElement('div');
            wjcCore.addClass(host, 'multiselect-editor');
            let multiSel = new wjcInput.MultiSelect(host, {
              itemsSource: this.getSubSubjects(item).sort(),
              checkedItems: item.Subsubjects,
              headerFormat:
                item.Subsubjects.length !== this.getSubSubjects(item).length
                  ? item.Subsubjects.join(', ')
                  : 'ALL',
              isRequired: false,
              isEditable: false,
              showSelectAllCheckbox: this.showSelectAllCheckbox,
              checkedItemsChanged: s => {
                s.headerFormat =
                  s.checkedItems.length !== s.collectionView.sourceCollection.length
                    ? s.checkedItems.toString()
                    : 'ALL';
                item.Subsubjects = s.checkedItems;
                this.sortGridData(s);
              }
            });
    

    snippet for filtering :-

    https://stackblitz.com/edit/angular-4vcqab?file=src/app/app.component.ts

    Please let us know how we can remove this delay because it is giving us very poor result.

    Thank you.

  • Posted 11 July 2021, 9:38 pm EST - Updated 3 October 2022, 4:18 am EST

  • Posted 13 July 2021, 3:44 pm EST

    Hi,

    I have updated the filtering with the required logic. Please refer to the updated sample:

    https://stackblitz.com/edit/angular-kpbzro

    Regarding sorting, can you provide a small sample that replicates your issue? It would be easier for us to investigate if we have a working sample.

    Also, the sortConverter already uses a check where it will only convert the values of the subjects column.

    ~regards

  • Posted 13 July 2021, 5:29 pm EST

    Hi Ashwin,

    For filtering - With input value as 5,6,2,3. it is still return a row with ALL value in the same snippet.

    For sorting - Sorting works fine but the problem is with 7k-8k of data. It takes too much time to sort.

    Is there any other way to reduce the performance issue in sorting. ?

    Thank you.

  • Posted 14 July 2021, 4:55 pm EST

    Hi,

    I have updated the sample with a large number of data but the sorting does not cause any performance issue. Can you modify the sample so that it replicates your issue?

    https://stackblitz.com/edit/angular-qrpmc6

    Regarding filtering, I have used the same logic which you provided in the filtering part. Is there any other way you have changed the header to All in 5,6,2,3 item.

    ~regards

  • Posted 18 July 2021, 4:31 pm EST

    Hi Ashwin,

    In case of filtering -

    If we apply filter in subsubjects column with data value as 5,6,2,3 then it returns value ALL.

    ALL logic : -if we have more than 1 subjects selected in subjects columns then subsubjects value becomes ALL.

    refer line : -272

    Please check this and update us.

    Regards,

  • Posted 19 July 2021, 7:49 pm EST

    Hi,

    I am afraid I was still not able to understand the logic behind setting All as the header. I am providing a sample. In this sample, please update the getMultiSelectHeader method. This method takes the current item and should return ‘All’ if the header should be All otherwise it should return the data or an empty string (refer to line 108).

    https://stackblitz.com/edit/angular-yhni7b

    ~regards

Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels