Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Month Datepicker in Grid



Currently I'm in a development, and I need create a grid with updating(add) option; the required data type fields are: combo and datepicker. I've defined:

In the datapicker I just need to show the selection of months and years; without showing the days. I have searched your documentation( & and forums but I do not see anywhere that you have that type of configuration in your component.


My current result is the following:

And what I really need is something like this:

Additional: Another flaw that happens to me is that whenever I click for the first time when adding a new row, it shows me the following message by default, which at the level of user experience is very annoying and I do not know how I could eliminate it.

After the click:

Thanks in advance


    //TEST ***********************************************
        var dsT = [
            { "pkk": 1230, "ElementoPEP": "Elemento PEP", "CuentaIngIntegra": "Cuenta Ingresos Integra", "InicioVigencia": "20161120","FinVigencia":"20171120" },
            { "pkk": 1231, "ElementoPEP": "Elemento PEP", "CuentaIngIntegra": "Cuenta Ingresos Integra", "InicioVigencia": "20161120","FinVigencia":"01/2019" },
            { "pkk": 1232, "ElementoPEP": "Elemento PEP", "CuentaIngIntegra": "Cuenta Ingresos Integra", "InicioVigencia": "20161120","FinVigencia":"02/2019" },
            { "pkk": 1233, "ElementoPEP": "Elemento PEP", "CuentaIngIntegra": "Cuenta Ingresos Integra", "InicioVigencia": "20180301","FinVigencia":"03/2019" },
            { "pkk": 1234, "ElementoPEP": "Elemento PEP", "CuentaIngIntegra": "Cuenta Ingresos Integra", "InicioVigencia": "20161120","FinVigencia":"04/2019" },
            { "pkk": 1235, "ElementoPEP": "Elemento PEP", "CuentaIngIntegra": "Cuenta Ingresos Integra", "InicioVigencia": "20161120","FinVigencia":"05/2019" },
            { "pkk": 1236, "ElementoPEP": "Elemento PEP", "CuentaIngIntegra": "Cuenta Ingresos Integra", "InicioVigencia": "20170105","FinVigencia":"06/2019" },
            { "pkk": 1237, "ElementoPEP": "Elemento PEP", "CuentaIngIntegra": "Cuenta Ingresos Integra", "InicioVigencia": "20161120","FinVigencia":"07/2019" }

        var PART_STATUSone = [
          {"Name": "TEST 1", "ID": 1}, 
          {"Name": "TEST 2", "ID": 2}, 
          {"Name": "TEST 3", "ID": 3}, 
          {"Name": "TEST 4", "ID": 4}, 
          {"Name": "TEST 5", "ID": 5}, 
          {"Name": "TEST 6", "ID": 6},
          {"Name": "TEST 7", "ID": 7}

        var PART_STATUStwo = [
          {"Name": "TEST 11", "ID": 11}, 
          {"Name": "TEST 12", "ID": 12}, 
          {"Name": "TEST 13", "ID": 13}, 
          {"Name": "TEST 14", "ID": 14}, 
          {"Name": "TEST 15", "ID": 15}, 
          {"Name": "TEST 16", "ID": 16},
          {"Name": "TEST 17", "ID": 17}

        // Min. Date ///////////////////////////////////
        var startdate = dsT[0].InicioVigencia;
        for (let prop in dsT) {
          if(moment(dsT[prop].InicioVigencia).diff(moment(startdate)) > 0)
            startdate = dsT[prop].InicioVigencia;
        var new_date = new Date(moment(startdate, "YYYYMMDD").add(1,'month'));         
        /////////////////////////////////// Min. Date //   

          autoGenerateColumns: false,
          renderCheckboxes: true,
          primaryKey: "pkk",

          columns: [
                  { headerText: "Elemento PEP", key: "ElementoPEP", dataType: "string" },
                  { headerText: "Cuenta Ingresos Integra", key: "CuentaIngIntegra", dataType: "string" },
                  { headerText: "Inicio Vigencia", key: "InicioVigencia", dataType: "date", format: "MM/yyyy" },
                  { headerText: "Fin Vigencia", key: "FinVigencia", dataType: "date", format: "MM/yyyy" },
                  { headerText: "PK", key: "pkk", dataType: "number", hidden: true }],
          dataSource: dsT,
          dataSourceType: "json",
          responseDataKey: "results",

          features: [
                name: "Updating",
                enableAddRow: true,
                editMode: "none",
                enableDeleteRow: false,
                rowEditDialogContainment: "owner",
                showReadonlyEditors: false,
                enableDataDirtyException: false,

                columnSettings: [
                      columnKey: "ElementoPEP",
                      editorType: "combo",
                      required: true,
                      editorOptions: {
                          dataSource: PART_STATUSone
                      columnKey: "CuentaIngIntegra",
                      editorType: "combo",
                      required: true,
                      editorOptions: {
                          dataSource: PART_STATUStwo
                    columnKey: "InicioVigencia",
                    editorType: "datepicker",
                    validation: true,
                    required: true,
                    dataMode: "date", 
                    dateDisplayFormat: "MM/yyyy", 
                    editorOptions: {
                      disabled: false,
                      minValue: new_date,
                      changeMonth: true,
                      changeYear: true
                    columnKey: "FinVigencia", 
                    editorType: "datepicker" 
              name: "Paging",
              type: "local",
              pageSize: 7
              name: "Selection",
              mode: "row",
              multipleSelection: false


No Data
Reply Children
No Data