I'm new to Kendo UI.
I'm looking for suggestion/help to implement Globalization support for my application
Globalization example in Kendo UI Web framework at following link http://demos.telerik.com/kendo-ui/globalization/index
This example only changes control culture and changes values format. Any working example for validation and field label change based on culture?
My application will have multiple language support so I will have to change field labels and validation based on language. Any help, suggestion or working example would be appreciated.

Hello,
This is my first Kendo UI application. I am trying to create a simple project where it gets data from database and binds it to grid. There are about 350k records I am retrieving from the database. However, the data is not displayed/bind to the grid. I can see the data is being retrieved from database to the calling method but not sure why its unable to bind. I am not sure if its problem returning Json response or something else. Below is the code.
@{ ViewBag.Title = "Home Page";}<div class="container-fluid"> <div class="row"> <div class="col-xs-18 col-md-12"> <div id="grid"></div> </div> </div></div><script> $(document).ready(function () { $(".textButton").kendoButton(); $("#grid").kendoGrid({ dataSource: { type: "aspnetmvc-ajax", transport: { read: { url: "Read" } }, schema: { data: "Data", model: { id: "Id", fields: { "UserName": { type: "string" }, "Application": { type: "string" }, "Environment": { type: "string" }, "LoginTime": { type: "date" }, "IsSuccess": { type: "boolean" }, "IP": { type: "string" }, "Source": { type: "string" } } } }, pageSize: 20, serverPaging: true, serverSorting: true, serverSorting: true, }, height: 550, filterable: true, sortable: true, pageable: true, columns: [{ field: "UserName",title: "User Name" }, { field: "Application"}, { field: "Environment"}, { field: "LoginTime", title: "Login Time" }, { field: "IsSuccess"}, { field: "IP" }, { field: "Source" } ] }); });</script>
public ActionResult Read([DataSourceRequest]DataSourceRequest request) { IQueryable<Login> logins = db.Logins; DataSourceResult result = logins.ToDataSourceResult(request, c => new Models.Logins { Id = c.Id, UserName = c.UserName, Application = c.Application, Environment = c.Environment, LoginTime = c.LoginTime, IsSuccess = c.IsSuccess, IP = c.IP, Source = c.Source }); return Json(result); }Thanks!

Hello,
I'm trying to get a grid with a column editing with a drop down list. I'm following this example, but although I get the values translated correctly and saved and loaded correctly, whenever I start editing the Drop-Down list doesn't have the value, as if it failed reading the current value from the row.
Here is the relevant code snippets:
Dictionary data source, translation helper and drop down callback:
var puDict = new kendo.data.DataSource({ type: "json", transport: { read: { url: "getdict", } }, schema: { model: { id: "code", fields: { code: {nullable: false}, name: {nullable: false} } } } }); puDict.fetch(); function translateType(type) { return puDict.get(type).name; } function typeDropDownEditor(container, options) { $('<input required data-text-field="name" data-value-field="code" data-bind="value:' + options.field + '"/>') .appendTo(container) .kendoDropDownList({ autoBind: false, dataSource: puDict } ) }
Here is the fields part of the grid:
columns: [ {field: "code", title: "Code (Unique)"}, {field: "name", title: "Unit name"}, {field: "type", title: "Unit type", editor: typeDropDownEditor, template: "#=translateType(type)#"}, {command: ["edit", "destroy"], title: " "} ]
And `getdict` returns a JSON array that looks like this -
[{ "code": "TYPE1", "name": "Something of Type One"}, { "code": "TYPE2", "name": "Something of Type Two"}]
The grid shows the string "Something of Type One" and "Something of Type Two" correctly, so the translation works. Also, updating works correctly (and server side only knows about the code ("TYPE1", "TYPE2")), so the Drop Down also knows how to translate values back and forth.
The only problem is that when I click on "edit", the dropdown is initially empty (nothing selected), instead of having the current value selected.
Hi,
I need to add additional fields in the pop up event of the scheduler, this data should be saved in Database eventually.
fields: {
taskId: { from: "id", type: "number" },
title: { from: "title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "start" },
end: { type: "date", from: "end" },
startTimezone: { from: "startTimezone" },
endTimezone: { from: "endTimezone" },
description: { from: "description" },
recurrenceId: { from: "recurrenceId" },
recurrenceRule: { from: "recurrenceRule" },
recurrenceException: { from: "recurrenceException" },
attendees: { from: "attendees", defaultValue: 1 },
projects: {from: "projID"},
isAllDay: { type: "boolean", from: "isAllDay" }
Attendees, projects are 2 additional fields .
Attendees,projects are not showing up in e of the event when I am trying to save the event.
What I'm trying to replicate is the bit on the left of their schedule in http://wheniwork.com/
... the profile pic and name part with an angular directive.
I'm extending the timeline view and overriding _createColumnsLayout and _createRowsLayout.
This is a very close (older) dojo example of how I'm doing this:
Here is my typescript file... the typings in kendo.all are incomplete ... so I've had to cast to 'any' quite a bit ... and well guess. More in the typescript files would be lovely ;-)
module Hr.KendoThings { var extend = $.extend, k: any = kendo, ui: any = kendo.ui, kDate: any = k.date, SchedulerTimelineView = ui.TimelineView; //NS = ".kendoTimelineWeekView"; function customCreateLayoutConfiguration(name, resources, inner, something) { var resource = resources[0]; if (resource) { var configuration = []; var data = resource.dataSource.view(); for (var dataIndex = 0; dataIndex < data.length; dataIndex++) { var defaultText = kendo.htmlEncode(k.getter(resource.dataTextField)(data[dataIndex])); var dataItem = data[dataIndex]; var templateText = ` <div>{0}</div> <employee-pic id=\"'{0}'\"></employee-pic>`; templateText = kendo.format(templateText, dataItem.Id); var template = kendo.template("<a href='javascript: void(0)'>#=data.Email#</a>"); var template2 = kendo.template("<a href='javascript: void(0)'>{{dataItem.Email}}</a>"); var obj = { text: template2(dataItem),// t(dataItem), className: "k-slot-cell" }; var element = $(template2(data)); var scope = something.$angular_scope; //scope from _createColumnsLayout //this.angular is not defined :( //this.angular('compile', function () { // return { // elements: element, // data: [{ dataItem: data }] // }; //}); //obj[name] = customCreateLayoutConfiguration(name, resources.slice(1), inner); //text version configuration.push(obj); //configuration.push(element); } return configuration; } return inner; } let options: any = { nextDate: function () { return kDate.nextDay(this.startDate()); }, calculateDateRange: function () { var selectedDate = this.options.date, start = selectedDate, end = kDate, dates = []; for (let index = 0, length = 7; index < length; index++) { dates.push(start); start = kDate.nextDay(start); } this._render(dates); }, _createColumnsLayout: function (resources, inner) { var that = this; return customCreateLayoutConfiguration("columns", resources, inner, that); }, _createRowsLayout: function (resources, inner) { var that = this; return customCreateLayoutConfiguration("rows", resources, inner, that); }, }; var SchedulerTimelineWeekView = SchedulerTimelineView.extend(options); MyAndromeda.Logger.Notify("Defining SchedulerTimelineWeekView"); extend(true, ui, { SchedulerTimelineWeekView: SchedulerTimelineWeekView }); }
What would the easiest way of doing this?
I presume I will need to tie in the $ events as well?
Best Regards,
Matt
Hi,
i have a question, i have a grid populated with local data (array of data), i need to insert more rows to my data array and then refresh the grid without the Grid redraw all the items. For example if i have 20 items on my grid and into my data array and then the user execute load more (other 20), into my code load the 20 more records into my array data (pushing) and the dataBound event is fired. Then the Grid takes the 40 records again not just the 20 more.
Can some one help me?
Sorry about my english.
Thanks in advance.
Hello,
I have an error using the editor udner IE 11. I have a drop down list in the main page, and below that I have a div called dynamicContentDiv. Thehtml content of that div is taken from the serveraccording to the value of the top dropdownlist. For example, if the value is A, then the content taken from the server (razor), is a text field, and an Editor. If the value is B, then the content is a checkbox and 2 Editors...etc.
All items are inside a form with a button to submit values to the server.
On the first load, the dropdown has a default value set, everything is working well. and I can use submit button. When I change the value of the dropdown list, I get the new content from the server, and I replace the div content using $("#dynamicContentDiv").html(data). And data is what I'm getting from the server as an html content with the kendo ui editor. When I click on the submit button, I get this error: Access denied, and when I double click on that exception using F12 Developer tool, it redirects me to the kendo.web.js file (see the picture).
This occurs only using IE, it works well using Chrome and Firefox.
Thank you for your quick help.

The problem is summarized in the attached. Many of the buttons icons look this way, with the icon flush to the top of the parent container instead of vertically centred.
I'm including the following CSS files and nothing else: (form the 2016 Q1 Release). How can I fix this?
<link rel="stylesheet" href="/CSS/Kendo/kendo.common.min.css" /> <link rel="stylesheet" href="/CSS/Kendo/kendo.metro.min.css" />
Hi,
I try to implement the kendo grid with angular.js and my backend is web (C#). I found there is not many on the internet except one with OData and not so much doc about it.
Can you provide me a sample with inline editing for all the basic CRUD for
I implemented the read and the create but the problem of the create it's on the callback here how I created my .
return new kendo.data.DataSource({
transport: {
read: function (options) {
hideShowGridLoadingSpinner(true);
var webapi = new kendo.data.transports.webapi({ prefix: "" });
var params = webapi.parameterMap(options.data);
_options = options;
$http.get("/api/country", { params: params }).success(onSuccess).error(onError);
},
create: function (options) {
hideShowGridLoadingSpinner(true);
var webapi = new kendo.data.transports.webapi({ prefix: "" });
var params = webapi.parameterMap(options.data);
$http.post("/api/country",options.data).success(onSuccess).error(onError);
}
},
pageSize: 10,
serverPaging: false,
serverSorting: false,
serverFiltering: false,
schema: $.extend({}, kendo.data.schemas.webapi, { data: "data", total: "total", errors: "errors" }),
schema: {
model: {
id: "id",
fields: {
id: { type: "number", editable: false },
name: { type: "string", validation: { required: true } }
}
}
}
});
Here the success
function onSuccess(data) {
hideShowGridLoadingSpinner(false);
if (data.errors == undefined) {
_options.success(data.data);
} else {
_options.error();
eventBus.showErrorNotification(data.errors);
}
}
The main problem is the data returned is the object added so when I pass this to the success method all object in the grid are flush except the new one added. Is normal but how I can update the grid with the new inserted data without doing a callback to the get method ?
Thanks