or
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>(Model)
.Name("listView")
.TagName("div")
.ClientTemplateId("template")
.DataSource(dataSource => {
dataSource.Read(read => read.Action("Products_Read", "ListView"));
dataSource.PageSize(12);
})
.Pageable()
)
Though we mention 12 in the pagesize, I am getting all my records to the view. Please help how to show the no. of
records as per our choice.
Regards,
Rohit
var ds = new kendo.data.DataSource({ transport: { read: { url: 'url to get data', dataType: "json" } }, change: OnDataChange, requestStart: OnDataRequestStart });
function OnDataChange(e) {
if (IsDataRequested) {
// save it to cache
$.jStorage.set("LargeData", e.sender.data());
IsDataExists = true;
IsDataRequested = false;
}
}
function OnDataRequestStart(e) {
if (IsDataExists) {
e.preventDefault();
}
else {
// Check if "key" exists in the storage
var value = $.jStorage.get("LargeData");
if (value) {
IsDataExists = true;
e.preventDefault();
e.sender.data(value);
}
else {
// Read data from server
IsDataRequested = true;
}
}
}
<script id="template" type="text/x-kendo-template"></script>var obj = [ { "street_id": "1", "street_name": "First St", "addresses": [ { "street_number": "100", "notes": "Example notes..." }, { "street_number": "101", "notes": "" } ] }, { "street_id": "2", "street_name": "Second St", "addresses": [ { "street_number": "200", "notes": "" }, { "street_number": "201", "notes": "Test notes..." } ] }];var template = kendo.template($('#template').html());var dataSource = new kendo.data.DataSource({ data: obj, filter: { field: 'street_id', operator: 'eq', value: e.view.params.street_id }, change: function() { $('#streets').html(kendo.render(template, this.view())); }});dataSource.read();$(this).kendoComboBox({ filter: "contains", height: 200, change: function (e) { if (this._selected == null) { this.text("(None)"); } }}); <!DOCTYPE html><html><head> <title></title> <script src="js/lib/jquery/jquery-1.8.1.min.js"></script> <script src="js/lib/kendoui/kendo.web.min.js"></script> <link href="css/KendoUI/kendo.common.css" rel="stylesheet" /> <link href="css/KendoUI/kendo.blueopal.css" rel="stylesheet" /></head><body> <div id="example" class="k-content"> <div id="form-container"> <div class="demo-section"> Select Product: <select data-role="dropdownlist" data-option-label="Select product" data-value-field="ID" data-text-field="lastName" data-bind="source: productsSource, value: selectedProduct"></select> <button data-bind="click: save, enabled: hasChanges" class="k-button">Submit All Changes</button> </div> <div class="demo-section product-info"></div> <ul> <li><label>ID</label> <span data-bind="text:selectedProduct.ID, events: { change: change }"></span></li> <li><label>Last Name</label> <input type="text" class="k-textbox" id="lname" data-bind="value: selectedProduct.lastName, events: { change: change }" /></li> </ul> <button data-bind="click: remove" class="k-button">Delete Product</button> </div> </div> <script> var crudServiceBaseUrl = "http://127.0.0.1:8081/cors"; var viewModel = kendo.observable({ productsSource: new kendo.data.DataSource({ transport : { read: function(operation) { //alert("begin read") $.ajax({ url: crudServiceBaseUrl + "/People", dataType: "json", success: function(response) { // debugger; //alert(response) alert("success read"); //mark the operation as successful }, error: function(e){ alert("error") } }); }, }, batch: true, schema: { data : "__ENTITIES", model : { id : "ID", fields : { __KEY : { editable : false, nullable : true }, __STAMP : { editable : false, nullable : true }, ID : { editable : false, nullable : true }, firstName : { validation : { required : true } }, lastName : { validation : { required : true } } } } } }), selectedProduct: null, hasChanges: false, save: function() { this.productsSource.sync(); this.set("hasChanges", false); }, remove: function() { if (confirm("Are you sure you want to delete this product?")) { this.productsSource.remove("1"); // this.set("selectedProduct", this.productsSource.view()[0]); this.change(); } }, // showForm: function() { // return this.get("selectedProduct") !== null; // }, change: function() { this.set("hasChanges", true); } }); alert("bind") kendo.bind($("#form-container"), viewModel); </script> </body></html>