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
In your demo for Tabstrip, I see that the collapsible divs and the tabs (LI - Tab1 and Tab2) span beyond the UL and outer div (<div id="tabstrip">). Is there any way you can help me make it the same width? Also make the tabs (tab1 and tab 2) have a margin in between them.
http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#configuration-collapsible
<div id="tabstrip">
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div>Content 1</div>
<div>Content 2</div>
</div>
Thanks a lot in advance for you help.

Hi,
I encountered another issue while trying to select newly added item to the grid. The issue is, that previously selected items remains selected after forcing to select the only new item. Steps:
1. Selected a item/items in a grid
2. click Add button
3. Both old and new items are selected
Example: http://dojo.telerik.com/@Marcin/UyulO/2
Best regards
Marcin