Displaying month and year into drop down

[bsolTeamBglr]

Hi Paramquery,

As per our requirement, we need to display 'month' and 'year' these two drop down to be shown on one column for all the rows.
Please, provide any solution to handle by pqGrid. Since user needs to select only month and year it is better to provide UI it helps user to change month and year and it will be user friendly. Same like attached image. Our required format is 10/2017

[paramvir]

Do you mean to display the editor in all rows at all times.

You have also mentioned required format which is usually a display format. Is that display or data format.

You can't have editor and cell renderer together at the same time in a cell.

Please clarify your question.

[bsolTeamBglr]

Yes you are correct. I mean editor should display two drop down one for selecting month and one for selecting year. After editing my cell will have value in this format mm/yyyy (display format)

[paramvir]

Please use this date Editor based on jQueryUI datepicker.

Code: [Select]

        var dateEditor = function(ui) {
          var $inp = ui.$cell.find("input"),
            grid = this;
          //initialize the editor
          $inp
            .datepicker({
              changeMonth: true,
              changeYear: true,
              showAnim: '',
              dateFormat: 'mm/dd/yy',
              beforeShow: function(input, inst) {
                inst.dpDiv.css({
                  marginTop: -input.offsetHeight + 'px'
                });
              },
              onClose: function(dateText, inst) {
                var newRow = {};
                newRow[ui.dataIndx] = (inst.selectedMonth + 1) + "/01/" + inst.selectedYear;
                grid.updateRow({
                  rowIndx: ui.rowIndx,
                  newRow: newRow
                })
                grid.quitEditMode();
              }
            });
        }


Code: [Select]

    { title: "Order Date", width: "100", dataIndx: "OrderDate", dataType: 'date', format: 'mm/yy',
        editor: {
            type: 'textbox',
            init: dateEditor
        }
    },


Code: [Select]

/*css*/
.ui-datepicker-calendar {
    display: none;
}