Guriddo » Topic: Datepicker in jqgrid dynamic

Datepicker in jqgrid dynamic

Guriddo
Datepicker dynamic date
Datepicker in jqgrid dynamic

Tagged: Datepicker dynamic date

This topic has 6 replies, 3 voices, and was last updated 11 years, 3 months ago by tony.

Creator

Topic
February 7, 2015 at 7:29 pm #118691

existi_David
Participant

Hi!

In the same project I have two jsp files about jqgrid. On the fields “date” in the Demo version of guriddo that I have in my project display the calendar datepicker well.
However, it does not work when I generate the colName, colModel and colData dynamically.
I have been suggested this web (http://stackoverflow.com/questions/5171617/how-to-add-custom-formatter-for-jqgrid-with-dynamic-column-binding/5175127#5175127) but it seems that is used to modify the value in the table and not to generate additional code in the ‘dataInit’ property.

Code demo is http://www.guriddo.net/demo/guriddojs/edit_add_delete/dialogs_edit_controls/index.html

My code in Java:

StringBuilder functionDate = new StringBuilder();
functionDate.append(” function (element) { $(element).datepicker({ “);
functionDate.append(” id: ‘” + nombre + “_datePicker’, “);
functionDate.append(” dateFormat: ‘” + Constantes.JQGRID_FORMAT_DATE + “‘, “);
functionDate.append(“}); }”);

editOptionsCol.put(“dataInit”, functionDate.toString());

(dataInit into editoptions and editoptions into colModel)
Creator

Topic

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

Author

Replies

February 9, 2015 at 3:27 pm #118921

guriddo.support

Participant

Hello,

Please look into your generated code what you have. You can use the FireFox or Chrome console for this purpose.

Please, check if you have a error. The very simple test is to put a simple alert of place of datepicker.

Kind Regards,

Bojan

Guriddo Support Team

February 17, 2015 at 11:52 am #119688

existi_David

Participant

Thanks for your reply.

I have fixed problem.

I will show the new code to guriddo people when it is all right.

February 18, 2015 at 10:04 am #119782

guriddo.support

Participant

Hello,

Gald to hear thes. We will wait for your solution.

Have a nicve day.

Kind Regards,

Bojan

Guriddo Support Team

March 26, 2015 at 1:16 am #123639

existi_David

Participant

Hi,
I wanted it all dynamic. The proyect have a text field with select SQL, when you click execute button generate table jqgrid.
In server side (JSON):

case Types.TIMESTAMP:
  infCol.put(VAR_FORMATTER, &quot;date&quot;);
  infCol.put(VAR_FORMAT_USER, &quot;date&quot;);

  // Datepicker
  StringBuilder funcionFecha = new StringBuilder();
  funcionFecha.append(&quot; function (element) { $(element).datepicker({ &quot;);
  funcionFecha.append(&quot; id: &#039;&quot; + name + &quot;_datePicker&#039; &quot;);
  funcionFecha.append(&quot;,&quot;);
  funcionFecha.append(&quot; dateFormat: &#039;&quot; + &quot;dd-mm-yy&quot; + &quot;&#039;, &quot;);
  funcionFecha.append(&quot; onSelect: function(datetext){ seleccionFechaDP(this,datetext); }&quot;);
  funcionFecha.append(&quot;}); }; &quot;);

  editOptionsCol.put(VAR_DATA_INIT, funcionFecha.toString());
  editOptionsCol.put(VAR_MAX_LENGTH, 19);

  // Opciones del formato
  formatOptions.put(VAR_SRC_FORMAT, &quot;U/1000&quot;);
  formatOptions.put(VAR_NEW_FORMAT, &quot;d-m-Y H:i:s&quot;);

  // Add objects
  infCol.put(VAR_EDITRULES, editRulesCol);
  infCol.put(VAR_EDITOPTIONS, editOptionsCol);
  infCol.put(VAR_FORMAT_OPTIONS, formatOptions);

... 

// Return result
// infCol object into json with key colModel

case Types.TIMESTAMP:

infCol.put(VAR_FORMATTER, "date");

infCol.put(VAR_FORMAT_USER, "date");

// Datepicker

StringBuilder funcionFecha = new StringBuilder();

funcionFecha.append(" function (element) { $(element).datepicker({ ");

funcionFecha.append(" id: '" + name + "_datePicker' ");

funcionFecha.append(",");

funcionFecha.append(" dateFormat: '" + "dd-mm-yy" + "', ");

funcionFecha.append(" onSelect: function(datetext){ seleccionFechaDP(this,datetext); }");

funcionFecha.append("}); }; ");

editOptionsCol.put(VAR_DATA_INIT, funcionFecha.toString());

editOptionsCol.put(VAR_MAX_LENGTH, 19);

// Opciones del formato

formatOptions.put(VAR_SRC_FORMAT, "U/1000");

formatOptions.put(VAR_NEW_FORMAT, "d-m-Y H:i:s");

// Add objects

infCol.put(VAR_EDITRULES, editRulesCol);

infCol.put(VAR_EDITOPTIONS, editOptionsCol);

infCol.put(VAR_FORMAT_OPTIONS, formatOptions);

...

// Return result

// infCol object into json with key colModel

In client server:

...
$.ajax({
  type : &quot;POST&quot;,
  url : &quot;executeSQL&quot;,
  data : form.serialize(),
  dataType : &quot;json&quot;,
  success : function(result) {
    colD = result.colData;
    colN = result.colNames;
    colM = result.colModel;

    var i, cm;

    for (i = 0; i &lt; colM.length; i++) {
      cm = colM<em class="d4pbbc-italic"></em>;

      if (cm.hasOwnProperty(&quot;format_user&quot;)&amp;&amp; functionsMapping.hasOwnProperty(cm.format_user)) {
        cm.formatter = functionsMapping[cm.format_user];
      }
    }

    $(tablaResul).jqGrid(&#039;GridUnload&#039;);

    $(tablaResul).jqGrid({
      datatype : &#039;local&#039;,
      colNames : colN,
      colModel : colM,
      data : colD.rows,
      rowNum : 20,
      height : 250,
      autowidth : true,
      shrinkToFit : false,
      pager : tablaPie,
      viewrecords : true,
      loadonce : true
});

...

var functionsMapping = {
  // here we define the implementations of the custom formatter which we use
  &quot;date&quot; : function(cellValue, opts, rowObject) {
    var cellDisplayValue = &#039;&#039;;
    try {
      var funcExec = &#039;opts.colModel.editoptions.dataInit=&#039; +opts.colModel.editoptions.dataInit;
      eval(funcExec);
    } catch (err) {
      if(numError == 0){
        alert(&quot;Error (functionsMapping): &quot; + err.message);
        numError++;
      }
    }

  var operacion = rowObject.oper;

  if(operacion == null){
    if(cellValue){
      if(isNaN(cellValue)){
        // Realizada esta opcion cuando se cancela una modificacion.
        cellDisplayValue = cellValue;
      }else{
        var op = $.extend({}, $.jgrid.formatter.date);
        if (opts.colModel.formatoptions != undefined) {
          op = $.extend({}, op, opts.colModel.formatoptions);
        }
        var scrFormat = opts.colModel.formatoptions.srcformat;
        var newFormat = opts.colModel.formatoptions.newformat;

        cellDisplayValue = $.jgrid.parseDate(scrFormat, cellValue, newFormat);
      }
    }
  } else if(operacion = &quot;edit&quot;){
    cellDisplayValue = cellValue;
  }
  
  return cellDisplayValue;
  }
};

...

$.ajax({

type : "POST",

url : "executeSQL",

data : form.serialize(),

dataType : "json",

success : function(result) {

colD = result.colData;

colN = result.colNames;

colM = result.colModel;

var i, cm;

for (i = 0; i < colM.length; i++) {

cm = colM<em class="d4pbbc-italic"></em>;

if (cm.hasOwnProperty("format_user")&& functionsMapping.hasOwnProperty(cm.format_user)) {

cm.formatter = functionsMapping[cm.format_user];

}

$(tablaResul).jqGrid('GridUnload');

$(tablaResul).jqGrid({

datatype : 'local',

colNames : colN,

colModel : colM,

data : colD.rows,

rowNum : 20,

height : 250,

autowidth : true,

shrinkToFit : false,

pager : tablaPie,

viewrecords : true,

loadonce : true

});

...

var functionsMapping = {

// here we define the implementations of the custom formatter which we use

"date" : function(cellValue, opts, rowObject) {

var cellDisplayValue = '';

try {

var funcExec = 'opts.colModel.editoptions.dataInit=' +opts.colModel.editoptions.dataInit;

eval(funcExec);

} catch (err) {

if(numError == 0){

alert("Error (functionsMapping): " + err.message);

numError++;

}

var operacion = rowObject.oper;

if(operacion == null){

if(cellValue){

if(isNaN(cellValue)){

// Realizada esta opcion cuando se cancela una modificacion.

cellDisplayValue = cellValue;

}else{

var op = $.extend({}, $.jgrid.formatter.date);

if (opts.colModel.formatoptions != undefined) {

op = $.extend({}, op, opts.colModel.formatoptions);

}

var scrFormat = opts.colModel.formatoptions.srcformat;

var newFormat = opts.colModel.formatoptions.newformat;

cellDisplayValue = $.jgrid.parseDate(scrFormat, cellValue, newFormat);

}

} else if(operacion = "edit"){

cellDisplayValue = cellValue;

}

return cellDisplayValue;

}

};

Code with JQGrid 4.7.0 and JQuery 1.8.2

This reply was modified 11 years, 3 months ago by existi_David.
This reply was modified 11 years, 3 months ago by existi_David.
This reply was modified 11 years, 3 months ago by existi_David.

March 26, 2015 at 1:30 am #123643

existi_David

Participant

Line 15 of client server code is wrong.
Correction:
cm = colM square bracket i square bracket

This reply was modified 11 years, 3 months ago by existi_David.

March 26, 2015 at 8:18 am #123652

Datepicker in jqgrid dynamic

Search Forum

Recent Replies

Forum Statistics

UserOnline