1. Set up kendo grid: 

@(Html.Kendo().Grid(Model)
.Name("gridnamehere")
.Columns(columns =>
{
columns.Bound(p => p.Name);
columns.Command(commands =>
{
commands.Edit().Text("");
commands.Destroy().Text("");
}).Width(125);
})
.ToolBar(toolbar =>
{
        toolbar.Create();
})

.Editable(editable => editable.Mode(GridEditMode.PopUp).Window(w => w.Title("Add/Edit")))
.Pageable()
.Events(e =>
{
e.Edit("onGridEditing");
e.DataBound("onGridDataBound");
e.Cancel("onGridCancel");
})
.Sortable()

etc...

 

2. javascript to replace existing buttons and display new icons (passing in the gridname because we will have several grids on the page):

 

function onGridDataBound(e) {
setKendoGridButtons(e.sender.wrapper[0].id);
}

function onGridCancel(e) {
setKendoGridButtons(e.sender.wrapper[0].id);
}

function onGridEditing(e) {
setKendoGridButtons(e.sender.wrapper[0].id);

}

function setKendoGridButtons(gridName) {
setTimeout(function () {
$("#" + gridName + " .k-grid-edit").html("<span class='fa fa-pencil fa-fw'></span>").css("min-width", "10px").removeClass("k-button");
$("#" + gridName + " .k-grid-delete").html("<span class='fa fa-times fa-fw'></span>").css("min-width", "10px").removeClass("k-button");
$("#" + gridName + " .k-grid-add").html("<span class='fa fa-plus fa-fw'></span>").css("min-width", "10px").removeClass("k-button");
});
}

 

This initially display as expected with the kendo buttons being replaced by the font awesome icons, however when we click on the Add or Edit buttons (icons), we get a screen flicker in the background where the old kendo buttons appear behind the add/edit template pop-up. This seems to happen when we change any details in the edit template popup i.e. on row change within the kendo grid?

Kendo multi select with checkbox not working properly with latest kendo version 

https://jsfiddle.net/MNqaT/149/

Hello,
We recently updated to kendo 2015.1.429 and found out the following problem - in some of our bar charts the drawn chart width is much more bigger than the defined one. In the attached image you can see we defined the chartArea width of 600. In the right side of the image you can see that Chrome drew an much much wider svg.

Notice that not all of our charts were impacted like this, but we fail to see the difference between those charts that still work well and those that no longer work as expected following this update.

We did manage to restore this problem and you can experience it using the following link:
http://dojo.telerik.com/aQumu

Please advise.
Thanks,

Ron.

I would like make a char look like image.

Is it possible?

I'm trying to use a single datetime field from my JSON to fill the date and time in separate areas of my template, and it's not working.

Here's an example of the JSON:

And here's where I'm trying to format and display the information:

Instead of seeing "12-May-2015" for the date and "7:25 PM" for the time, I'm seeing the full datetime string, completely unformatted, in both areas (ie. 05/12/2015 19:25:43). I tried modifying the JSON to pass back separate date and time fields and that didn't work either.

Hi,

I'm having trouble getting saveChanges() to work correctly when both my main grid and detail grid consist of related, editable data.

I have data coming back from an API that looks something like this:


I need to display the parent fields in my main grid and each of the children in the detail grid for each row. 

The data is retrieved prior to my grid instantiation and stored in an ObservableArray, later used to create the DataSource for my grid. 
I wasn't sure how to preserve the editable properties when using a Node definition for a HierarchicalDataSource and so I have a Model defined similarly to this:



Given that I can't define an Array of ChildObjects in my ParentObject definition (this may be the root cause for my issue), I'm using the following approach to produce my DataSource's data (I'm using Angular):



My main grid then uses $scope.observableArray as its DataSource's data, and the detail grid uses "dataItem.children" - this works fine in terms of displaying my data with the correct editable fields but I'm having the following troubles with the editing itself:

1) Cells in my detail grid are automatically saved on edit, rather than staging batches (this is actually fine in my case but still unexpected I think).
2) If I begin editing a row in the main grid, I then see the batch editing functionality for that row's detail rows. However, saveChanges on the detail grid does not work.
3) If I edit a row in the main grid in isolation, I get batch editing functionality, however saveChanges does not work.

In both cases where I say "saveChanges doesn't work," I get the following error:

Uncaught TypeError: Cannot read property 'editableParentField' of undefined.

I believe this is to do with my Model definition and the hacky approach for creating my ChildObjects, so if you could advise on the best approach for data of this structure in order to use batch editing correctly that would be great.

Thanks,

Reece

I didn't find any example of the chart as the one i attached here. Is that possible to build it by dataviz?

Thanks.

I am utilizing the comboBox as part of my mvvm application. The comboBox is getting the data bind value from a complex object that is set as a property within the vm. Everything appears to show up visually. However, I noticed whenever I switch the selected option in my UI, I get an error of "Uncaught TypeError: n.get is not a function". However, whenever I remove the data bind value from my code (leaving just the source), there is no errors thrown at all. I don't quite understand this error and why it would be throwing it.

Hello,

I have an ASP.NET WebForms application rendering a DataGrid. I need to extend it with a Quick-Edit function and I decided to use a kendo.UI window for this task. I've been using them before in the application without any problems. But on this particular page I can't get it centered correctly. I have no CSS assigned to the div (window). I've tried changeing the location of the div in the markup without any effect.

What happens: I click on the button to open the window and the window scrolls the page down a lot and then pops up the window at the bottom of the visible area. If you are at the bottom of the page, the page also gets scrolled down (into an area not visible/there normally).

This is the declaration of the window:

And this is how it is opened: 

The other markup is rather complicated. I'd rather send you login data to the page, so you can take a look at it live, if that is fine with you.

Kind regards,

Krisztian

I need a way to run multiple versions of kendo on a single page. Is there an equivalent feature to jquery.noConflict? I have a large codebase written against 2014.1.318, but this version has some issues with scheduler. I'd like to use 2014.3.1411 for scheduler control, and 2014.1.318 for everything else. Is this possible?