Empty date type cells - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: calendar, Cell, date, delete, empty, grid, icon, jqxCalendar, jqxdatetimeinput, jqxgrid, null

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

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

Author

Empty date type cells Posts

October 2, 2014 at 2:52 am 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

October 2, 2014 at 5:24 am 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/

October 2, 2014 at 7:20 am 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!

October 2, 2014 at 7:27 am 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/

October 2, 2014 at 3:54 pm 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

October 3, 2014 at 5:03 am Empty date type cells #60574

Dimitar

Participant

Duplicate post: http://www.jqwidgets.com/community/topic/jqxgrid-crud-operations/.

Author

Posts

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

You must be logged in to reply to this topic.