jQuery UI Widgets Forums Grid Sorting Dates with occasional string

Tagged: , ,

This topic contains 5 replies, has 2 voices, and was last updated by  Benji6996 11 years, 6 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Sorting Dates with occasional string #19425

    Benji6996
    Participant

    I have a grid that contains a date column. However, every now and again the value is a string instead of a date like so:

    Logged In
    ————————-
    17-April-2013 20:32
    16-April-2013 06:21
    Never
    17-April-2013 21:04

    Is it possible to either, make this column sortable but ignore the ‘Never’ values and just treat them as 00-January-0000 00:00, or can I specify a value for an empty field instead of passing ‘Never’ as a string from my JSON?

    Thanks in Advance

    B

    Sorting Dates with occasional string #19438

    support
    Participant

    Hi Benji6996,

    Please take a look at the following example at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/customsorting.htm . The sample shows how to implement custom sort comparer function.

    If you have any further questions do not hesitate to contact us.

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    Sorting Dates with occasional string #19563

    Benji6996
    Participant

    Brilliant, thank you very much

    Sorting Dates with occasional string #19613

    Benji6996
    Participant

    Whilst your reply was very helpful and has pointed me in the right direction, I was wandering whether you could help me further?

    I do not want to override the sorting algorithm for the grid, especially as the sorting algorithm for dates is quite complex and jqWidgets does it brilliantly… Instead, what I would like to do is treat any none date value in the column as a date of 00-January-0000 00:00. Effectively the cell would have a date value but display as a string. Is this possible?

    Alternatively, could I instead override the sort function with my own (as you have suggested) to simply separate the strings from the dates, and then call the jQWidgets sort method to sort the dates, then I could simply add my strings to the end or the beginning of the data table? In other words, is it possible and how can I call the JQWidgets sort method on an array or object containing custom data?

    Thanks in advance

    Sorting Dates with occasional string #19614

    support
    Participant

    Hi Benji6996,

    The “Never” value is interpreted as Min Date by default.

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcalendar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxnumberinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatetimeinput.js"></script>
    <script type="text/javascript" src="../../jqwidgets/globalization/globalize.js"></script>
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript" src="generatedata.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = '';
    // prepare the data
    var data = generatedata(200);
    data[0].date = "Never";
    var source =
    {
    localdata: data,
    datatype: "array",
    updaterow: function (rowid, rowdata, commit) {
    // synchronize with the server - send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failder.
    commit(true);
    },
    datafields:
    [
    { name: 'firstname', type: 'string' },
    { name: 'lastname', type: 'string' },
    { name: 'productname', type: 'string' },
    { name: 'available', type: 'bool' },
    { name: 'quantity', type: 'number' },
    { name: 'price', type: 'number' },
    { name: 'date', type: 'date' }
    ]
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    // initialize jqxGrid
    $("#jqxgrid").jqxGrid(
    {
    width: 685,
    source: dataAdapter,
    editable: true,
    sortable: true,
    selectionmode: 'multiplecellsadvanced',
    columns: [
    { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 80 },
    { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 80 },
    { text: 'Product', columntype: 'dropdownlist', datafield: 'productname', width: 195 },
    { text: 'Available', datafield: 'available', columntype: 'checkbox', width: 67 },
    {
    text: 'Ship Date', datafield: 'date', columntype: 'datetimeinput', width: 110, align: 'right', cellsalign: 'right', cellsformat: 'd',
    validation: function (cell, value) {
    if (value == "")
    return true;
    var year = value.getFullYear();
    if (year >= 2014) {
    return { result: false, message: "Ship Date should be before 1/1/2014" };
    }
    return true;
    }
    },
    {
    text: 'Quantity', datafield: 'quantity', width: 70, align: 'right', cellsalign: 'right', columntype: 'numberinput',
    validation: function (cell, value) {
    if (value < 0 || value > 150) {
    return { result: false, message: "Quantity should be in the 0-150 interval" };
    }
    return true;
    },
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
    }
    },
    { text: 'Price', datafield: 'price', align: 'right', cellsalign: 'right', cellsformat: 'c2', columntype: 'numberinput',
    validation: function (cell, value) {
    if (value < 0 || value > 15) {
    return { result: false, message: "Price should be in the 0-15 interval" };
    }
    return true;
    },
    createeditor: function (row, cellvalue, editor) {
    editor.jqxNumberInput({ digits: 3 });
    }
    }
    ]
    });
    });
    </script>
    </head>
    <body class='default'>
    <div id='jqxWidget'>
    <div id="jqxgrid"></div>
    </div>
    </body>
    </html>

    Best Wishes,
    Mariya

    jQWidgets Team
    http://www.jqwidgets.com

    Sorting Dates with occasional string #19630

    Benji6996
    Participant

    How odd! I tested this before and it didn’t work… Must have been something else in my code.

    Thank you very much

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.