Submit full form with Editor data after save button pressed

WRockhold

I searched around the forums, but couldn't find a discussion around the exact requirements I need from .Net Datatables Editor framework. I apologize if I haven't found the solution in the documentation.

I am wondering if something similar to the following is easily accomplished with the out of the box implementation. I have a form that has some fields outside the Editor. I'd like to hold off submitting any changes (edit, add, delete) within the editor until the entire form is submitted. Example:

Name: [text]
Occupation: [text]
Previous Locations: [Datatable Editor]
* state [drop down]
* zip [text]
[add row][delete]

[Save Button]

Bonus if I we could include inline edits.

I've been reading up on the ajax apis and multi row settings... and something about .set(false) but I can't seem to piece it all together.

allan

I'm not 100% sure how the setup you want works - do you have a regular HTML 5 for the majority of the inputs, but you are using a DataTable for the previous locations (I'm not clear on how Editor fits into that). Could you send me a screenshot?

Thanks,
Allan

WRockhold

I've attached a clearer example of the form I'm trying to do.

Yes, the other parts of the form are regular html at the end of the day but generated by and EditorFor() in .net/razor.

We would like the Datatable Editor to still validate when adding inputs, but not save any of the data until the save button for the entire form is clicked.

allan

Thanks! What to do is to use Editor's local table editing option. It won't do the validation for you, although you could potentially use client-side validation which would work.

Allan

WRockhold

So, in theory, if we did need to do some server-side validation on the inputs before save, we would write a custom ajax call to the server inside the presubmit() event?

Also, in theory, if we created a Model with the Datatable properties in it, when we actually do save the form, could we potentially do this the following on that specific property?

var model = FormData;
//validate other fields 
...
//validate editor data
var editorResponse =   new Editor(db, "Locations", "id")
                    .Model<LocationsDatatableModel>()
                    .Process(model.LocationsDatatableModel)
                    .Data();

allan

If you needed server-side validation, I would suggest that it be done when you submit the whole form. Gather the data from the DataTable using rows().data() and include that as part of the form submission and validate it as part of whatever you are using to press the whole form.

The Editor C# class probably won't help you much in this case. For that to be effective you would need to use the ajax option and submit each row as it is created to the server and write it to the database at that point.

Allan

WRockhold

need to use the ajax option and submit each row as it is created to the server and write it to the database at that point.

Is it easy to, validate and bubble up the error but not write it with the ajax option?

allan

No - that isn't a scenario I had envisaged it being used for to be honest, so the library doesn't currently handle such a case.

Allan

WRockhold

Will preSubmit fire if the ajax option isn't included (using Local Editing)

client-side validation can be achieved using the preSubmit event which can be used to cancel the submit by returning false.

//client code
...
editor.on( 'preSubmit', function ( e, o, action ) {

.ajax(){
//submit to custom ajax method on controller
//return if isError()
// If any error was reported, cancel the submission so it can be corrected
            if ( this.inError() ) {
                return false;
            }
}

}

allan

Yes - preSubmit is still called for the local table editing action.

Allan

WRockhold

Thank you for answering all my questions.

I believe we will move forward with this approach and see what happens.

Thanks again!