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
//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 }] });
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