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

Abhishek K S

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?

colin

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 S

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?

colin

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 S

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 S

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

allan

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 S

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]);
            }
       }
    },

allan

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 S

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

allan

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

Allan

Abhishek K S

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 ?

allan

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 S

@allan this solved my problem.

editor.on('postSubmit', function( e, json, data, action ) {
    json.data = [json];
});

SotirPleqaj

@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 S

@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];
});