All geek questions in one place

Jqgrid - calendar icon not showing in embedded edit mode

The calendar icon is not displayed in the built-in editing mode. I am using jquery.ui.datepicker.js

HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.1.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" /> <link rel="stylesheet" type="text/css" media="screen" href="themes/ui.multiselect.css" /> <script src="js/jquery-1.6.4.js" type="text/javascript"></script> <script src="js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script> <script src="js/jquery.layout.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> <script src="js/jquery.corner.js" type="text/javascript"></script> <script src="plugins/ui.multiselect.js" type="text/javascript"></script> <script src="plugins/jquery.tablednd.js" type="text/javascript"></script> <script src="plugins/jquery.contextmenu.js" type="text/javascript"></script> <script src="js/jquery.ui.datepicker.js" type="text/javascript"></script> </head> <body> <div id="content"> <div class="userinfo"> <table id="myjqgrid"></table> <div id="Pager"></div> <script src="js/myjqgrid.js" type="text/javascript"></script> </div> </div> </body> </html>

Json

 { "colModel": [ { "name": "ID", "label": "ID", "width": 60, "align": "left", "jsonmap": "cells.0.value", "sortable": true }, { "name": "FirstName", "label": "FirstName", "width": 100, "align": "left", "jsonmap": "cells.1.value", "sortable": false }, { "name": "LastName", "label": "LastName", "width": 100, "align": "left", "jsonmap": "cells.2.value", "sortable": false }, { "name": "Date", "label": "Date", "width": 100, "align": "left", "jsonmap": "cells.3.value", "sortable": false } ], "colNames": [ "ID", "FirstName", "LastName", "Date" ], "mypage": { "outerwrapper": { "page":"1", "total":"1", "records":"20", "innerwrapper": { "rows":[ { "id":"1", "cells": [ { "value":"12345", "label": "ID", "editable": false }, { "value":"David", "label": "FirstName", "editable": false }, { "value":"Smith", "label": "LastName", "editable": false }, { "value":"01/02/2012", "label": "Date", "editable": true, "editformat": "text" } ] }, { "id":"2", "cells": [ { "value":"37546", "label": "ID", "editable": false }, { "value":"Willy", "label": "FirstName", "editable": false }, { "value":"Peacock", "label": "LastName", "editable": false }, { "value":"01/02/2012", "label": "Date", "editable": true, "editformat": "text" } ] } ] } } } }

JQGrid Definition

 $(document).ready(function () { var serverData = []; var showCalImg = function(id){ $("#" + id + "_date").datepicker({ showOn: 'button', buttonImageOnly: true, dateFormat: 'mmddyy', buttonImage: 'images/calendar.gif' }); } $.ajax({ type: "GET", url: "myjqgrid.json", data: "", dataType: "json", success: function(response){ var columnData = response.mypage.outerwrapper, columnNames = response.colNames, columnModel = response.colModel; $("#myjqgrid").jqGrid({ datatype: 'jsonstring', datastr: columnData, colNames: columnNames, colModel: columnModel, jsonReader: { root: "innerwrapper.rows", repeatitems: false }, gridview: true, pager: "#Pager", rowNum: 21, rowList: [21], viewrecords: true, recordpos: 'left', multiboxonly: true, multiselect: true, sortname: 'ID', sortorder: "desc", sorttype: "text", sortable: true, caption: "<h2>MY JQGRID</h2>", width: "1406", height: "100%", scrolloffset: 0, loadonce: true, cache: true, onSelectRow: function(id) { $("table#myjqgrid").editRow(id, true, showCalImg); }, loadComplete: function(){ var rowCounter, cellCounter, cellProperty, itemRows; for (rowCounter = 0; rowCounter < response.mypage.outerwrapper.innerwrapper.rows.length; rowCounter++) { itemRows = response.mypage.outerwrapper.innerwrapper.rows[rowCounter]; serverData[itemRows.recordnbr] = itemRows.cells; var cellCount = response.mypage.outerwrapper.innerwrapper.rows[rowCounter].cells.length; for (cellCounter = 0; cellCounter < cellCount; cellCounter += 1) { cellProperty = response.mypage.outerwrapper.innerwrapper.rows[rowCounter].cells[cellCounter]; var isEditable = cellProperty.editable; var cellEditFormat = cellProperty.editformat; if (isEditable === false) { $("#myjqgrid").setColProp(cellProperty.label, { editable: false }); }else{ if (isEditable === true) { $("#myjqgrid").setColProp(cellProperty.label, { editable: true, edittype: cellProperty.editformat, editoptions: { size: cellProperty.size, maxlength: cellProperty.maxlength } }); } } } } } }); $("#myjqgrid").jqGrid('navGrid','#Pager', {add:false, edit:false, del:false, position: 'right'}); } }); });
+1
source share
1 answer

The main problem with your code is that JSON data does not include the size and maxlength . If you do not use the size property for editoptions , then width: 98% will be set by inline editing to <input> , and there will be no place to display the button.

The next problem is that you are using "name": "Date" for the Date column, but instead of $("#" + id + "_date") instead of $("#" + id + "_date") in your code used $("#" + id + "_date") . Thus, the date picker will not be initialized.

Additional problem: if you included jquery-ui-1.8.14.custom.min.js , the datepicker code will already be included, and you do not need to include jquery.ui.datepicker.js additionally.

The last problem is that datepicker with showOn: 'button' only works if you run datepicker in a separate thread relative to the setTimeout JavaScript function.

After fixing the problem described above, the code will work (see demo ), but the position of the icon will not be so pleasant

enter image description here

To fix the position of <img> , you can use the following code immediately after initializing the datepicker :

 $("#" + id + ' img.ui-datepicker-trigger').css({ position: "relative", top: "4px" });

As a result, you will get the following results (see demo )

enter image description here

I personally would prefer not to use images in buttons and use jQuery UI Buttons instead. I created another demo that shows a way that looks better to me.

A column with a date that I would define as

 { name: 'invdate', index: 'invdate', width: 110, template: dateTemplate }

using template . dateTemplate I would define as

 var dateTemplate = {align: 'center', sorttype: 'date', editable: true, formatter: 'date', formatoptions: { newformat: 'dMY' }, datefmt: 'dM-Y', editoptions: { dataInit: initDateWithButton, size: 11 }, searchoptions: { sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'], dataInit: initDateWithButton, size: 11, // for the advanced searching dialog attr: {size: 11} // for the searching toolbar }};

(the date format you can choose that suits your requirements). The initDateWithButton function can be defined as

 var initDateWithButton = function (elem) { if (/^\d+%$/.test(elem.style.width)) { // remove % from the searching toolbar elem.style.width = ''; } // to be able to use 'showOn' option of datepicker in advance searching dialog // or in the editing we have to use setTimeout setTimeout(function () { $(elem).datepicker({ dateFormat: 'dd-M-yy', showOn: 'button', changeYear: true, changeMonth: true, showWeek: true, showButtonPanel: true, onClose: function (dateText, inst) { inst.input.focus(); } }); $(elem).next('button.ui-datepicker-trigger').button({ text: false, icons: {primary: 'ui-icon-calculator'} }).find('span.ui-button-text').css('padding', '0.1em'); }, 100); };

As a result, you will have a date picker that looks like the picture

enter image description here

+3
source

Source: https://habr.com/ru/post/912392/

More articles:


All Articles