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
  • 345
    Offline posted

    Hello, Renzo

     

    The yellow validation message shows up because your DataSource doesn’t have proper JavaScript Date objects.

    Instead you are using strings and later your calculations (for example the new_date variable) are incorrect. After that you pass it to the grid during initialization and that causes the issue.

    Regarding the custom Month/Year DatePicker: see the code sample I provided.

     

    <!DOCTYPE html>
    <html>
    <head>
    		<title>Sample</title>
    		<script src="https://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    		<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    		<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
    		<script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.core.js"></script>
    		<script src="https://cdn-na.infragistics.com/igniteui/2017.2/latest/js/infragistics.lob.js"></script>
    		<script src="https://igniteui.github.io/help-samples/data-files/adventureworks.min.js"></script>
    		<link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet">
    		<link href="https://cdn-na.infragistics.com/igniteui/2017.2/latest/css/structure/infragistics.css" rel="stylesheet">
    		<style>
    			.ui-datepicker-calendar
    			{
    				display: none;
    			}
    		</style>
    </head>
    <body>
    <table id="grid"></table>
    <script>
    	var dataSrc = [
    		{ "ID": 10249, "Date": "2/2017", "Name": "Toms Spezialitäten"},
    		{ "ID": 10250, "Date": "3/2017", "Name": "Hanari Carnes"},
    		{ "ID": 10251, "Date": "3/2017", "Name": "Victuailles en stock"},
    		{ "ID": 10248, "Date": "4/2017", "Name": "Vins et alcools Chevalier"},
    		{ "ID": 10252, "Date": "4/2017", "Name": "Suprêmes délices"},
    		{ "ID": 10253, "Date": "6/2017", "Name": "Hanari Carnes"},
    		{ "ID": 10254, "Date": "7/2017", "Name": "Chop-suey Chinese"}
    		]
    	$(function () {
    		$('#grid').igGrid({ 
    			dataSource: dataSrc,       
    			autoGenerateColumns: false, 
    			primaryKey: "ID",
    			columns: [ 
    				{ key: 'ID', dataType: 'number', headerText: 'ID', width: '20%', readOnly: true }, 
    				{ key: 'Name', dataType: 'string', headerText: 'Name', width: '60%'},
    				{ key: 'Date', dataType: 'date', format: 'MM/yyyy', width: '20%'},
    			], 
    			features: [
    				{
    					name: "Resizing",
    					deferredResizing: false,
    					allowDoubleClickToResize: true
    				},
    				{
    					name: "Filtering",
    					type: "local",
    					filterDialogContainment: "window",
    					mode: "advanced"
    				},
    				{
    					name: "Updating",
    					editMode: "cell",
    					enableAddRow: true,
    					enableDeleteRow: true,
    					columnSettings: [
    						{
    							columnKey:"Date", 
    							editorType: "datepicker",
    							dataMode: "date",
    							editorOptions:{
    								dateDisplayFormat:"MMM/yyyy",
    								datepickerOptions: {
    									changeMonth:true,
    									changeYear: true,
    									onChangeMonthYear: () => {
    										var month = $(".ui-datepicker-month :selected").val();
    										var year = $(".ui-datepicker-year :selected").text();
    										var editor = $('#grid').igGridUpdating("editorForKey", "Date");
    										editor.igDatePicker("value", new Date(year, month, 1));
    									}
    								}
    							}
    						}
    					]
    				}
    			],
    			width: "75%",
    		});
    });
    </script> 
    </body>
    </html>

     

    If you need any additional assistance, feel free to contact me.

     

    Best Regards,

    Vasil Pavlov

    Associate Software Developer

    Infragistics, Inc.

    www.infragistics.com/support

Children
No Data