custom sorting

[tomkwongParticipant]

Questions about sorting in tree grid:

1. I need to sort a column by a custom “importance” value. For example, let’s say I need to display a list of countries so I would put United States, United Kingdom, etc. at the top and then follow by other countries in alphabetical order. I have no problem maintaining the order manually with a numerical value but I don’t want to show the number column anywhere…

2. With the tree grid, it looks like that the “sortBy” attribute applies the same sorting to all levels in the same column. Is there any way to apply a different sort order for each level (ideally using the method I described in question #1 above)?

Thanks

[ChristopherParticipant]

Hi tomkwong,

For your first question:
Yes, you can sort by a custom value, if you have that value as a datafield(with data) in your source. In order to do it, you need to create a hidden column in the jqxTreeGrid that has it’s datafield set to that “importance” datafield and when you want to sort the data, you can SortBy that hidden column.

For the second question:
This is not possible. You can’t sort differently depending on the level of the jqxTreegrid.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[tomkwongParticipant]

Thanks for the quick turnaround. I can trick and make #2 work by using the same idea from #1 since I’m just providing my importance value. Tested in your JSEditor.

$(document).ready(function () {
   var employees = [
            {
                "EmployeeID": 2, "sort": 1, "FirstName": "Andrew", "LastName": "Fuller", "Country": "USA", "Title": "Vice President, Sales", "HireDate": "1992-08-14 00:00:00", "BirthDate": "1952-02-19 00:00:00", "City": "Tacoma", "Address": "908 W. Capital Way", "expanded": "true",
                children: [
                { "EmployeeID": 8, "sort": 1, "FirstName": "Laura", "LastName": "Callahan", "Country": "USA", "Title": "Inside Sales Coordinator", "HireDate": "1994-03-05 00:00:00", "BirthDate": "1958-01-09 00:00:00", "City": "Seattle", "Address": "4726 - 11th Ave. N.E." },
                { "EmployeeID": 1, "sort": 3, "FirstName": "Nancy", "LastName": "Davolio", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-05-01 00:00:00", "BirthDate": "1948-12-08 00:00:00", "City": "Seattle", "Address": "507 - 20th Ave. E.Apt. 2A" },
                { "EmployeeID": 3, "sort": 2,"FirstName": "Janet", "LastName": "Leverling", "Country": "USA", "Title": "Sales Representative", "HireDate": "1992-04-01 00:00:00", "BirthDate": "1963-08-30 00:00:00", "City": "Kirkland", "Address": "722 Moss Bay Blvd." },
                { "EmployeeID": 4, "sort": 4,"FirstName": "Margaret", "LastName": "Peacock", "Country": "USA", "Title": "Sales Representative", "HireDate": "1993-05-03 00:00:00", "BirthDate": "1937-09-19 00:00:00", "City": "Redmond", "Address": "4110 Old Redmond Rd." },
                {
                    "EmployeeID": 5, "sort": 5, "FirstName": "Steven", "LastName": "Buchanan", "Country": "UK", "Title": "Sales Manager", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1955-03-04 00:00:00", "City": "London", "Address": "14 Garrett Hill", "expanded": "true",
                    children: [
                           { "EmployeeID": 6, "sort": 1, "FirstName": "Michael", "LastName": "Suyama", "Country": "UK", "Title": "Sales Representative", "HireDate": "1993-10-17 00:00:00", "BirthDate": "1963-07-02 00:00:00", "City": "London", "Address": "Coventry House Miner Rd." },
                           { "EmployeeID": 7, "sort": 2, "FirstName": "Robert", "LastName": "King", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-01-02 00:00:00", "BirthDate": "1960-05-29 00:00:00", "City": "London", "Address": "Edgeham Hollow Winchester Way" },
                           { "EmployeeID": 9, "sort": 3, "FirstName": "Anne", "LastName": "Dodsworth", "Country": "UK", "Title": "Sales Representative", "HireDate": "1994-11-15 00:00:00", "BirthDate": "1966-01-27 00:00:00", "City": "London", "Address": "7 Houndstooth Rd." }
                    ]
                }
                ]
            }
        ];
    // prepare the data
    var source =
    {
        dataType: "json",
        dataFields: [
            { name: 'EmployeeID', type: 'number' },
            { name: 'sort', type: 'number' },
            { name: 'FirstName', type: 'string' },
            { name: 'LastName', type: 'string' },
            { name: 'Country', type: 'string' },
            { name: 'City', type: 'string' },
            { name: 'Address', type: 'string' },
            { name: 'Title', type: 'string' },
            { name: 'HireDate', type: 'date' },
            { name: 'children', type: 'array' },
            { name: 'expanded', type: 'bool' },
            { name: 'BirthDate', type: 'date' }
        ],
        hierarchy:
        {
            root: 'children'
        },
        id: 'EmployeeID',
        localData: employees
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // create Tree Grid
    $("#treeGrid").jqxTreeGrid(
    {
        width: 850,
        theme: "dark",
        source: dataAdapter,
        //sortable: true,
        columns: [
          { text: 'FirstName', dataField: 'FirstName', width: 200 },
          { text: 'LastName', dataField: 'LastName', width: 120 },
          { text: 'Title', dataField: 'Title', width: 160 },
          { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd', width: 120 },
          { text: 'Hire Date', dataField: 'HireDate', cellsFormat: 'd', width: 120 },
          { text: 'Address', dataField: 'Address', width: 250 },
          { text: 'City', dataField: 'City', width: 120 },
          { text: 'Country', dataField: 'Country' }
        ]
    });
    
    // sort by custom column that's hidden
    $("#treeGrid").jqxTreeGrid("sortBy", "sort", "asc");
});

[Author]

Posts