How to get all the data fields in datatable inline editor?

How to get all the data fields in datatable inline editor?

Abhishek K SAbhishek K S Posts: 12Questions: 1Answers: 1
edited October 2019 in Free community support

I am using datatable inline editor, not able to get the data which are not editable using

     editor.inline(this, {
               submit: 'all'
           });

Can anyone please help me with this?

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    not able to get the data which are not editable

    When you say you're not able to get the data, where do you want to get it? On the server, or the client? Before editing, or before submitting? Please add more information so we can help you,

    Colin

  • Abhishek K SAbhishek K S Posts: 12Questions: 1Answers: 1

    Now I added few fields in the editor and made it as hidden now I am able to get in data of preSubmit event but unable to get it in the server side(not using datatable dll's, normal web Api's)

    Editor fields intialization

    editor = new $.fn.dataTable.Editor({
        table: "#exmp",
        ajax:"api/sample/post",
        formOptions: {
            inline: {    
                submit: 'all'
            }
        },
        idSrc: "count",
    fields: [ 
            {
                name: "rollNumber",
                type: "hidden"
            },{
                name: "firstName",
                type: "text"
            }]
     });
    

    Editor Presubmit event

    editor.on('preSubmit', function (event, obj, action) {
                if (action !== 'remove') {
                    console.log(obj);
    });
    

    and how to update that row with the updated data from the server?

  • colincolin Posts: 15,240Questions: 1Answers: 2,599

    I'm still not clear, you didn't answer my questions. If you want to send data to the server in the preSubmit, then the second arg is data (you've got it wrong in your code above, see the link) - you can values to that and they'll be accessible on the server. The example on the reference page is doing something similar (there it's changing a value, you can add one too).

  • Abhishek K SAbhishek K S Posts: 12Questions: 1Answers: 1
    edited October 2019

    I am sorry I am not getting what you are asking.

    In preSubmit the second argument is obj I mentioned.

    I can see the edited data and the obj data looks like below.

    action: "edit"
    data:
    1:
    rollNumber: "123"
    firstName: "Abhishek" //Consider this is the edited data

    In the Controller of MVC

    [Route("api/sample/post", Name = "PostTie")]
    public IHttpActionResult PostTie([FromBody]StudentModel obj)
    {
    //obj.rollNumber is null here
    //obj.firstName is null here
    // My logic goes here
    }

    In the obj object in Controller all the fields are null, data is not getting bind to that property.

    Hope I answered your questions clearly.

  • Abhishek K SAbhishek K S Posts: 12Questions: 1Answers: 1

    Editor field initialization.

    editor = new $.fn.dataTable.Editor({
        table: "#exmp",
        ajax: {
            edit: {
                type: 'POST',
                url: 'api/tie/samplepost',
                contentType: "application/json",
                data: function (data) {
                    return JSON.stringify(data);
                }
           }
        },
        formOptions: {
            inline: {   
                submit: 'all'
            }
        },
        idSrc: "count",
    fields: [
            {
                name: "rollNumber",
                type: "hidden"
            },{
                name: "firstName",
                type: "text"
            }]
     })
    
    

    Data in server side is null for all the fields, referredajax.data Submit data as JSON in the request body is not working

  • allanallan Posts: 63,540Questions: 1Answers: 10,476 Site admin

    If you look at the network inspector in your browser, look at the Headers tab for the Ajax request that is being made - what does it show the parameters being sent to the server are?

    My guess is there is some issue reading the values on the server-side, rather than a client-side issue. For that, you might need to ask on SO or similar, but I'd like to check that the data is actually being sent to the server first. If you have a screenshot of that network / headers tab, that would be great. If that isn't possible perhaps you can give me a link to the page.

    Allan

  • Abhishek K SAbhishek K S Posts: 12Questions: 1Answers: 1
    edited October 2019

    Hi @allan , if I change the return to JSON.stringify(data.data[1]) ,it is working, but my question is index value is keep on changing for ex Row1 it is 1 for Row2 it is 2.

    How can i get the index number of the data object?

     ajax: {
            edit: {
                type: 'POST',
                url: 'api/tie/samplepost',
                contentType: "application/json",
                data: function (data) {
                    return JSON.stringify(data.data[1]);
                }
           }
        },
    
    
  • allanallan Posts: 63,540Questions: 1Answers: 10,476 Site admin

    Somewhat surprised by that. Does it work on all rows? The inner data object is keyed by the id property of the row(s) being edited. I would have expected Object.keys() or similar to be required to determine which rows were edited.

    Allan

  • Abhishek K SAbhishek K S Posts: 12Questions: 1Answers: 1

    I used like this to submit the data to server, yes @allan it is working.

    ajax: {
           edit: {
               type: 'POST',
               url: 'api/tie/samplepost',
               contentType: "application/json",
               data: function (data) {
                   return JSON.stringify(data.data[1]);
               }
          }
       },
    
    

    @allan/ @colin How can I update the row of the editor table with the new data from the server

  • allanallan Posts: 63,540Questions: 1Answers: 10,476 Site admin

    The documentation here shows what Editor expects in return from the server to update the table.

    Allan

  • Abhishek K SAbhishek K S Posts: 12Questions: 1Answers: 1
    edited October 2019

    Thank you @allan , I made changes like below in Wep Api now I am able to get the response same like it is mentioned in the documentation.

    var json = JToken.FromObject(new { data = result});
    return Ok(json);

    Again a new problem after the response from the Web api to submitComplete the row in the UI is disappearing.

     editor.on('submitComplete', function (e, json, data, action) {
       alert("To check the event is triggred")
        //Do I need to add anything in this to update the 
       // row with the new data received in json object           
      });
    

    What do I need to do to update the row with new data ?

  • allanallan Posts: 63,540Questions: 1Answers: 10,476 Site admin

    Perhaps you can show me the JSON that your server-side script is returning please? It sounds like it isn't returning what Editor expects.

    Allan

  • Abhishek K SAbhishek K S Posts: 12Questions: 1Answers: 1
    Answer ✓

    @allan this solved my problem.

    editor.on('postSubmit', function( e, json, data, action ) {
        json.data = [json];
    });
    
  • SotirPleqajSotirPleqaj Posts: 1Questions: 0Answers: 0
    edited March 2020

    @Abhishek K S hey mate, i'm having the same issue. Where do you put the Editor postSubmit event? At what part of the code.

  • Abhishek K SAbhishek K S Posts: 12Questions: 1Answers: 1

    @SotirPleqaj , apologies for the late reply, I am not very active in this forum. Below is the answer to your question

    var editor ; // global variable
    
    editor = new $.fn.dataTable.Editor({
        table: "#exampleEditorTable",
        ajax: { 
        // Ajax call
        // Fields
    }); //Close the Editor Function
    
    // Below this call editor Post submit
    editor.on('postSubmit', function( e, json, data, action ) {
        json.data = [json];
    });
     
    
This discussion has been closed.