Hello,
I have the following situation:
I have a grid with two DateTime columns (startDate and endDate), when adding/editing I would like to disable the Done button if the startDate is after the endDate. Something like (pseudocode):
if (endDate >startDate) doneButton.disable()
Is this possible? What is the preferred way to check condition about several columns. I am writing all my code in C# over MVC.net.
Thanks in advance
Hello Javier,
Thank you for posting in our community.
I believe Validation is what will help you achieve your requirement. This is a way to validate your data against certain rules that meet your requirement. Validation is implemented using igValidator control in igGrid. The main purpose of this control is to inform the end user for the passed and failed validation immediately by default. This means that when user blur the editor`s input a feedback message is immediately displayed giving useful information about the state in which editor is in. When using igGrid validator options could be set by Updating behavior`s column settings.
A working sample that demonstrates validation could be found at the following link:
http://www.igniteui.com/grid/basic-editing
In this sample ID, CustomerID, Order Date and Ship Address columns have validation applied- ID is read only column, Order Date and CustomerID are set to be required and the text in Ship Address should be longer that 4 symbols. This is achieved as following:
.Features(feature => { feature.Updating().ColumnSettings(cs => { cs.ColumnSetting().ColumnKey("OrderID").ReadOnly(true); cs.ColumnSetting().ColumnKey("OrderDate").EditorType(ColumnEditorType.DatePicker).Required(true); cs.ColumnSetting().ColumnKey("CustomerID").EditorType(ColumnEditorType.Combo).Required(true).ComboEditorOptions(co => co.DataSource(ViewBag.Customers).ValueKey("ID").TextKey("CompanyName").Mode(ComboMode.DropDown).EnableClearButton(false)); cs.ColumnSetting().ColumnKey("ShipAddress").Required(true).TextEditorOptions(o => o.ValidatorOptions(vo => vo.LengthRange(4))); cs.ColumnSetting().ColumnKey("TotalItems").Required(true); cs.ColumnSetting().ColumnKey("TotalPrice").Required(true).EditorType(ColumnEditorType.Currency); }); feature.Sorting(); })
When you enter edit mode any try to violate any of the rules set by the validation an error message appears and explains what needs to be done. Unless validation rules are not met Done button is not enabled.
In your particular scenario a custom validation rule needs to be created and applied. This is achieved by the custom option of the igValidator. It gets/sets a custom function to perform validation with. For example:
//Initialize$('.selector').igValidator({ custom: function(value, fieldOptions){ return false; }}); //Getvar custom = $(".selector").igValidator("option", "custom"); //Setvar custom = { method: function (value, fieldOptions) { return false; }, errorMessage: "This field is required." }; $(".selector").igValidator("option", "custom", custom);
In your case a function that compares the two dates should be crated and applied. Also you could customize the error message to show your customers what is preventing them from adding the new row(or updating existing).
Please let me know if you need any further assistance with this matter.
Thanks for the quick response.
I have tried to create a custom validator using the jQuery API but I wasn't able to get it working.
Let me specify further my scenario.
In my cshtml I have the following:
<div id="myForm" class="form-group"> @(Html.Infragistics().Grid<myModel>() .ID("myGrid") ...
This is the grid which is contained in a bigger form where I have others grids and fields. This contains the two columns startDate and endDate.
Now, I have tried the jQuery API that you pasted. I have initialize the custom validator but it didn't work. My doubt is to which object should I initialize the validator.
I have tried all the of them and none of them worked.
Specifically, what I want is when the user opens the popup to edit a row, the done button is disabled if the condition is not met. Where should I "attach" the validator to?
Thanks in advance.
Thank you for the update. You would want to apply the validation options on the editor/cell/column you want to validate. Since you are using MVC you would want to do it something like the following:
features.Updating().ColumnSettings(cs => cs.ColumnSetting().ColumnKey("Date").DateEditorOptions(options => options.ValidatorOptions(vo => vo.Custom("customMethod"))) );
Where “customMethod” is your function/method where you validate the date:
http://www.igniteui.com/help/api/2016.1/ui.igvalidator#options:custom
function customMethod(value, fieldOptions) {//Todo validate data}
Hello Mike,
I have tried the C# code you posted. It does not compile because there is no Custom method in the Validator Options. The only method that is similar (and obviously is not the one I need) is CustomErrorMessage(String).
Let me show you what I wrote:
c.ColumnSetting().ColumnKey("StartHour").Required(true).DateEditorOptions(o => o.ValidatorOptions(vo => vo.Custom("checkDates")));
This code does not compile. Why the method Custom is not available? Am I missing a reference or something? What version of Infragistics do I need?
Hello again,
Let me update the situation given the progress I have made.
I have updated Infragistics to the 2016.1 version and now the Custom method does appear as available. I have written the following code:
.ColumnSettings(c => { c.ColumnSetting().ColumnKey("StartDate").Required(true).Validation(true) .DateEditorOptions(o => { o.ValidatorOptions(vo => vo.Custom("checkDates", "Error in dates")); }); c.ColumnSetting().ColumnKey("EndDate").Required(true).Validation(true) .DateEditorOptions(o => { o.ValidatorOptions(vo => vo.Custom("checkDates", "Error in dates")); }); })
function checkDates(value, fieldOptions) { return false; }
In this code I define two ColumnSettings for each of the dates and I am setting the validation options with the custom callback to use the checkDates javascript function. I have added the string error in the custom to see the text.
This does not work. I have put a breakpoint the javascript code on the browser and it is never called. Also, the error string "Error in dates" is not shown either.
What am I missing? Is there a problem with the definition of the javascript function?
I have created a sample to demonstrate this matter for you. Note that I have removed the JavaScirpt, CSS and dll Infragistics files for file size to be able to attach to the forums. So you will want to replace them before running. As you note you will want to use v16.1 as that will give you access to the Custom method. Looking are your code it appears correct. You can set the error message through Custom or by setting ErrorMessage as you can see I have commented out. I use the DatePicker editor, I also tested with the regular date editor and it works as well. Let me know what you see when you run my sample. If you are still having an issue with your afterwards please attach it to this forum thread so I can look further into this matter to see why this behavior isn’t working for you.
Please share a real example where I can get the data from 2 different cells in the same row and compare both and then return the validation as either true or false, always returning a false will end up not allowing user to let the grid have user input.