Hello,

I am using MVC wrappers without Edit button (Add and Delete only). What is the better way to prevent to delete very last record in the grid? I could use command().hidden(bool) but have not figured out yet how to wire JavaScript function there.

Thanks.

@(Html.Kendo().Grid<WebApplication42.Models.Phone>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.PhoneID);
            columns.Bound(p => p.PhoneNumberInt);
            columns.Bound(p => p.PhoneNumberString);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine).ConfirmDelete("Delete").DisplayDeleteConfirmation("Are you sure to delete?"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "auto;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Model(model => model.Id(p => p.PhoneID))
            .Create(update => update.Action("EditingInline_Create", "Grid"))
            .Read(read => read.Action("EditingInline_Read", "Grid"))
            .Update(update => update.Action("EditingInline_Update", "Grid"))
            .Destroy(update => update.Action("EditingInline_Destroy", "Grid"))
            .Events(e => e.Error("onPhoneError"))

        )
)

I wondering if I've missed something, but how does one add headers to a table in the kendo Editor? 

Seems like such a basic requirement in order to produce acceptable HTML.

At the moment if I manually add the html <table><thead><th>Some header</th></thead><table> the editor shows it, but it seems that the add row tool throws an exception... And I cant see any option in the table wizard to add headers.

If I had to add a tool to toggle/insert a header row are there any examples I could follow?

As an aside this competing editor has very nice popup table tools, one of which is adding a header row, merge cells, etc:

https://www.froala.com/wysiwyg-editor/examples/table-styles 

To reproduce:

1. Go to https://demos.telerik.com/kendo-ui/editor/index

2. Insert a table using the table wizard. Set the background color to any color.

3. Go back into the table wizard. Set the background color to clear

Expected: the color from 2 is removed

Actual: The background color does not change

Kendo UI R2 2018

kendoTreeView has the select event to allow prevent selection, any equivalent for DropDownTree ?

We are using kendo with very large dataset.

We had issue with memory overflow with some data, and chrome crashed.

After investigation, we found that the "kendo.guid" function is the cause.

That function is called when creating observable data I think.

The memory leak is caused by the "+=" technique used to create the guid, as each += create a copy of the previous value. 

It performs very well, but each loop from 1 to 32 is causing that trouble.  And we sometimes raise the chrome RAM to 2.5 GB !!!

We changed the string to an array, and uses the "push" instead of +=.  Then, return that array.join(""). And it works perfectly, no more memory issue, with the same cpu performance and speed.

The situation where we got 2.5GB of ram used is now limited to 500MB, and is quickly going down to 100MB after the execution.

You can see the edited version there.

http://dojo.telerik.com/@foxontherock/EGEziVon/13

Just remove-add the underscore prefix to test it, hit Ctrl-Enter multiple times to repeat it, and use the "chrome task manager" to see the "javascript memory" used (you need to add that column).  You can also use the "trashcan" of the memory tab in chrome dev tools to force a garbage collection.

The edited version (guid1) is based on the "minified" version of kendo.web.js.

I have some buttons with icons and text and some only with text.

How the best way to make the button have only icon in a responsive layout?

Is there some settings I can do it or I need to do it in my scripts?

Thanks

I'm currently trying to add a search bar at the top of my gridview. My data is displaying properly in the grid but when I try to search, I am met with this error: Uncaught TypeError: (d.ComponentId || "").toLowerCase is not a function. I have tried updating the schema and trying all of the examples I've found online but I cannot seem to get it to work properly. I will include my grid definition and sample of the JSON Data I'm passing into the table. I am using a template to properly populate the grid so I'm not sure if that is the problem. 

grid definition

$("#grid").kendoGrid({
toolbar: [
{ template: kendo.template($("#template").html())}
],
dataSource: {
data: filteredData
},

schema: {
model: {
fields: {
ComponentId: { type: "string" },
Description: { type: "string" }
}
}
},
selectable: true,
allowCopy: true,
height: 430,
sortable: true,
refresh: true,
filterable: {
mode: "row"
},
columns: [
{ field: "ComponentId",title: "Component Id", template: "#=test(data)#",filterable:true},
{ field: "Description",title: "Description", template: "#=description(data)#",filterable:true }
],
}).data("kendoGrid");

$("#btnSearch").on("click", function () {
alert("clicked");
var filter = { logic: "or", filters: [] };
$searchValue = $('#searchBox').val();
if ($searchValue) {
$.each($("#grid").data("kendoGrid").columns, function( key, column ) {
if(column.filterable) {
filter.filters.push({ field: column.field, operator:"contains", value:$searchValue});
}

});
}
$("#grid").data("kendoGrid").dataSource.query({ filter: filter });
});

Here is a small data sample. I am pulling these from a larger JSON file. 

Article:{#text: Array(6), InventoryOnReceipt: {…}, HasOwnIdentification: {…}, ComponentList: {…}, AccessoryList: {…}, …}
Characteristic:{@attributes: {…}, #text: Array(15), CCTMS: {…}, CCFMS: {…}, CZCMS: {…}, …}
ComponentGroup:{#text: Array(2), GroupId: {…}}
ComponentGroupTree:{#text: Array(4), GroupId: {…}, Description: {…}, ComponentGroupTree: {…}}
ComponentId:{#text: "SCH_225-03"}
CouplingUseCharacteristic:{#text: "True"}
DatasetState:{#text: "1"}
Description:{#text: "Fräseranzugsschraube 16/M8"}
Description_en:{#text: "Clamping srew for combi shell mill holder 16/M8"}

also here are my two template functions which just returning the correct data for the two fields I'm populating on the grid. 

function description(data)
{
return data.Description["#text"];
}

Sorry if this is too much information at once. Thank you. 

In our app, we are using "custom filtering", as we set our own function in the "operator" property of the filter.

I found, that, every operator is called twice.  If I have 10 rows to filter, and 1 operator set for 1 specific filter, it runs 20 times, from 1 to 10, and again from 1 to 10.

Steps to reproduce: 

http://dojo.telerik.com/@foxontherock/EfOyiwIS

After some investigation, I found this:

In your "query" function, you run this: 

(copied from the minified version + chrome prettyPrint in F12)
result = this._queryProcess(this._data, this._mergeState(options)); 

The filter is applied.

Then, a few lines later, that:

this._aggregateResult = this._calculateAggregates(this._data, options);

And, from that line, the whole filtering is applied again.

When we have only a few lines to filter, it's quick. 

But with 5000 rows of 10 filters per row, running it twice is a good difference in cpu, memory and time!

You can look at my dojo sample, it's easy to reproduce.