Kendo grid displaying multiple page - asp.net

Question

This is my code for kendo the page is displaying multiple time given in
i tried every this but its still not working please suggest me what to do to solve this problem. picture.And validation message is also not showing its validation but not displaying message
$(document).ready(function() {
$("#production-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: {
url: "#Html.Raw(Url.Action("ProductAttributeList", "Production"))",
type: "POST",
dataType: "json",
contentType: "application/json"
},
create: {
url: "#Html.Raw(Url.Action("SettingAdd", "Production"))",
type: "POST",
dataType: "json"
//data: addAntiForgeryToken
},
update: {
url: "#Html.Raw(Url.Action("SettingUpdate", "Production"))",
type: "POST",
dataType: "json"
//data: addAntiForgeryToken
},
destroy: {
url: "#Html.Raw(Url.Action("SettingDelete", "Production"))",
type: "POST",
dataType: "json"
//data: addAntiForgeryToken
},
parameterMap: function(data, operation) {
if (operation != "read") {
return data;
} else {
//for some reasons only such "Filter" data be parsed
return JSON.stringify(data);
}
}
},
schema: {
data: "Data",
total: "Total",
errors: "Errors",
model: {
id: "Id",
fields: {
Image: { editable: false, type: "string" },
IteamId: { editable: false, type: "number" },
ProductId: { editable: false, type: "number" },
UserName: { editable: false, type: "string" },
FoundInProductName: { false: true, type: "string" },
FoundInProductDescription: { editable: false, type: "string" },
TaggedKeyword: { editable: false, type: "string" },
TaggedComment: { editable: false, type: "string" },
AttributeName: { editable: true, type: "string" },
Comment: { editable: true, type: "string" },
ShelfID: { editable: true, type: "string" },
ShelfName: { editable: true, type: "string" },
ProductType: { editable: true, type: "string",
validation: { required: true , message: "Product Type is required" } } ,
Remark: { editable: true, type: "string" },
Id: { editable: false, type: "number" }
}
}
},
requestEnd: function(e) {
if (e.type == "create" || e.type == "update") {
this.read();
}
},
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: 50,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes:[ 50, 100, 150, 200, 250]
},
scrollable: true,
editable: true,
columns: [
{
field: "Id",
headerTemplate: "<input id='mastercheckbox' type='checkbox'/>",
headerAttributes: { style: "text-align:center" },
attributes: { style: "text-align:center" },
template: "<input type='checkbox' value='#=Id#' class='checkboxGroups'/>",
width: 50
},{
field: "Image",
title: "Image",
width: 300
},{
field: "IteamId",
title: "IteamId",
width: 300
},
{
field: "ProductId",
title: "ProductId",
width: 300
}, {
field: "UserName",
title: "UserName",
width: 300
}, {
field: "FoundInProductName",
title: "Keyword found(PN)",
width: 300
}, {
field: "FoundInProductDescription",
title: "Keyword found(PD)",
width: 300
}, {
field: "TaggedKeyword",
title: "Tagged Keyword",
width: 300
}, {
field: "TaggedComment",
title: "Tagged Comment",
width: 300
},
{
field: "AttributeName",
title: "Attribute Name(the attribute which is worked upon- E.g. Color)",
width: 300
},
{
field: "Comment",
title: "Comment",
editor: CommentTypeDropDownEditor,
template: "#:Comment#",
width: 300
},
{
field: "ShelfID",
title: "Suggested Shelf ID",
width: 300
},
{
field: "ShelfName",
title: "Suggested Shelf Name",
width: 300
},
{
field: "ProductType",
title: "Product Type",
width: 300
},
{
field: "Remark",
title: "Remarks (Free Text)",
width: 300
}
]
});
i can able to fingure out what the issue and validation message is also not displaying