jQuery UI Widgets Forums Grid Empty date type cells

This topic contains 5 replies, has 3 voices, and was last updated by  Dimitar 9 years, 4 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Empty date type cells #60503

    andy8
    Participant

    Hello everybody,

    I need date cells in the grid to show empty cells, if no dates entered (i.e. the cell value is NULL) or an user deletes the content of the cell. Is it doable?

    I have a column of “Execution dates”, which should be populated only after an user enters some date. otherwise, It has to be empty.

    Any suggestions how to do that?

    Thanks

    Empty date type cells #60507

    Dimitar
    Participant

    Hello andy8,

    Here is an example:

    <!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.11.1.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.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/demos.js"></script>
        <script type="text/javascript" src="generatedata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var data = [{ firstname: "Sven", lastname: "Wilson", productname: "Peppermint Mocha Twist", available: false, quantity: 3, price: 15, date: null}];
    
                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: 850,
                    autoheight: true,
                    source: dataAdapter,
                    editable: true,
                    enabletooltips: true,
                    selectionmode: 'multiplecellsadvanced',
                    columns: [
                      { text: 'First Name', columntype: 'textbox', datafield: 'firstname', width: 120 },
                      { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 120 },
                      { 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' },
                      {
                          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="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Empty date type cells #60511

    andy8
    Participant

    Thanks, Dimitar. It seems to be working.

    A quick question. When I click on the date field, it shows a bold number (day) on the right. How can I show the calendar icon here, like in that example (http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/cellediting.htm?classic)?

    Thanks!

    Empty date type cells #60512

    Dimitar
    Participant

    Hi andy8,

    Please update to the latest version of jQWidgets (3.5.0) and the calendar icon will appear.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Empty date type cells #60532

    bobmazzo
    Participant

    Hello Dimitar,
    I’m integrating your angular version of grid/treegrid/dropdown/tree widgets, but for the straight grid I do NOT see the basic CRUD operations.
    Also in your regular grid demos, where is the option for adding a row (i.e. create a blank row) ?
    Is this the one ? http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm?%28arctic%29#demos/jqxgrid/createremoveupdatedata.htm

    thanks.

    Bob

    Empty date type cells #60574

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

You must be logged in to reply to this topic.