Kendo UI, Grid "Toolbar" with Typescript - kendo-ui

I am using Kendo UI's Grid system for a data grid, and am migrating my code to Typescript. I am loving it so far, but have hit a few snags; One of which is that the declaration for the grid seems to be a bit incomplete, even with Telerik's official Typescript definitions.
For example, this code works in javascript. However if I run this exact same code in Typescript, I am told that the toolbar property is invalid, because it is expecting a type of GridToolbarItem. I have traced GridToolbarItem down and, while I do find the interface for it, I cannot seem to actually declare or create it, thus I am not being allowed to create a toolbar for my grid!
elements.grid = $('#grid').kendoGrid({
dataSource: {
transport: {
read: {
url: "/administrator/data/items",
dataType: "json",
type: 'GET',
cache: false
}
},
schema: {
total: "total",
data: "data"
},
page: 0,
pageSize: 15,
take: 15,
serverPaging: true,
serverFiltering: true,
type: "aspnetmvc-ajax"
},
toolbar: kendo.template($("#search-byName").html()),
pageable: {
refresh: true,
pageSizes: true
},
selectable: "row",
columns: [
{
field: "Id",
width: 25,
title: "Identity"
},
{
field: "Name",
width: 40,
title: "Name",
template: "<div class='#: Quality.CSS #'>#: Name #</div><div>#: (Origin.Label != null) ? Origin.Label : '' #</div>"
}
],
change: function (e) {
// do some stuff when an item is selected
},
}).data("kendoGrid");

TypeScript's type system is different from that of Java or C# in that it's the shape of the type that matters, not the names in the class hierarchy. I like to think of it as a contract. The contract says you have to have certain things and it doesn't matter why you have them or if you have more.
Here's a lame example I cooked up:
interface BagOfStuff {
anum: number;
astring: string;
anany: any;
}
function processBag(bag: BagOfStuff): void { }
var aBag = {
anum: 5,
astring: "foo",
anany: {},
bonusThing: "bar"
};
processBag(aBag); // works
aBag never said it was of type BagOfStuff, but it satisfies all the requirements of one so I can pass it into processBag and that will work.

Related

Grid remote data virtualization with custom transport.read method?

I would like to use the Kendo grid with remote data virtualization. I also need to have a custom method for the transport.read property.
My grid is configured like this:
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: function (options) {
// Get the template items, which could be products, collections, blogs or articles
getTemplateItems().then(function (data) {
options.success(data);
});
}
}
},
schema: {
total: function(response) {
return 2000;
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
columns: [
{ field: "title", title: "Title" }
]
});
});
function getTemplateItems() {
var deferred = $q.defer();
smartseoEntityMapping.getEntityInfo({ mappedEntityType: mappedEntityType.Product }).$promise.then(function (data) {
deferred.resolve(data);
});
return deferred.promise;
}
The problem is that the read method is only called once when the grid is initialized. It is not called when the scroll reaches the last item in the current visible set.
I suspect that the grid needs the total number of items but I cannot understand how to set the total number of items. Setting a method for the schema.total property does not work because the method is never called.
So I would like to ask you, is this scenario possible at all, to have the virtualization work with a custom transport.read method, which needs to be called every time to get the next page of data?
Why I am using a custom read? Well I cannot just set an url for the transport.read property because my remote call is made via an angularjs resource, involves setting authentication, etc...
schema is a property of a kendo datasource. It looks like you have it outside of the datasource.
Should be:
$("#grid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 100,
transport: {
read: function (options) {
// Get the template items, which could be products, collections, blogs or articles
getTemplateItems().then(function (data) {
options.success(data);
});
}
},
schema: {
total: function(response) {
return 2000;
}
}
},
height: 543,
scrollable: {
virtual: true
},
sortable: true,
columns: [
{ field: "title", title: "Title" }
]
});

Kendo UI validator fails in grid (message doesn't disappear)

I have to validate some data in kendoUI grid widget.
Seems there is a bug in validator component.
Steps to reproduce:
0. Open and run http://jsfiddle.net/Upw9j/2/
here's the code (some part is missing here due to SO limitations):
$(document).ready(function () {
var crudServiceBaseUrl = "http://demos.telerik.com/kendo-ui/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,
productnamevalidation: function (input) {
if (input.is("[name='ProductName']") && input.val() != "") {
input.attr("data-productnamevalidation-msg", "/^\d{1,}$/");
return /^\d{1,}$/.test(input.val());
}
return true;
}
}
},
UnitPrice: { type: "number", validation: { required: true, min: 1} },
Discontinued: { type: "boolean" },
UnitsInStock: { type: "number", validation: { min: 0, required: true} }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 430,
toolbar: ["create"],
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "100px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "100px" },
{ field: "Discontinued", width: "100px" },
{ command: ["edit", "destroy"], title: " ", width: "172px"}],
editable: "inline"
});
});
Click Edit at any row
Set the cursor on ProductName field, input "2s" (without quotes), press Tab
The tooltip will appear, saying "/^d{1,}$/" (it's a RE, which is matched against field value)
Press Shift+Tab, input "2" (w/o quotes), press Tab, message will disappear.
Repeat steps 3-4 several times. After 2-3 iterations you'll find that message doesn't disappear when field contains valid value. "Update" button behaves correctly.
Is it really a bug or am I doing something wrong? How to work it around?
Yes, this is a bug. I don't know where the official bug tracking page is, but this is a forum thread that details more precisely what's happening: Kendo UI Error on Grid Custom Validation
Basically, when the custom validation fails the input, the datasource model is not updated. So when you re-enter the same (and correct input), it checks against the last correct value, and because it's the same, the validation doesn't fire. In your case, you can verify that if you change the numbers everytime, it still works (2s -> 2 -> 2s -> 3 -> 2s -> 4 etc... this works)
You can also reproduce the custom validation bug right on their demo page. Change Chai to chai to Chai again and the message will still show.
Telerik hasn't fixed it yet and I'm not sure of any easy fixes. You can try to update the data model yourself in the validator function, but this is potentially bad as it gives the user the ability to save bad input into your back end.
Personally (and unfortunately), I just avoided custom validation altogether and ended up using server side validation.

Get all updated and newly created models together in a single url in server side

I am Using Kendo grid with batch edit. I want to get all Modified and newly created models together in a single url.
Say I have created 3 new row and also updated/edited 2 existing row in grid. Data source makes a HTTP request for every CRUD operation . The changed data items are sent by default as models and hit URL as I declared in “create” and update (transport) section of transport in datasource.I am getting models those are Modified (updated) in URL declared for ‘update’ in server side. And also find models those are newly created in URL declared for ‘create’….But I want to get all Modified and newly created models together in a single url.Is it possible to get all of the (both all modified and newly created) in a single URL?
Here is my Code for better understand.
$("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: "LoadPerMeterCostsGridData",
type: "POST",
contentType: "application/json",
dataType: "json"
},
update: {
url: "UpdatePerMeterCostsData",
contentType: "application/json",
type: "POST",
dataType: "json"
},
create: {
url: "CreatePerMeterCostsData",
contentType: "application/json",
type: "POST",
dataType: "json",
},
parameterMap: function (data, operation) {
if (operation != "read") {
return kendo.stringify(data.models);
}
}
},
serverPaging: false,
pageSize: 10,
batch: true,
schema: {
model: {
id: "PerMeterCostID",
fields: {
PerMeterCostID: { editable: false },
DrillBitSizeID: { editable: true },
Form: { editable: true },
To: { editable: true },
PerMeterCost: { editable: true },
ContractID: { editable: false }
}
},
errors: "Errors"
},
error: function (e) {
alert(e.errors + "grid");
}
},
editable: true,
pageable: {
refresh: true,
pageSizes: true
},
toolbar: ["create",
"save",
"cancel"
],
sortable: true,
autoBind: false,
columns:
[
{ field: "PerMeterCostID", width: 50, hidden: true, title: "ID" },
{ field: "DrillBitSizeID", width: 100, hidden: true, title: "Consumable" },
{ field: "Form", width: 100, title: " Form " },
{ field: "To", width: 50, title: "To" },
{ field: "PerMeterCost", width: 100, title: "Per Meter Cost" },
{ field: "ContractID", width: 100, hidden: true, title: "ContractID" },
{ command: ["destroy"], title: "Action", width: "175px" }
]
});
$("#grid ").data("kendoGrid").dataSource.read();
You can set each CRUD action to use the same url, but using the same url: property for both Create and Update. However you will still minimally get TWO requests (albeit to the same url)
update: {
url: "UpdateOrCreateAction",
},
create: {
url: "UpdateOrCreateAction",
},
this is because internally the dataSource pushes all "new" items as defined by "items an Id Field set to the default value for the field" in an array, and all items with dirty set to true into a different array. Kendo then sends both arrays back to the server according to the url for the action. (something like this i'd imagine)
if ( model.isNew())
createdPile.push(model)
else if ( model.dirty === true)
updatedPile.push(model)
//send both piles to the server
The "easiest" way to avoid this is to make sure your new objects explicitly set their id fields to something other then the default, and set the models dirty prob to true.
you could do this by using the edit event to override the actions
grid.bind('edit', function(e){
if ( e.model.isNew() ) {
e.model.id = -1; //
e.dirty = true;
console.log(e.model.isNew()) // should be false
}
})
this is probably an extreme amount of overkill to avoid one additional request, and prone to error. I would advise that you use the same url for both actions, and just accept that you will get the created items in one batch, and the updated in another.

Critical Issue with Kendo UI Grid (post 2013 Q1 release)

take a look at these 2 fiddles
http://jsfiddle.net/uFcHK/
(v2013.1.319)
http://jsfiddle.net/rcvY3/
(v2013.2.716)
The code is identical.
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
pageSize: 15,
serverPaging: true,
serverSorting: true,
serverFiltering: true
},
height: 450,
sortable: true,
pageable: true,
editable: true,
toolbar: ["create"],
filterable: false,
columns: ["ProductID", "ProductName", "UnitPrice"]
});
(you can ignore the the broken nav panel, I don't see this in prod)
The problem is the record count.
If you click on "Add new record" you will see the record count do a text add instead of number add. This is crazy, no idea how kendo let this slide for half a year+
The problem is with OData that return total as string since this is received as string.
In previous releases of code the increment was done as total++ but now it is being added a number allowing to add more than one record in one single operation. The problem is that if you do string + number you actually get the number concatenated to the string.
The easiest way of solving it is providing a total function that just converts the string to number something as simple as defining in the DataSource:
dataSource: {
type : "odata",
transport : {
read: "http://demos.kendoui.com/service/Northwind.svc/Products"
},
schema : {
total : function (data) {
// Convert __count to number
return +data.d.__count;
}
},
pageSize : 15,
serverPaging : true,
serverSorting : true,
serverFiltering: true
},

Need Solution To implement server side sorting in kendo grid

I am trying to implement server side sorting with kendo grid in my MVC application. but sorting option is not showing. i have double checked that i have enabled all the necessary option (made the serversorting to true to the the kendo grid data source and made the scrollable to true to the grid element) to do this but still i am able to find the sortable option. below is my kendo grid code
Kendo Grid Script
var grid = $("#grid");
grid.children().remove();
grid.kendoGrid({
columns: [{attributes:"",field:"",template:"${ResultFields[0].Value},title:"Column 1",width:"110px"},{attributes:"",field:"",template:"${ResultFields[1].Value},title:"Column 1",width:"110px"}],
resizable: true,
reorderable: true,
scrollable: true,
filterable: true,
columnMenu: true,
selectable: "row",
selectable: "multiple",
dataBound: function () { alert("Data Bound"); },
dataSource: {
transport: {
read: {
url: '#Url.Action("Index", "KendoServerSideSorting")',
type: "GET",
dataType: "json",
traditional: true,
data: {
itemTypeId: 1,
where: values,
orderBy: ["", "", ""],
},
},
},
schema: {
data: "Items",
total: "TotalItems",
},
serverPaging: true,
pageSize: 10,
error: function (e) {
alert(e.errors);
}
},
pageable: {
pageSize: 10,
input: true,
pageSizes: [10, 20, 30, 50, 100, 250],
},
change: function () { alert("Change event"); },
})
Controller Action will look like this
public JsonResult Search(int itemTypeId, int skip, int take, string[] where, string[] orderBy)
{
var v = Kernel.Get<IItemSearch>().Search(itemTypeId, skip, take, where, orderBy);
return Json(v, JsonRequestBehavior.AllowGet);
}
*Can anyone help me to resolve this issue. *
You can use the helper functionality from KendoGridBinderEx to parse all the commands (like filter and sort) and do the filtering and sorting at the server-side automatically using DynamicLinq.
See this project : https://github.com/StefH/KendoGridBinderEx for some examples.Also available as NuGet package : https://www.nuget.org/packages/KendoGridBinderEx/

Resources