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
75
Month Datepicker in Grid
posted

Hi,

 

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(https://www.igniteui.com/help/api/2017.2/ui.igdatepicker & https://www.igniteui.com/help/api/2015.2/) 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

Regards

codeExample.txt
    //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 //   

        $("#modalDialogUpdtGrid").igGrid({
          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",
          width:"100%",

          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", 
                    dateInputFormat:"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
            }]

        });  

Parents
No Data
Reply Children
No Data