Error 400 using inline edit in Grid

[Daniel]

Hi,

We're trying to use the inline edit functionality of the Grid using the code below. But receiving an error 400 when trying to post using the "create" function of the Kendo DataSource.

JS

const dataSourceMeetingTypes = new kendo.data.DataSource({
	transport: {
		read: endpoint + "/read",
		create: {
			url: endpoint + "/create",
			type: "POST",
			data: function (e) {
				return kendo.stringify(e);
			},
			contentType: "application/json; charset=utf-8"
		}
	},
	error: function (e) {
		//console.log(e);
	},
	schema: {
		model: {
			fields: {
				meetingType: { type: "string" },
				meetingValue: { type: "string" }
			}
		}
	},
	pageSize: 5
});

Controller

[ApiController]
[Route("create")]
public class CreateController : ControllerBase
{
	[HttpPost]
	public ActionResult Create([FromBody] MeetingTypes meetingTypes)
	{
	}
}

public class MeetingTypes
{
	public string MeetingType { get; set; }
	public string MeetingValue { get; set; }
}

But the below code works outside the Grid. The data from the javascript above - kendo.stringify(e) matches the data below. Using Postman with the below data also works with no issue.

$.ajax({
	type: "POST",
	url: endpoint + "/create",
	data: "{\"meetingType\":\"test123\",\"meetingValue\":\"test123\"}",
	contentType: "application/json; charset=utf-8"
}).done(function (response) {
});

Any help is much appreciated.

Thanks

[Georgi Denchev]

Hi, Daniel,

Thank you for the provided details.

I believe there might be a slight misunderstanding regarding the usage of the transport.create.data configuration. There is a difference between it and the regular "data" field that you use in a standard AJAX request.

The `create.data` configuration(as well as the other transport.data configs such as read.data, update.data, destroy.data) are used to send additional parameters with the request. In other words they are meant to add on top of the data that will be normally sent.

The regular data can be formatted through the transport.parameterMap configuration:

transport: {
		read: endpoint + "/read",
		create: {
			url: endpoint + "/create",
			type: "POST",
			contentType: "application/json; charset=utf-8"
		},
               parameterMap: function(data, type) {
                  if(type === "read") { return data; } // if this is a regular read request, return the data as you normally would.
                  return kendo.stringify(data); // In all other cases stringify it(upload/create/delete)
                }
	},

You can do all sorts of other things with the parameterMap but the main idea is that this is where you can change/format the request data right before it is sent out to the server.

Best Regards,

Georgi

[Daniel]

Hi Georgi,

Thanks for the reply. That works, sort of - I had to put in an else for it to post okay. I had to also add in a unique identifier in the backend table, ie. MeetingTypeId otherwise it would post the entire data set instead of a single row. That's okay as this was necessary anyway.

parameterMap: function(data, type) {
	if (type === "read")
		return data;
	else
		return kendo.stringify(data);
}

I also noticed that when creating or updating a row, the grid isn't refreshed. It looks like it attempts to insert / update the value but just comes through as empty (see screen). The actual post works okay so the data is updated in the backend okay just doesn't reflect until the user reloads the page. The only way I found it worked was to subscribe to either the complete event on the Ajax request or the "save" event on the grid and manually refreshing the data source. This would only work if I put a delay (1000 ms for exmple) in as both events occur in a non-blocking fashion. This doesn't affect deletes as it looks like it just removes the row from the grid.

Any ideas?

Thanks

[Daniel]

Okay I figured it out. You need to return the grid data response on post. I was just returning a 200 so it wasn't returning any data to the grid. All good now.

 

Thanks