I have a Kendo UI grid on my page which populates dataSource from an ajax call to my api in backend. I have introduced another variable in script tag called dataSource which gets the data from same api and will be used in multiple functions like this:
var dataSource = new kendo.data.DataSource
({
type: "json",
serverPaging: true,
serverSorting: true,
serverFiltering: true,
allowUnsort: true,
pageSize: 10,
group:{field:"Status"},
transport:
{
read:
{
url: window.location.origin + "/api/HL7Message/getListOfProcessedData/",
dataType: "json",
type: "POST",
contentType: "application/json;",
cache: false,
async: false
},
parameterMap: function (options)
{
return JSON.stringify(options);
}
},
serverSorting: true, // server Side sorting by
sort: { field: "ModifiedDate", dir: "desc" }, // Descending Modified Date
batch: true,
schema:
{
model:
{
id: "SampleId",
fields:
{
SampleId: { type: "string" },
Status: { type: "string" },
IsStored: { type: "string" },
CreatedDate : { type:"date"},
ModifiedDate:{type:"date"},
ExceptionMsg: { type: "string" }
}
},
data: "data", total: "total"
}
I want to sync this datasource to my data grid by getting the page number currently in grid and using it in page property.
This is my Grid:
$("#grid").kendoGrid({
dataSource: dataSource,
height: 720,
pageable: {
refresh: true,
serverPaging: true,
serverSorting: true,
serverFiltering: true,
},
sortable: true,
filterable: false,
scrollable: false,
navigatable: false,
noRecords: true,
dataBound: onDataBound,
toolbar: [
"Queue Data Status",
{ template: "<button id='RegenerateButton' onclick=regenerateAll()>Regenerate All</button>"} ,
"search"],
columns: [{
field: "sampleId",
title: "Sample Id",
template: "<div class='msg-photo' style='background-image: url(/images/email_material.png);background-size: cover;background-size: 70px 70px'></div><div class='sample-id'>#: sampleId #</div>",
width: 150
},{
field: "createdDate",
title: "Created Date",
template:"<div class='createdDateTemplate'>#= kendo.toString(kendo.parseDate(createdDate), 'dd/MM/yyyy hh:mm tt') #</div>",
width: 150
},{
field: "modifiedDate",
title: "Modified Date",
template:"<div class='modifiedDateTemplate'>#= kendo.toString(kendo.parseDate(modifiedDate), 'dd/MM/yyyy hh:mm tt') #</div>",
width: 150
},{
field: "isStored",
title: "Data Stored In Blob",
template: "<span id='badge_#=sampleId#' class='isStoredBadgeTemplate'></span>",
width: 150
}, {
field: "status",
title: "Status Of Data",
template: "<span id='badge_#=sampleId#' class='statusBadgeTemplate'></span>",
width: 150
},{
field: "exceptionMsg",
title: "Exception Message",
width: 150,
sortable: false,
template: "#if(status=='F'){#<div id=badge_#=sampleId# class=exceptionBadgeTemplate>#=exceptionMsg#</div>#} else {##}#",
},{
field: "Retry",
title: "Action",
width: 100,
sortable: false,
template: "#if(status=='F'){#<button class=btn btn-info onclick=regenerateFile(#=sampleId#)>Regenerate</button>#} else {#<button class=btn btn-info disabled>Regenerate</button>#}#"
}],
});
});
How should I do so?
Or is there some better approach ? Edit: I have tried setting a variable to page property of grid and using it in datasource but it isnt working.