Submit full form with Editor data after save button pressed

Submit full form with Editor data after save button pressed

WRockholdWRockhold Posts: 6Questions: 0Answers: 0
edited March 2017 in Free community support

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.

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • WRockholdWRockhold Posts: 6Questions: 0Answers: 0

    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.

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • WRockholdWRockhold Posts: 6Questions: 0Answers: 0

    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();
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • WRockholdWRockhold Posts: 6Questions: 0Answers: 0

    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?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • WRockholdWRockhold Posts: 6Questions: 0Answers: 0

    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;
                }
    }
    
    }
    
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

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

    Allan

  • WRockholdWRockhold Posts: 6Questions: 0Answers: 0

    Thank you for answering all my questions.

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

    Thanks again!

This discussion has been closed.