datetimeinput selecting year instead of date when gets focus

[njaParticipant]

Hi there,

I have a grid with a datetimeinput column (datafield: ReceivedShelvedDate). When the user tabs into the field the year portion is being highlighted rather than say the month or whole field even.

                        { text: 'Rec/Sh Date', datafield: 'ReceivedShelvedDate', cellsformat: 'MM/dd/yyyy', columntype: 'datetimeinput', width: 120,
                            rendered: function (element) {
                                $(element).jqxTooltip({
                                    position: 'mouse', opacity: 1, theme: 'darkblue',
                                    content: "Received/Shelved Date for Publication."
                                });
                            }

},

It isn’t anything special so I am not sure why this would be happening, but it definitely is not optimal.

More detailed code sample below.

thanks,
nja

// ajax call for data, create data adapter, build the grid, insert new row 

            // ================= Grid Source ======================
            //prepare the data, each datafield should have a “type” field – “string”, “number”, “bool” or “date”.
            //var poId = 1; //Html.Raw(Model.PublisherPurchaseOrderId);
            var urlToGoTo = '/Publications/getInvoicePublications/?id=' + InvoiceId;
            var source = {
                type: "POST",
                datatype: "json",
                datafields: [
                    { name: 'PublicationId', type: 'number' },
                    { name: 'PublisherId', type: 'number' },
                    { name: 'PublisherName', type: 'string' },
                    { name: 'PublicationStatusId', type: 'number' },
                    { name: 'StatusName', type: 'string' },
                    { name: 'Title', type: 'string' },
                    { name: 'LibraryId', type: 'number' },
                    { name: 'LibraryName', type: 'string' },
                    { name: 'PublicationTypeId', type: 'number' },
                    { name: 'TypeName', type: 'string' },
                    { name: 'ReceivedShelvedDate', type: 'date' },
                    { name: 'Complimentary', type: 'bool' },
                    { name: 'StandingOrder', type: 'bool' },
                    { name: 'Cost', type: 'number' },
                    { name: 'ShippingCost', type: 'number' },
                    { name: 'Taxes', type: 'number' },
                    { name: 'IsParent', type: 'IsParent'},
                    { name: 'ParentId', type: 'number' },
                    { name: 'ParentTitle', type: 'string' },
                    { name: 'VolumeNumber', type: 'number' },
                    { name: 'AreaOfLawList', type: 'string' },
                    { name: 'Comment', type: 'string' },
                    { name: 'Active', type: 'bool' },
                ],
                url: urlToGoTo
            };

            var dataAdapter = new $.jqx.dataAdapter(source);

            // ==================== build item grid
            $("#itemsGrid").jqxGrid({
                source: dataAdapter,
                width: '100%',
                height: 280,
                theme: 'web',
                enabletooltips: true,
                editable: true,
                editmode: 'click',
                columnsresize: true,
                sortable: false,
                showaggregates: true,
                showstatusbar: true,
                selectionmode: 'singlerow',
                columns: [
                        { text: 'PublicationId', datafield: 'PublicationId', width: 90, hidden: true },
                        { text: 'PublisherId', datafield: 'PublisherId', hidden: true }, // publisher information from invoice
                        { text: 'PublisherName', datafield: 'PublisherName', hidden: true},
                        { text: 'Rec/Sh Date', datafield: 'ReceivedShelvedDate', cellsformat: 'MM/dd/yyyy', columntype: 'datetimeinput', width: 120,
                            rendered: function (element) {
                                $(element).jqxTooltip({
                                    position: 'mouse', opacity: 1, theme: 'darkblue',
                                    content: "Received/Shelved Date for Publication."
                                });
                            }
                        },
                        { text: 'LibraryName', datafield: 'LibraryName', hidden: true},
                        { text: 'JO/Facility Library', datafield: 'LibraryId', displayfield: 'LibraryName', columntype: 'dropdownlist',
                            width: 180, aggregates: ['count'],
                            createeditor: function (row, column, editor) {
                                // var casenbr = $('#jqxInput').jqxInput('val');
                                var newLibURL = "/Publications/LibraryByUserDDLData/";
                                var newLibBySecSource =
                                {
                                    datatype: "json",
                                    datafields:
                                    [
                                        { name: 'LibraryName' },
                                        { name: 'LibraryId' }
                                    ],
                                    url: newLibURL,
                                    async: false
                                };

                                // load adapter from our updated ajax source and assign to grid
                                var newLibDataAdapter = new $.jqx.dataAdapter(newLibBySecSource, {
                                    loadError: function (jqXHR, status, error) {
                                        $("#resultMessagePubGrid").html(error);
                                    },
                                });

                                editor.source = newLibDataAdapter;
                                // assign a new data source to the dropdownlist... limited by logged in secretary, unless admin...
                                editor.jqxDropDownList({source: newLibDataAdapter,
                                    displayMember: 'LibraryName',
                                    valueMember: 'LibraryId',
                                    filterable: true,
                                    searchMode: 'containsignorecase',
                                    dropDownWidth: 450,
                                    //autoDropDownHeight: true,
                                    dropDownVerticalAlignment: 'bottom',
                                    dropDownHorizontalAlignment: 'left'
                                });
                            },
                        },
                        { text: 'Title', datafield: 'Title', width: 200,  },
                        { text: 'Cost', datafield: 'Cost', cellsformat: 'f2', cellsalign: 'right', width: 80,
                            aggregates: [{
                                'Total':
                                    function (aggregatedValue, currentValue, column, record) {
                                        var total = currentValue;
                                        return aggregatedValue + total;
                                    }
                            }],
                            aggregatesrenderer: function (aggregates) {
                                var renderstring = aggregates["Total"];
                                return '<span class="allViewSummary">' + renderstring + '</span>';
                            },
                        },
                        { text: 'Shipping', datafield: 'ShippingCost', cellsformat: 'f2', cellsalign: 'right', width: 85,
                            aggregates: [{
                                'Total':
                                    function (aggregatedValue, currentValue, column, record) {
                                        var total = currentValue;
                                        return aggregatedValue + total;
                                    }
                            }],
                            aggregatesrenderer: function (aggregates) {
                                var renderstring = aggregates["Total"];
                                return '<span class="allViewSummary">' + renderstring + '</span>';
                            },
                        },
                        { text: 'Taxes', datafield: 'Taxes', cellsformat: 'f2', cellsalign: 'right', width: 80,
                            aggregates: [{
                                'Total':
                                    function (aggregatedValue, currentValue, column, record) {
                                        var total = currentValue;
                                        return aggregatedValue + total;
                                    }
                            }],
                            aggregatesrenderer: function (aggregates) {
                                var renderstring = aggregates["Total"];
                                return '<span class="allViewSummary">' + renderstring + '</span>';
                            },
                        },
                          {
                              text: 'Total', editable: false, datafield: 'linetotal',  cellsalign: 'right', width: 80 ,
                              cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
                                  var total = parseFloat(rowdata.Cost) + parseFloat(rowdata.ShippingCost) + parseFloat(rowdata.Taxes);
                                  return "<div style='margin: 4px;' class='jqx-right-align'>" + dataAdapter.formatNumber(total, "f2") + "</div>";
                              },
                              aggregates: [{
                                  'Total':
                                      function (aggregatedValue, currentValue, column, rowdata) {
                                          // var total = currentValue;
                                          var total = parseFloat(rowdata.Cost) + parseFloat(rowdata.ShippingCost) + parseFloat(rowdata.Taxes);
                                          return parseFloat(aggregatedValue) + parseFloat(total);
                                      }
                              }],
                              aggregatesrenderer: function (aggregates) {
                                  var renderstring = aggregates["Total"];
                                  return '<span class="allViewSummary">' + dataAdapter.formatNumber(renderstring, "f2")  + '</span>';
                              },
                          },
                        { text: 'TypeName', datafield: 'TypeName', hidden: true},
                        { text: 'Publication Type', datafield: 'PublicationTypeId', displayfield: 'TypeName', columntype: 'dropdownlist', width: '125px',
                            createeditor: function (row, column, editor) {
                                // var casenbr = $('#jqxInput').jqxInput('val');
                                var newTypeURL = "/Publications/PublicationTypesDDLData/?id=" + 2;
                                var newTypeSource =
                                {
                                    datatype: "json",
                                    datafields:
                                    [
                                        { name: 'TypeName' },
                                        { name: 'PublicationTypeId' }
                                    ],
                                    url: newTypeURL,
                                    async: false
                                };

                                // load adapter from our updated ajax source and assign to grid
                                var newTypeDataAdapter = new $.jqx.dataAdapter(newTypeSource, {
                                    loadError: function (jqXHR, status, error) {
                                        $("#resultMessagePubGrid").html(error);
                                    },
                                });
                                editor.source = newTypeDataAdapter;
                                // assign a new data source to the dropdownlist...
                                editor.jqxDropDownList({source: newTypeDataAdapter,
                                    displayMember: 'TypeName',
                                    valueMember: 'PublicationTypeId',
                                    filterable: true,
                                    searchMode: 'containsignorecase',
                                    //autoDropDownHeight: true,
                                    dropDownVerticalAlignment: 'bottom',
                                    dropDownHorizontalAlignment: 'left'
                                });
                                editor.jqxDropDownList('open' );
                            },
                        },
                    { text: 'Area Of Law', columntype: 'template', datafield: 'AreaOfLawList', width: 120,
                        createeditor: function (row, cellvalue, editor, cellText, width, height) {
                            // construct the editor.
                            editor.jqxDropDownList({
                                checkboxes: true, source: lawTypeAdapter, displayMember: 'label', valueMember: 'value', width: width, height: height,
                                selectionRenderer: function () {
                                    return "<span style='top:4px; position: relative;'>Select All that Apply</span>";
                                }
                            });
                            editor.jqxDropDownList('open' );
                        },
                        initeditor: function (row, cellvalue, editor, celltext, pressedkey) {
                            // set the editor's current value. The callback is called each time the editor is displayed.
                            var items = editor.jqxDropDownList('getItems');
                            editor.jqxDropDownList('uncheckAll');
                            var values = cellvalue.split(/,\s*/);
                            for (var j = 0; j < values.length; j++) {
                                for (var i = 0; i < items.length; i++) {
                                    if (items[i].label === values[j]) {
                                        editor.jqxDropDownList('checkIndex', i);
                                    }
                                }
                            }
                        },
                        geteditorvalue: function (row, cellvalue, editor) {
                            // return the editor's value.
                            return editor.val();
                        }
                    },
                        { text: 'Comp', datafield: 'Complimentary', columntype: 'checkbox', width: 60,
                            rendered: function (element) {
                                $(element).jqxTooltip({
                                    position: 'mouse', opacity: 1, theme: 'darkblue',
                                    content: "Was this Publication Complimentary?"
                                });
                            }
                        },
                        { text: 'SO', datafield: 'StandingOrder', columntype: 'checkbox', width: 60,
                            rendered: function (element) {
                                $(element).jqxTooltip({
                                    position: 'mouse', opacity: 1, theme: 'darkblue',
                                    content: "Is there a Standing Order for this Publication?"
                                });
                            }
                        },
                       // { text: 'ParentId', datafield: 'ParentId' },
                        { text: 'Is Parent?', datafield: 'IsParent', columntype: 'checkbox', width: 80,
                            rendered: function (element) {
                                $(element).jqxTooltip({
                                    position: 'mouse', opacity: 1, theme: 'darkblue',
                                    content: "Is this a parent set?"
                                });
                            }
                        },
                       { text: 'ParentTitle', datafield: 'ParentTitle', hidden: true },
                       { text: 'Parent Set', datafield: 'ParentId', displayfield: 'ParentTitle', columntype: 'combobox', width: 200,
                           createeditor: function (row, column, editor) {
                               // var casenbr = $('#jqxInput').jqxInput('val');
                               var newParentURL = "/Publications/PublicationParentDDLData/";
                               var newParentSource =
                               {
                                   datatype: "json",
                                   datafields:
                                   [
                                       { name: 'ParentTitle' },
                                       { name: 'ParentId' }
                                   ],
                                   url: newParentURL,
                                   async: false
                               };

                               // load adapter from our updated ajax source and assign to grid
                               var newParentDataAdapter = new $.jqx.dataAdapter(newParentSource, {
                                   loadError: function (jqXHR, status, error) {
                                       $("#resultMessagePubGrid").html(error);
                                   },
                               });

                               editor.source = newParentDataAdapter;
                               // assign a new data source to the dropdownlist...
                               editor.jqxComboBox({source: newParentDataAdapter,
                                   displayMember: 'ParentTitle',
                                   valueMember: 'ParentId',
                                   //filterable: true,
                                   //searchMode: 'containsignorecase',
                                   dropDownWidth: 290,
                                   //autoDropDownHeight: true,
                                   dropDownVerticalAlignment: 'bottom',
                                   dropDownHorizontalAlignment: 'left'
                               });
                           },
                       },
                    { text: 'Volume', datafield: 'VolumeNumber',  width: 100,},
            {
                text: 'Comment', datafield: 'Comment', width: 80, editable: false,
                // cellsrenderer: function (row, column, value) {
                cellsrenderer: function (index, datafield, value, defaultvalue, column, rowdata) {
                    if (value) {
                        //return "<div style='width: 100%; height: 100%;'><span class='glyphicon glyphicon-list-alt'></span></div>";
                        return '<div style="margin-top: 2px; width: 100%; height: 100%; font-size: large; text-align: center; overflow: hidden; text-overflow: ellipsis;" onclick="notesDivClick(' + index + ')"><span class="glyphicon glyphicon-list-alt text-bold"></span></div>';
                    }
                    else {
                        return '<div style="margin-top: 2px; width: 100%; height: 100%; font-size: large; text-align: center; overflow: hidden; text-overflow: ellipsis;" onclick="notesDivClick(' + index + ')"><span class="glyphicon glyphicon-unchecked text-muted"></span></div>';

                    }
                },
                rendered: function (element) {
                    $(element).jqxTooltip({
                        position: 'mouse', opacity: 1, theme: 'darkblue',
                        content: "Comments for Publication."
                    });
                }
            },
            { text: 'StatusName', datafield: 'StatusName',  hidden: true},
            { text: 'Status', datafield: 'PublicationStatusId', displayfield: 'StatusName',
                columntype: 'dropdownlist', width: 110, editable: false,
                createeditor: function (row, column, editor) {
                    // var casenbr = $('#jqxInput').jqxInput('val');
                    var newStatusURL = "/Publications/PublicationStatusDDLData/";
                    var newPubStatusSource =
                    {
                        datatype: "json",
                        datafields:
                        [
                            { name: 'StatusName' },
                            { name: 'PublicationStatusId' }
                        ],
                        url: newStatusURL,
                        async: false
                    };

                    // load adapter from our updated ajax source and assign to grid
                    var newPubStatusDataAdapter = new $.jqx.dataAdapter(newPubStatusSource, {
                        loadError: function (jqXHR, status, error) {
                            $("#resultMessagePubGrid").html(error);
                        },
                    });

                    editor.source = newLibDataAdapter;
                    // assign a new data source to the dropdownlist... limited by logged in secretary, unless admin...
                    editor.jqxDropDownList({source: newPubStatusDataAdapter,
                        displayMember: 'StatusName',
                        valueMember: 'PublicationStatusId',
                        filterable: true,
                        searchMode: 'containsignorecase',
                        dropDownWidth: 220,
                        //autoDropDownHeight: true,
                        dropDownVerticalAlignment: 'bottom',
                        dropDownHorizontalAlignment: 'left',
                    });
                },
            },
            { text: 'Active', datafield: 'Active', hidden: true},
                ]
            });

            // =============== helper functions ===============

            function generateNewRowData() {
                var data = new Array();
                var row = {};
                var i = 0;

                var datainformation = $('#itemsGrid').jqxGrid('getdatainformation');
                var rowscount = datainformation.rowscount;
                //var sortinformation = datainformation.sortinformation;
                //var sortcolumn = sortinformation.sortcolumn;
                //var sortdirection = sortinformation.sortdirection;
                //var paginginformation = datainformation.paginginformation;
                //var pagenum = paginginformation.pagenum;
                //var pagesize = paginginformation.pagesize;
                //var pagescount = paginginformation.pagescount;

                row["PublicationId"] = 0 ;
                row["PublisherId"] = 0 ;
                row["PublisherName"] = "" ;
                row["Title"] = "" ;
                row["LibraryId"] = 0 ;
                row["LibraryName"] = "" ;
                row["PublicationTypeId"] = 0 ;
                row["TypeName"] = "" ;
                row["PublicationStatusId"] = 0 ;
                row["StatusName"] = "" ;

                var dateC = new Date();
                row['ReceivedShelvedDate'] =  dateC;
                row["Complimentary"] = false ;
                row["StandingOrder"] = false ;
                row["Cost"] = 0.00 ;
                row["ShippingCost"] = 0.00 ;
                row["Taxes"] = 0.00 ;
                row["IsParent"] = false;
                row["ParentId"] = 0 ;
                row["ParentTitle"] = "" ;
                row["VolumeNumber"] = "" ;
                row["AreaOfLawList"] = "" ;
                row["Comment"] = "" ;
                row["Active"] = true ;

                data[i] = row;
                return data;
            }

        });

[Author]

Posts