I am working on kendo ui listvie with paging. In this everytime I move to next page it will call datasource. In my scenario if I select 4th page it is calling datasource 4times times.
below is the code
function InitiateContactList() {
var RouteDataSource = null;
RouteDataSource = new kendo.data.DataSource({
serverPaging: true,
type: "aspnetmvc-ajax",
create: {
contentType: "application/json"
},
transport: {
read: {
url: '#Url.Content("~/Partner/GetPartnerContacts")',
data: { lPartnerId: $("#hdnPartnerId").val() },
dataType: "json",
type: "get",
}
},
serverFiltering: true,
pageSize: 2,
schema: {
data: "Data",
total: "Total"
}
});
$("#copyRoutelistdata").kendoListView({
autoBind: false,
dataSource: RouteDataSource,
template: kendo.template($("#Contactstemplate").html()),
//selectable: "single",
//pageable: true,
change: function (e) {
var index = this.select().index();
dataItem = this.dataSource.view()[index];
if (dataItem != null && dataItem.RouteId != null) {
//CopyRoute(dataItem.RouteId);
//HideWindow('MdCopyRouteSearch');
}
},
dataBound: function (e) {
$("#RoutelistPager").kendoPager({
autoBind:false,
dataSource: RouteDataSource
});
}
});
RouteDataSource.read();
}
Thanks in advance.
Related
I have kendo dropdownlist on page which is fetching results from database as below. I also have a grid at the same page at same time which needs kendo dropdownlist value i.e the value from years dropdownlist but I am unable to get it at the same time.This is how I am following. Where I am doing wrong.
<script type="text/javascript">
var GridUrl;
$("#Years").kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
transport: {
read: {
dataType: "json",
url: "../../Service/GetYears"
}
}
}
});
$(document).ready(function () {
BindGridData();
GridUrl = '#Url.Action("Read", "Home")';
});
function BindGridData()
{
GridDataSource = new kendo.data.DataSource({
type: "aspnetmvc-ajax",
serverFiltering: true,
serverPaging: true,
serverSorting: true,
pageSize: 10,
transport: {
read: {
url: GridUrl,
data: { year: $('#Years').val() }
}
},
schema: {
data: "Data", total: "Total"
}
});
}
Changing line to this
year: $('#Years').data("kendoDropDownList").value()
should do a trick. You need to get instance of kendoDropDownListwidget in order to get its value. You need to do so, because kendoDropDownListwidget value is not saved directly into html element
First of all, you need to move the initialisation of the kendoDropDownList inside the document ready function. If you don't you may end up refering to elements that are not loaded (yet).
The second change that should be done is how you get the value from the kendoDropDownList. Usually, you should refer to the widget instead of the DOM element: $('#Years').data("kendoDropDownList").value()
Finally, you didn't mention how and when your grid was binded but you may want to refresh the grid data if the user change the dropdown value. If it's the case, you may want to use change event of the dropdown to refresh the grid data.
$(document).ready(function () {
$("#Years").kendoDropDownList({
dataTextField: "Name",
dataValueField: "Id",
dataSource: {
transport: {
read: {
dataType: "json",
url: "../../Service/GetYears"
}
}
},
change: function(e) {
$("#YourGrid").data("kendoGrid").dataSource.read();
}
});
BindGridData();
GridUrl = '#Url.Action("Read", "Home")';
});
function BindGridData() {
GridDataSource = new kendo.data.DataSource({
type: "aspnetmvc-ajax",
serverFiltering: true,
serverPaging: true,
serverSorting: true,
pageSize: 10,
transport: {
read: {
url: GridUrl,
data: { year: $('#Years').data("kendoDropDownList").value() }
}
},
schema: {
data: "Data", total: "Total"
}
});
}
I am having an issue with the data source not being accessed. The webservice executes it's query and firebug shows the return string but I don't get the features of the autocomplete list.
$("#txtCriteria").kendoAutoComplete({
minLength: 1,
suggest: true,
filter: "startswith",
dataTextField: "ACName",
select: function (e) {
var dataItem = this.dataItem(e.item.index());
//output selected dataItem
document.getElementsByName("hdfldSelect")[0].value = dataItem.ACCode;
$("#txtCriteria").kendoAutoComplete();
var autocomplete = $("#txtCriteria").data("kendoAutoComplete");
autocomplete.destroy();
},
dataSource: new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: "../DAL/Reports/wsReports.asmx/AutoComplete",
dataType: "json",
type: "GET",
},
parameterMap: function (data, action) {
var newParams = {
Type: Type,
filter: data.filter.filters[0].value
};//var
return newParams;
},//parameter
}//trans2
})//data
});
Thank you for any assistance
Going along the fact that your endpoint returns the expected data set, you could try adding a 'schema' to your kendo-datasource.
dataSource: new kendo.data.DataSource({
schema: {
data: function (e) {
return e.Results
},
model: {
fields: {
Id: { type: "number" },
Name: { type: "string" }
}
}
},
serverFiltering: true,
transport: {
read: {
url: "../DAL/Reports/wsReports.asmx/AutoComplete",
dataType: "json",
type: "GET",
},
parameterMap: function (data, action) {
var newParams = {
Type: Type,
filter: data.filter.filters[0].value
};//var
return newParams;
},//parameter
}//trans2
})//data
How can I call custom service for deleting a row in Kendo UI grid.This custon service should have a confirmation dialog option that can be customized.
Any thoughts on this is highly appreciative
You should customize the kendo.data.DataSource 'destroy' attribute to specify the URL and update the kendoGrid 'delete' command code for the custom confirmation.
Example code
$(document).ready(function () {
var windowTemplate = kendo.template($("#windowTemplate").html());
var crudServiceBaseUrl = "http://demos.kendoui.com/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl + "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } },
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true } }
}
}
}
});
var window = $("#window").kendoWindow({
title: "Are you sure you want to delete this record?",
visible: false, //the window will not appear before its .open method is called
width: "400px",
height: "200px",
}).data("kendoWindow");
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}"},
{ field: "UnitsInStock", title:"Units In Stock"},
{ field: "Discontinued"},
{ command: [
{name: "edit"},
{name: "Delete",
click: function(e){ //add a click event listener on the delete button
var tr = $(e.target).closest("tr"); //get the row for deletion
var data = this.dataItem(tr); //get the row data so it can be referred later
window.content(windowTemplate(data)); //send the row data object to the template and render it
window.open().center();
$("#yesButton").click(function(){
grid.dataSource.remove(data) //prepare a "destroy" request
grid.dataSource.sync() //actually send the request (might be ommited if the autoSync option is enabled in the dataSource)
window.close();
})
$("#noButton").click(function(){
window.close();
})
}
}
]}],
editable: {
mode: "inline"
}
}).data("kendoGrid");
});
Taken from:
http://docs.telerik.com/kendo-ui/web/grid/how-to/Editing/custom-delete-confirmation-dialog
You can set the delete option in your datasource to a function and do anything you want from that point. Without a sample of your service, I can't help you getting started but I can link you to the documentation.
I want to populate a Kendo dropdownlist with data from a database.
That's what I call the "frwMantenimientoEmpresas.aspx / SelectProvincias" method.
My problem is that the value "undefined" after making the call, in the dropdownlist appears ...
dataSource1 = new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
beforeSend: function (req) {
//alert("");
},
async: false,
url: "frwMantenimientoEmpresas.aspx/SelectProvincias",
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8"
}
},
schema: {
model: {
fields: {
UIDProvincia: { type: "int" },
Nombre: { type: "string" }
}
}
}
});
$("#dropProv").kendoDropDownList({
dataSource:dataSource1,
dataTextField: "Nombre",
dataValueField: "UIDProvincia",
autoBind: true,
});
The read method calls the server SelectProvincias method correctly..
At this point dropDownList = undefined??
code:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://search.twitter.com/search.json",
dataType: "jsonp",
data: {
q: "kendoui"
}
}
},
schema: {
data: "results",
total: function(response) {
return response.results.length;
}
},
pageSize: 4
});
here i have to set the page size 4 from client side
public JsonResult GetSettings()
{
return Json(new { count = Service.GetSettings<UserSetting>(AuthenticatedUser) }, JsonRequestBehavior.AllowGet);
}
var settingsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GetSetting")',
dataType: "json",
type: "GET"
}
},
schema: {
parse: function (data) {
resultCount = data.count;
return data;
}
},
change: function () {
Grid();
}
});
settingsDataSource.read();
function Grid() {
mainGridDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '#Url.Action("GetDetails")',
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8"
},
parameterMap: function (options) {
return JSON.stringify({ filter: options, isPrimary: options.isPrimary });
}
},
schema: {
model: {
fields: {
Status: { type: "string" },
Name: { type: "string" }
}
},
data: function (data) {
return data.data;
},
total: function (data) {
return data.totalCount;
}
},
pageSize: resultCount,
serverFiltering: true,
serverPaging: true
});