Setting a default sort column with SlickGrid DataView

Question

Using SlickGrid's Dataview, trying to figure out how to get it to sort automatically on load. I've looked for this all over the web, haven't found a good answer. For example, with the code below, how do I get the "title" column to sort automatically on page load? Thanks!

<script>
var dataView;
var grid;
var data = [];
var columns = [
{id: "sel", name: "#", field: "num", cssClass: "cell-selection", width: 40, cannotTriggerInsert: true, resizable: false, selectable: false },
{id: "title", name: "Title", field: "title", toolTip: "test", behavior: "select", width: 120, minWidth: 120, cssClass: "cell-title", editor: Slick.Editors.Text, validator: requiredFieldValidator, sortable: true},
{id: "duration", name: "Duration", field: "duration", editor: Slick.Editors.Text, sortable: true},
{id: "%", defaultSortAsc: false, name: "% Complete", field: "percentComplete", width: 80, resizable: false, formatter: Slick.Formatters.PercentCompleteBar, editor: Slick.Editors.PercentComplete, sortable: true},
{id: "start", name: "Start", field: "start", minWidth: 60, editor: Slick.Editors.Date, sortable: true},
{id: "finish", name: "Finish", field: "finish", minWidth: 60, editor: Slick.Editors.Date, sortable: true},
{id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven", formatter: Slick.Formatters.Checkmark, editor: Slick.Editors.Checkbox, cannotTriggerInsert: true, sortable: true}
];

var options = {
editable: true,
enableAddRow: true,
enableCellNavigation: true,
asyncEditorLoading: true,
forceFitColumns: false,
topPanelHeight: 25
};

var sortcol = "title";
var sortdir = 1;
var percentCompleteThreshold = 0;
var searchString = "";

function requiredFieldValidator(value) {
if (value == null || value == undefined || !value.length) {
return {valid: false, msg: "This is a required field"};
}
else {
return {valid: true, msg: null};
}
}

function myFilter(item, args) {
 if (item["percentComplete"] < args.percentCompleteThreshold) {
   return false;
 }

if (args.searchString != "" && item["title"].indexOf(args.searchString) == -1) {
 return false;
}

return true;
 }

function percentCompleteSort(a, b) {
  return a["percentComplete"] - b["percentComplete"];
}

function comparer(a, b) {
 var x = a[sortcol], y = b[sortcol];
 return (x == y ? 0 : (x > y ? 1 : -1));
}

function toggleFilterRow() {
  grid.setTopPanelVisibility(!grid.getOptions().showTopPanel);
}

$(".grid-header .ui-icon")
    .addClass("ui-state-default ui-corner-all")
    .mouseover(function (e) {
      $(e.target).addClass("ui-state-hover")
    })
    .mouseout(function (e) {
      $(e.target).removeClass("ui-state-hover")
    });

$(function () {
    // prepare the data
 for (var i = 0; i < 50000; i++) {
 var d = (data[i] = {});

 d["id"] = "id_" + i;
 d["num"] = i;
 d["title"] = "Task " + i;
 d["duration"] = i + " days";
 d["percentComplete"] = Math.round(Math.random() * 100);
 d["start"] = "01/01/2009";
 d["finish"] = "01/05/2009";
 d["effortDriven"] = (i % 5 == 0);
}

dataView = new Slick.Data.DataView({ inlineFilters: true });
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());

var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);

...

Answer 1

You can trigger the click event on the title column...

do it like this...

$(function () {
// prepare the data
for (var i = 0; i < 50000; i++) {
var d = (data[i] = {});

   d["id"] = "id_" + i;
   d["num"] = i;
   d["title"] = "Task " + i;
   d["duration"] = i + " days";
   d["percentComplete"] = Math.round(Math.random() * 100);
   d["start"] = "01/01/2009";
   d["finish"] = "01/05/2009";
   d["effortDriven"] = (i % 5 == 0);
} 

dataView = new Slick.Data.DataView({ inlineFilters: true });
grid = new Slick.Grid("#myGrid", dataView, columns, options);
grid.setSelectionModel(new Slick.RowSelectionModel());

var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);

...
$('.slick-header-columns').children().eq(2).trigger('click');  // eq(2) for the 3rd col (title)..

Answer 2

If you look for something simple, you can use fastSort() :

dataView.fastSort('title', true)