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://www.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.