I am facing issue with validation in Edit Row Template window of IgGrid in below scenario.
1)I have 2 fields mandatory in Edit Row template window,combo with checkboxes and textbox.
2) When i first entered value in textbox and then i checked 1 value in combo the done button is not enabled.
Can you please help on this?
Hello Mohammed,
Thank you for posting in our forum.
Providing me with some more detailed information regarding this issue would be appreciated and would allow me to give you a more precise answer:
I have attached an isolated code sample. Please run it on your side and see if this behavior would occur again? If it doesn’t – feel free to modify it so that it resembles your own project more closely and in case the problem reproduces – please send it back so I could debug on my side and find the root of the problem.
rowEditing.zip
If you need any additional assistance, feel free to contact me.
Hi thank you for the update PFB my comments
>>> Yes i enabled addnewrow ,editmode,enabledeleterow features.
>>>IGCombo settings
defaultValue: "", editorOptions: { allowCustomValue: true, required: true, textKey: "Name", valueKey: "Id", autoComplete: true, dataSource: , itemSeparator: '/', multiSelection: "onWithCheckboxes" }
>>> IgTexteditor settings
olumnKey: "", defaultValue: defaultDescription,validation: true, required: true
>>>14.2.20142.2140
Thank you for the update i am getting below issue in my project when i upgrade it
Uncaught TypeError: Cannot read property 'settings' of undefined
at HTMLDocument.<anonymous> (715418:478) at fire (jquery-1.9.1.js:1037) at Object.fireWith [as resolveWith] (jquery-1.9.1.js:1148) at Function.ready (jquery-1.9.1.js:433) at HTMLDocument.completed (jquery-1.9.1.js:103)(anonymous) @ 715418:478fire @ jquery-1.9.1.js:1037fireWith @ jquery-1.9.1.js:1148ready @ jquery-1.9.1.js:433completed @ jquery-1.9.1.js:103:59072/__browserLink/requestData/7cb8e4a510d944889e53bde937120520?version=2:1 Failed to load resource: the server responded with a status of 404 (Not Found)2infragistics.lob.js:150 Uncaught TypeError: describedBy.split is not a function at e.(anonymous function).(anonymous function)._mouseClickEventHandler (cdn-na.infragistics.com/.../infragistics.lob.js:150:10797) at e.(anonymous function).(anonymous function)._mouseClickEventHandler (code.jquery.com/.../jquery-ui.min.js:6:7983) at HTMLTableElement.click (infragistics.lob.js:150) at HTMLTableElement.dispatch (jquery-1.11.3.min.js:4) at HTMLTableElement.r.handle (jquery-1.11.3.min.js:4)
Above error i am getting when i clicked Addnewrow can you please help?
Also we have implemented the Addnew row using popup here is the old code can you please modify based on this.
@*$(function () {
$("#FigureAnimation").igGrid({ primaryKey: "Id", updateUrl: "", autoCommit: true, width: "100%", height: "400px", autoGenerateColumns: false, columns: [
{ key: "Id", headerText: "", dataType: "number", hidden: true }, { key: "DocumentId", headerText: "", dataType: "number", hidden: true }, { key: "FunctionName", headerText: "Function Name", dataType: "string", width: "130px" }, { key: "FunctionNumberId", headerText: "Function Number", dataType: "string", width: "130px" },//,formatter: ], features: [ { name: "Updating", enableAddRow: true, inherit: true, editMode: "rowedittemplate", rowEditDialogContainment: "window", rowEditDialogHeight: "640px", rowEditDialogContentHeight: "536px", rowEditDialogWidth: "700px", rowEditDialogFieldWidth: "280px", showReadonlyEditors: false, enableDeleteRow: true, enableDataDirtyException: false, rowEditDialogRowTemplateID: "rowEditDialogRowTemplate1", columnSettings: [ { columnKey: "Id", editorOptions: {readOnly: true } }, { columnKey: "DocumentId", defaultValue: @Model.DocumentId, editorOptions: { readOnly: true } }, { columnKey: "FunctionName", defaultValue: defaultDescription,validation: true, required: true },
{ columnKey: "FunctionNumberId", editorType: "combo",validation:true,required: true, defaultValue: "0", editorOptions: { allowCustomValue: true, textKey: "Name", valueKey: "Id", autoComplete: true, dataSource: functionNumberList, multiSelection: { enabled: true, showCheckboxes: true } } }, defaultValue: 0, editorOptions: { required: true, textKey: "Name", valueKey: "Id", mode: "dropDown", autoComplete: true, dataSource: cardTypeList } }, { columnKey: "CylinderId", editorType: "combo", defaultValue: 0, editorOptions: { required: true, textKey: "Name", valueKey: "Id", mode: "dropDown", autoComplete: true, dataSource: cylinderList } },
], rowEditDialogOpened: function (event, ui) { var comboInput1 = $("td[data-key='FunctionNumberId']").find('input'); var value1 = comboInput1.data('igCombo').options.value; comboInput1.igCombo('text', value1);//getfunctionNumberName(value1)
}, }, { name: "Sorting", type: "local", customSortFunction: sortFigureAnimation, mode: "single", columnSettings: [ { columnKey: "FunctionName", currentSortDirection: "ascending" } ] }, { name: "Tooltips", columnSettings: [ { columnKey: "Id", allowTooltips: false }, { columnKey: "DocumentId", allowTooltips: false }, { columnKey: "FunctionNumberName", allowTooltips: true }, { columnKey: "FunctionName", allowTooltips: true }, ], visibility: "always", showDelay: 500, hideDelay: 300, tooltipShowing: function(e, args) { if (canEdit) { var id = $($('#FigureAnimation_table tr')[args.index]).attr("data-id"); var matches = $.grep(gridItems, function(item, index) { return (item.Id == id)}); var item = matches[0]; args.tooltip = item.Tooltip; } }, tooltipShown: function(e, args) { var tooltipMaxWidth = "350px"; $($('#FigureAnimation_table_tooltips')[0]).css("max-width", tooltipMaxWidth); } } ], dataSource: gridItems }); });*@
Anyone can help on this issue we are still facing this issue, can you please provide any javascript in 2014 version itself because our application is huge an its impacting many areas when tried to upgrade. We are planning to upgrade later.
Hello Ghouse,
I am sorry for the delay in replaying: we do not support Ignite UI version 14.2 anymore, and would not be able to provide custom builds or bug fixes for it.
Upgrading your product to Ignite UI 18.2 would not only fix this issue for you, but it would also give you 3 years of developer support, of which the first year includes product Service Releases and bug fixes.
Hi,
No problem. We upgraded to 2016 and faced a new problem in this version. That is When I select multiple values from combo, it is showing only one value in grid when I hit "Done. Please help me to fix that issue in 2016.
Also In that sample, you have added "ScriptPath" which is calling all JS files (http://cdn-na.infragistics.com/igniteui/2018.2/latest/js/) . But Can you please tell me what are all the JS and CSS files are required separately? So that we can try to add those references.
When multiple values from the combo dropdown get selected they get stored as an array internally, but the igGrid does not allow saving complex values in the dataSource out-of-the-box. A possible solution would be to implement a custom editor provider - there is a very detailed article regarding this scenario, which you may find here:
https://www.igniteui.com/help/working-with-combo-editor-provider#multiSelectionConfig
Regarding all the scripts being loaded – using the igLoader is the easiest way to avoid having to add them manually one by one, which is very error - prone. If many grid features are enabled, there might be dozens of separate script that you would have to reference. If you really need to do so, every component (or grid feature) has all its dependencies listed on the right side of the screen when you open the API documentation. Here is a screenshot showing the scripts that the igCombo depends on:
And here is a link to the API documentation:
https://www.igniteui.com/help/api/2018.1/ui.igcombo
Loading the scripts like this is not something I would advise you to do in production because it would cause too many HTTP requests to your server. Use the bundled infragistics.core.js and infragistics.lob.js files from your product installation folder – they contain all the product scripts combined into 2 files. In case you don’t need all the components and features, a smaller and customized bundled script could be created and downloaded here:
https://igniteui.com/download
Please note that there are no scheduled Service Releases for Ignite UI 16.2 anymore and we would not be able to provide you big fixes for it. More information regarding the life cycle of the products may be found here:
https://www.infragistics.com/support/product-lifecycle
Hi Vasil,
Thank you for your information. This is really helpful. Can you do me a favor? I am trying to add a new row using Popup. And When I am selecting multiple items from dropdown (Dropdown is on popup) and hit "Done" button is not showing all the selected values with "," separator. I tried the code your shared. That is working if we have an option to add new row in grid line item itself.
Can you please help me how to do this using popup ?
Thanks,
Ghouse
I am not sure if by “popup” you mean you have set the Updating feature’s editMode option to “dialog”?
If that is the case, clicking the “Done” button would try to submit the multiple values selected from the combo dropdown, just like when using the inline row editing. The result would be the same – the grid would get only the first incoming value and discard the other ones.
If you click somewhere outside the dropdown (but inside the popup dialog), the selected values from the dropdown would be shown in the combo input. Please note that what I explained in my previous answer would apply in this scenario as well: in order for the igGrid to be able to get and apply this array of new values to the dataSource, a custom editorProvider would need to be implemented, like shown in the article from the link above.
Feel free to contact me if I have misunderstood you question, or if you have any further questions regarding this matter.
It would be great if you share me the example by allowing multiple selection in grid using dialog mode. Note: I am using Infragistics 2016 version.