IgniteUI 13.2
I have a c# MVC website which has a view with many IgniteUI elements on it.
Some of those elements are marked as required in the model.
Some of the fields use Editors, some combos and some datepickers.
The form does not use a submit button. I have implemented button click instead(in order to get hierarchical grid in the same view to save in the same DB transaction as the non-grid fields).
I can get the validation failure messages to show for an editor but not for combos or date pickers
So, I have the following for a combo in the view:
@Html.Infragistics().ComboFor(m => m.AccountID).ID("cmbAccount").TextKey("Name").ValueKey("AccountID").InputName("AccountID").ValidatorOptions(o=>o.Required(true).FormSubmit(true).OnChange(true).ShowIcon(true)).DataSource(Model.Accounts).Render()
For DatePicker:
@Html.Infragistics().DatePickerFor(model => model.DateOrderReceived).ReadOnly(blnIsReadOnly).ValidatorOptions(o => o.Required(true)).Render()
For TExtEditor:
@Html.Infragistics().TextEditorFor(model => model.ClientReference).ValidatorOptions().Render()
Model:
[Required(ErrorMessage = "Please select a value.")] public Int64 ?AccountID { get; set; }
[Required(ErrorMessage = "Please select a value.")] public DateTime? DateOrderReceived { get; set; }
[Required(ErrorMessage = "Please enter the reference.")] [StringLength(255, MinimumLength = 3, ErrorMessage="Please enter a value at least 3 characters long.")] public string ClientReference { get; set; }
And in the button click function in the View:
var bIGFieldsAreValid = true; var oIsValid= $("#ClientReference").igValidator("validate"); if (oIsValid == 1 || oIsValid == 2) { bIGFieldsAreValid = false; } oIsValid= $("#AccountID").igValidator("validate"); if (oIsValid == 1 || oIsValid == 2) { bIGFieldsAreValid = false; } oIsValid = $("#DateOrderReceived").igValidator().igValidator("validate"); if (oIsValid == 1 || oIsValid == 2) { bIGFieldsAreValid = false; }
Only the TextEditor ClientRefrence field gets the validation failure when left empty.
...but if I click into and out of each field the validation messages appear OK, so I only have a problem with programmatically applying the validation to the combo and date picker fields.
I have tried various combinations for the combo and data pickers fields but I can't figure out what I am missing.
What do I need to do to get this to work for combo & data picker fields?
Regards,
Graeme
Hi Graeme,
Understanding that the form doesn't have a submit button, but instead uses a click event...will the click event submit the form? The OnSubmit option should trigger however the form gets submitted. You will want to have both OnSubmit and FormSubmit added to the combo and datepicker editors chain.
Take a look at this post as it touches on the similar: http://es.infragistics.com/community/forums/t/87978.aspx
Please let me know if you need any additional assistance regarding this.
I am still following your post. Please let me know if you need any additional details regarding this.
Hi Troy,
Thanks for your message.
I am not using the form submit at all because I couldn't get the igHierarchicalGrid to return its changes correctly (had help from one of your colleagues to work around the fact that the grid did not provide the parent PK for new child rows, so I couldn't add new child rows to the DB).
Here is the Java code that posts the form back to the controller if validation is successful:
if (blnFormIsValid && bIGFieldsAreValid) { var url = "@Url.Action(MySite.Controllers.JobController.ACTION_SaveJob, new {})"; // Get the grid's transactions. var oNoteTransactions = JSON.stringify($("#NoteGrid").igGrid("allTransactions")); var oMaterialTransactions = JSON.stringify($("#MaterialGrid").igGrid("allTransactions")); var oAllStoneTransactions = []; var oMaterialChildren = $("#MaterialGrid").igHierarchicalGrid("allChildren"); for(var i= 0; i < oMaterialChildren.length;i++){ var oStoneChild = $(oMaterialChildren[i]).data("igGrid").transactionsAsString(); oStoneChild = oStoneChild.replace(/Width/g, "ParentID\":\"" + $(oMaterialChildren[i]).data("igGrid").element[0].id + "\", \"Width"); oStoneChild.parentId = $(oMaterialChildren[i]).data("igGrid").element[0].id; oAllStoneTransactions.push(oStoneChild); } $("#ig_StoneTransactions").val(oAllStoneTransactions); var form = $('form').serialize(); // Serialize form data. var data = { __RequestVerificationToken: $('[name=__RequestVerificationToken]').val(), ig_NoteTransactions: oNoteTransactions, ig_MaterialTransactions : oMaterialTransactions, formData: form}; // Format it for our model.
// Post to the server. $.post(url, data, saveResponse);
}
I am very frustrated because, as described above, a simple technique that works for one of your widgets (igTextEditor) does not work for others (igCombo & igDatePicker). Is there a way to programmatically tell those widgets to validate, like there is for the text editor?
I fear not as in your referenced post Nikolay says that the validation is all internal and not exposed, but that doesn't tally with the fact that this does work programmatically for your text editor.
Is it possible for you to upload a small project that I can run and test with? I will further research this matter and having what you have will ensure that I have your set-up replicated precisely.
Alternatively, I will proceed by pulling together a project based on the details you have here on this thread.
Thanks Graeme,
Let me know if you can upload an example. Having an example from you that I can test and run will best for further researching this matter.
Hi
Yes, I will create an example app for you - I'm just snowed under with work at the moment but I'll get one to you as soon as I can.
Hello Graeme,
Is there anything else I can assist you with on the matter? Please do not hesitate to contact me with more questions.
Thank you very much for your patience. Please find your project attached with the functionality you were looking to achieve. In order to achieve this functionality, I attached an igValidator to the Name editor and edited the validatorOptions for the igCombo. Please let me know if the behavior you will now see is suitable for your project. Also, please do not hesitate to contact me with more questions.
Thank you for your sample. I will be looking further into the behavior you are describing in your sample and will get back to you by the end of the day tomorrow with more information or questions.
Please find a demo project attached.
Run it up and go to the ForceValidation page.
If you click into and out of each field without entering a value you will see validation messages.
Refresh the page.
Now click the Validate button. You will get a validation message on the text editor but not the DatePicker or Combo.
Hopefully it will run up for you - I have removed all of the packages and binaries to keep the file small.
How to clear a Infragistics DatePicker
is this correct
$("#TentativeStartDate" ).val('')
@Html.Infragistics().DatePickerFor(model => model.MyProperty[j].TentativeStartDate).ID("TentativeStartDate").DateInputFormat("dd/MM/yyyy").Width(100).Height(22).ValidatorOptions(m => m.Required(false)).Render()