For some reason, only the "Barriers" column is sortable in this example. When I click on any other column header, I get this error:
Unhandled exception at line 404, column 12473 in http://localhost:64039/ig_res/js/infragistics.lob.js
0x800a138f - JavaScript runtime error: Unable to get property 'currentSortDirection' of undefined or null reference
<script type="text/javascript"> var result = [{ "_id" : "03", "Penalty Turns" : 6610, "Longest Street ID" : "c629e434-d3b3-4dde-ad6a-b32e3bd78c15", "Shortest Turn Penalty" : 1, "DD" : "", "Rollup" : "RR", "1 Per" : 1, "Slow Major Roads" : 1460, "One Ways" : 171029, "RR" : "03", "Total Edits" : 3583765, "Fastest Street ID" : "bec74af5-e19e-4ca3-a979-221b1a5881fe", "Shortest Street ID" : "616fd130-2f03-4d91-b867-cdd6705d1572", "Deleted Streets" : 444902, "Longest Turn Penalty" : 7200, "Short Unnameds" : 2706539, "1 Per Total" : 2877703, "Slowest Street" : 1, "Prohibited Turns" : 32275, "Barriers" : 7027, "Slowest Street ID" : "f724ed18-9f83-4434-a532-ca0f489a4e3c", "Fastest Street" : 99, "Longest Street" : 8.80709496376834, "Shortest Street" : 8.9780612255817752E-05, "Slow Interstates" : 117, "Longest Turn Penalty ID" : "5759d284-64fc-428a-8830-61e70b9dc865", "3 or More Edits" : 19565, "Shortest Turn Penalty ID" : "0b772b41-4c85-4f1d-b562-468855209598", "Slow Unnameds" : 31757 }, { "_id" : "07", "Penalty Turns" : 3139, "Longest Street ID" : "8058f241-042d-4652-b302-d707bd842bb5", "Shortest Turn Penalty" : 1, "DD" : "", "Rollup" : "RR", "1 Per" : 1, "Slow Major Roads" : 2929, "One Ways" : 178063, "RR" : "07", "Total Edits" : 4137275, "Fastest Street ID" : "6a099724-1141-4315-9539-3dd009cb7dee", "Shortest Street ID" : "802bacdf-088b-4209-8739-38b26cc8bbc5", "Deleted Streets" : 409402, "Longest Turn Penalty" : 2000, "Short Unnameds" : 3043046, "1 Per Total" : 3212723, "Slowest Street" : 1, "Prohibited Turns" : 26187, "Barriers" : 6033, "Slowest Street ID" : "53f98981-c347-43ae-97b7-e0e135271d53", "Fastest Street" : 99, "Longest Street" : 267.71903132322245, "Shortest Street" : 8.2041856593311191E-09, "Slow Interstates" : 98, "Longest Turn Penalty ID" : "48c89737-736b-4cbe-9969-f362081c0411", "3 or More Edits" : 22367, "Shortest Turn Penalty ID" : "52dea989-a0c7-4a4f-b682-4117acd3924b", "Slow Unnameds" : 35337 }]
$(function () {
$("#grid").igGrid( { autoGenerateColumns: false, dataSource: result, columns: [ { headerText: "Region", key: "RR", dataType: "string", template: '<a href="./${RR}">${RR}</a>', width: "100px" }, { headerText: "Turns", group: [ { headerText: "Penalty Turns", key: "Penalty Turns", dataType: "number", width: "75px" }, { headerText: "Prohibited Turns", key: "Prohibited Turns", dataType: "number", width: "100px" }, { headerText: "Shortest Turn Penalty ID", key: "Shortest Turn Penalty ID"}, { headerText: "Shortest Turn Penalty", key: "Shortest Turn Penalty", dataType: "number", width: "100px", template: '<a href="../ViewEdit/Turn/${Shortest Turn Penalty ID}">${Shortest Turn Penalty} sec</a>' }, { key: "Longest Turn Penalty ID"}, { headerText: "Longest Turn Penalty", key: "Longest Turn Penalty", dataType: "number", width: "100px", template: '<a href="../ViewEdit/Turn/${Longest Turn Penalty ID}">${Longest Turn Penalty} sec</a>' } ] }, { headerText: "Driveways", group: [ { headerText: "Unnamed Roads <0.25 mi", key: "Short Unnameds", dataType: "number", width: "100px" }, { key: "Shortest Street ID" }, { headerText: "Shortest Driveway", key: "Shortest Street", width: "135px", dataType: "number", format: "0.000000000", template: '<a href="../ViewEdit/${Shortest Street ID}">${Shortest Street} mi</a>' }, { key: "Longest Street ID" }, { headerText: "Longest Driveway", key: "Longest Street", dataType: "number", format: "0.000000000", template: '<a href="../ViewEdit/${Longest Street ID}">${Longest Street} mi</a>', width: "135px" } ] }, { headerText: "Speed Limits", group: [ { headerText: "Interstates <40 MPH", key: "Slow Interstates", dataType: "number", width: "110px" }, { headerText: "Unnamed Roads <10 MPH", key: "Slow Unnameds", dataType: "number", width: "110px" }, { headerText: "Major Roads <25 MPH", key: "Slow Major Roads", dataType: "number", width: "110px" }, { key: "Slowest Street ID" }, { headerText: "Slowest Street", key: "Slowest Street", dataType: "number", template: '<a href="../ViewEdit/${Slowest Street ID}">${Slowest Street} MPH</a>', width: "75px"}, { key: "Fastest Street ID" }, { headerText: "Fastest Street", key: "Fastest Street", dataType: "number", template: '<a href="../ViewEdit/${Fastest Street ID}">${Fastest Street} MPH</a>', width: "75px"} ] }, { headerText: "Street Edits", group: [ { headerText: "Barriers", key: "Barriers", dataType: "number", width: "100px"}, { headerText: "Deleted Streets", key: "Deleted Streets", dataType: "number", width: "100px" }, { headerText: "One Ways", key: "One Ways", dataType: "number", width: "100px" }, { headerText: "Streets >3 Edits", key: "3 or More Edits", dataType: "number", width: "100px" } ] } ], features: [ { name: "MultiColumnHeaders" }, { name: "Sorting", type: "local", columnSettings: [ { columnKey: "RR", allowSorting: false }, { columnKey: "Penalty Turns", allowSorting: true } ] } ] }) }) </script>
If I take out the multi-column headers, the sorting works just fine.
Hello Peter,
Thank you for posting in our community.
After investigating the code provided I believe the reason for your exception being thrown is that there are white spaces used in properties names and respectively used in the key properties for your columns. Currently, having white spaces in the column keys is not supported. The reason is that we are using the key when the id of the DOM element is generated. However id with a white space is not a valid id according to the HTML standards.
What I can suggest as a workaround is modifying column names in order to eliminate white spaces.
I hope you find this information helpful.
Please let me know if you have any additional questions regarding this matter.
Vasya,
Thanks, that did it!