Alphabetise the Query Results field on the Portal

Tony_Collett

When loading a Request Offering, every time every query result field is sorted entirely randomly. 

It would be great if this was sorted Alphabetical Order (A-Z) by default

It should sort from the left-most column. 

To add to this, I have created a simple javascript which sorts all Query Result fields (If it has 1 column, it sorts that column. If it has multiple columns, it sorts the right-most column). It's not perfect, but it's a good start point. 

$(function(){
      $(".k-link").click();
});

joivan_hedrick

I've created something similar before which will sort query results by the first column. The following javascript should do what you are looking for. It's a bit longer than what you have, but it also works with query results that depend on previous answers to populate the dataset. 

$(window).load(function () {
    if (document.URL.indexOf("/SC/ServiceCatalog/RequestOffering/") === -1) { //Only worry about request offering forms
        return; 
    }
    
    //Get all objects that hold our kendo grids.
    var divGridControls = $("div[data-control=checkboxGridByCriteria");
    for (var i = 0; i < divGridControls.length; i++) {
        
        //Re-get this element as an object.
        var thisKendoGrid = $(divGridControls[i]).getKendoGrid();
        var firstColumnName = thisKendoGrid.columns[0].field;
        //var firstColumnTitle = thisKendoGrid.columns[0].title;
        var numberOfRows = thisKendoGrid.dataSource.data().length
        if (numberOfRows > 0) 
        {
            //This grid control already has data. 
            //Sort this grid, using the first column. This will sort only once, after initial page load, whether items exist in the grid or not.
            thisKendoGrid.dataSource.query({
              sort: { field: firstColumnName, dir: "asc" },
              page: 1,
              pageSize: 20,
            });
        }
        else{
            //If this request offering grid uses a previous question filter, then the initial sort won't work. Set up a one-time sort event. 
            thisKendoGrid.one("dataBound", function (e){
                //Note to self. the dataBound fires after the rows are returned, and dataBinding fires before. 
                var thisEventKendoGrid = e.sender;
                console.log(e.sender);
                
                var firstEventColumnName = thisEventKendoGrid.columns[0].field;
                var firstEventColumnTitle = thisEventKendoGrid.columns[0].title;
                //console.log("Databinding changed in event. Sorting by first column '" + firstEventColumnName + "', '" + firstEventColumnTitle + "'");
                thisEventKendoGrid.dataSource.query({
                  sort: { field: firstEventColumnName, dir: "asc" },
                  page: 1,
                  pageSize: 20,
                });
            });
        }
    }
});

AJ_Wittenbrink

This worked like a charm guys.  We have a series of dependent MP queries, that did filtering,  Cleaned it up nicely!

AJ_Wittenbrink

Since out update to V6, the solution by Joivan has not worked.  any suggestions?

AJ_Wittenbrink

ok I figured it out, change this line

    var divGridControls = $("div[data-control=checkboxGridByCriteria");

to     
var divGridControls = $("div[data-control=checkboxGridByCriteriaOld");

Morten_Aulie_Petters

Seems like both the scripts work, but only for the first Query Result box. I have a RO where I have 2 Query Result boxes on separate pages using the Layout function of the Advanced Request Offering, and the second box is not affected by the script.

Sean_Terry

Would be ideal if you could manage how these are sorted through the ARO.

Dean_Lintern

I am trying to use the above script with a couple of changes.

Changed this line as suggested above

var divGridControls = $("div[data-control=checkboxGridByCriteriaOld");

The script was not running and found the error code related to a problem with the event alias (.load) in that script being out of date. 

So changed this

$(window).load(function(){...}); 

replaced with this

$(window).on('load', function(){ ...}); 

So my script is as below

$(window).on('load', function () {
    if (document.URL.indexOf("/SC/ServiceCatalog/RequestOffering/") === -1) { //Only worry about request offering forms
        return; 
    }
	
    //Get all objects that hold our kendo grids.
    var divGridControls = $("div[data-control=checkboxGridByCriteriaOld");
    for (var i = 0; i < divGridControls.length; i++) {
        
        //Re-get this element as an object.
        var thisKendoGrid = $(divGridControls[i]).getKendoGrid();
        var firstColumnName = thisKendoGrid.columns[0].field;
        //var firstColumnTitle = thisKendoGrid.columns[0].title;
        var numberOfRows = thisKendoGrid.dataSource.data().length
        if (numberOfRows > 0) 
        {
            //This grid control already has data. 
            //Sort this grid, using the first column. This will sort only once, after initial page load, whether items exist in the grid or not.
            thisKendoGrid.dataSource.query({
              sort: { field: firstColumnName, dir: "asc" },
              page: 1,
              pageSize: 20,
            });
        }
        else{
            //If this request offering grid uses a previous question filter, then the initial sort won't work. Set up a one-time sort event. 
            thisKendoGrid.one("dataBound", function (e){
                //Note to self. the dataBound fires after the rows are returned, and dataBinding fires before. 
                var thisEventKendoGrid = e.sender;
                console.log(e.sender);
                
                var firstEventColumnName = thisEventKendoGrid.columns[0].field;
                var firstEventColumnTitle = thisEventKendoGrid.columns[0].title;
                //console.log("Databinding changed in event. Sorting by first column '" + firstEventColumnName + "', '" + firstEventColumnTitle + "'");
                thisEventKendoGrid.dataSource.query({
                  sort: { field: firstEventColumnName, dir: "asc" },
                  page: 1,
                  pageSize: 20,
                });
            });
        }
    }
});

However I am getting the following results when running

Uncaught TypeError: Cannot read property 'columns' of undefined
    at AlphabetiseQueryResults.js:12
    at dispatch (jquery.min.js?v=934:2)
    at y.handle (jquery.min.js?v=934:2)
(anonymous) @ AlphabetiseQueryResults.js:12
dispatch @ jquery.min.js?v=934:2
y.handle @ jquery.min.js?v=934:2
load (async)
add @ jquery.min.js?v=934:2
(anonymous) @ jquery.min.js?v=934:2
each @ jquery.min.js?v=934:2
each @ jquery.min.js?v=934:2
De @ jquery.min.js?v=934:2
on @ jquery.min.js?v=934:2
(anonymous) @ bootstrap.min.js?v=934:6
(anonymous) @ bootstrap.min.js?v=934:6

It seems the problem is because we have the 'Request Offering Query Result Picker' switch on in the Portal features, so the JS is loosing the 'Column' to hook onto. When we switch the feature off, the script works and Alphabetises the results.

Is anyone using this script with the same feature turned on, and has found a way around this?

Dean_Lintern

Just to confirm, to test we switched the feature off on the portal and the query runs fine and sorts all of the Results.

Gabriel_Lences

https://community.cireson.com/discussion/comment/19591#Comment_19591

Hi Dean,

I was just exchanging mails about this thing with @seth_coussens the other day. I logged an SR regarding the alphabetical sorting on the support page and actually @Tony_Collett , the OP of this thread wanted to help me with this [thanks again Tony :) ], but after exchanging a few mails we decided it would be best to pass to the torch to Seth regarding this so the devs can work on improving the query picker.

I collected some of the threads to improve the query picker , mixed in some of my own ideas , so hopefully something will come out of this in the future and the alphabetical sorting will be OOB "functionality" ?