Questions on Kendo UI for jQuery Forum

0 answers

221 views

Memory leak using Kendo Grid with Knockout JS

We are experiencing a crippling memory leak using a Kendo Grid. We are using the knockout-kendo.js library to bind a Kendo Grid to an existing Knockout observable array such that the grid responds to row insertions and removals in the array.

Attached is a stand-alone example page that demonstrates the issue. Basically, this sample binds an array of objects with observable fields, and a button removes the first item in the array. If you load it you should see the grid of test values. If you keep pressing the button and watch your Task Manager, you should see the memory usage of the browser slowly climbing (we've confirmed that it happens in IE10, IE11, and Firefox). The grid in the real app is bigger so the memory leak gets big enough to crash IE10 after a relatively small number of operations.

This is a high-priority issue, so any help you can give us would be greatly appreciated!

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script src="Scripts/kendo.all.js"></script>
    <script src="Scripts/knockout-3.2.0.js"></script>
    <script src="Scripts/knockout-kendo.js"></script>
</head>
<body>
    <script id="Row-Template" type="text/html">
        <tr data-uid="#: uid #">
            <td data-bind="text: col1"></td>
            <td data-bind="text: col2"></td>
            <td data-bind="text: col3"></td>
            <td data-bind="text: col4"></td>
            <td data-bind="text: col5"></td>
            <td data-bind="text: col6"></td>
            <td data-bind="text: col7"></td>
            <td data-bind="text: col8"></td>
            <td data-bind="text: col9"></td>
        </tr>
    </script>

   <div>
       <button data-bind="click: OnClick">Remove One</button>
   </div>

            var rows = [];
            for (var i = 0; i < 100; i++) {
                rows.push({ col1: ko.observable("test"), col2: ko.observable("test"), col3: ko.observable("test"), col4: ko.observable("test"), col5: ko.observable("test"), col6: ko.observable("test"), col7: ko.observable("test"), col8: ko.observable("test"), col9: ko.observable("test")});
            }

self.Rows = ko.observableArray(rows);

            self.OnClick = function () {
                self.Rows.remove(self.Rows()[0]);
            };
        }

ko.applyBindings(new ViewModel());
</script>
</body>
</html>

Grid

asked on 31 Dec 2014

2 answers

82 views

Grid Column Format

Hi there,

I want to format my Price columns as a currency. So I set the format option in columns to "{0:c}". Now when I update the grid data source.data, the format goes away. I can construct the whole grid again, but I want to know if there is way to do it more efficiently.

Below is snapshot of code.

Thanks in advance, Nisarg

Grid

answered on 31 Dec 2014

1 answer

467 views

Modifying Grid bound to local data wont set dirty flag

Hi,

I have a grid which is bound to local JavaScript array. When i modify few records and try to get list of them, by checking "dirty" flag, i get nothing. Same when i try to retrieve deleted records; grid.dataSource._destroyed is empty.

var gridData = [

{ Id: 1, PaymentDate: '1/1/2015', Amount: 100 },

{ Id: 2, PaymentDate: '2/1/2015', Amount: 200 },

{ Id: 3, PaymentDate: '3/1/2015', Amount: 300 },

{ Id: 4, PaymentDate: '4/1/2015', Amount: 400 },

];

$(function() {

$("#grid").kendoGrid({

dataSource: {

data: gridData,

schema: {

model: {

id: "Id",

fields: {

Id: { type: "number" },

PaymentDate: { type: "date" },

Amount: { type: "number" }

}

},

}

},

editable: {

mode: "inline"

},

toolbar: ["create", "save", "cancel"],

columns: [

{

field: "Id",

title: "Id",

width: "150px"

},

{

field: "PaymentDate",

title: "Payment Date",

format: "{0:" + dateFormat + "}",

width: "150px"

},

{

field: "Amount",

title: "Amount",

format: "{0:c}",

width: "150px"

},

{

command: ["edit", "destroy"]

}

]

});

grid = $("#grid").data("kendoGrid");

})

function show() {

var data = grid.dataSource.data();

var destroyed = grid.dataSource._destroyed;

for (i = 0; i < data.length; i++) {

if (data[i].dirty) {

console.log(data[i].Id);

}

for (i = 0; i < destroyed.length; i++) {

console.log(destroyed[i].Id);

}

Please suggest how i may do this.

Grid

answered on 31 Dec 2014

1 answer

130 views

[Solved] Remove file on fail

When an upload errors, there's a 'reload' button, but no 'remove'. Is there any way to remove the file and try another?

Upload

answered on 31 Dec 2014

1 answer

166 views

Validating textare

Hi,

I have a form that has a couple of input type=text controls that are required.
There are also texterea controls that are NOT required.
On form submit I get the little icon besides the textearea control (if left empty) and submit is disabled (see attached screen shot).

How do I mark the textarea control not required and/or not even checked by the validator?

Thanks

Miroslav

Validation

answered on 31 Dec 2014

6 answers

100 views

Being able to use dateHeaderTemplate with timelineMonth

We cannot use dateHeaderTemplate option with timelineMonth
Please check it:

http://dojo.telerik.com/@doktoresperanto/uDUVu

Scheduler

answered on 31 Dec 2014

2 answers

9.2K+ views

Adding dropdown list to a grid column

I need to add a dropdown list to a grid that gets populated with data not in the data set the grid itself is being bound to. I've been through the samples and forums and have yet to find anything that actually works. Can a column that is independent of the data source being used to populate the rest of the grid be included in the grid?

Grid

answered on 30 Dec 2014

4 answers

195 views

kendo.diagram.Path might be missing in kendo.all.d.ts

I have a test index.html file that uses the following successfully:

var path = "M10 0 L90 0 L100 25 L90 50 L10 50 L0 25 Z";

var block = new kendo.dataviz.diagram.Path({ width: dataItem.width, height: dataItem.height, fill: { color: 'green' }, data: path });

When I try to recode this in Typescript, kendo.dataviz.diagram.Path is undefined/undeclared. I see no evidence of it in kendo.all.d.ts.

This code is trying to build a group by assembling a rectangle, or a shape like the above, and some text, rather than adding shapes directly to the diagram.

Using 2014.2.1008.commercial. I'll look at 2014.3.1119 but I see no reference to this in the release notes.

Diagram

answered on 30 Dec 2014

3 answers

710 views

Server Filtering using DataSourceRequest in MVC API

Hi,

I am having problem with server filtering in my mvc api controller. The DataSourceRequest Filter is null when I look at the request variable but if I enable server paging I can see the pagesize is being set. The model returns ok but with no filtering.
I have checked in Fiddler the request header and the filter is there, see below.

GET /api/Event?callback=jQuery19100650028504896909_1419384451525&filter%5Blogic%5D=and&filter%5Bfilters%5D%5B0%5D%5Bfield%5D=StateID&filter%5Bfilters%5D%5B0%5D%5Boperator%5D=eq&filter%5Bfilters%5D%5B0%5D%5Bvalue%5D=7&_=1419384451528 HTTP/1.1

MVC API Controller Code
public DataSourceResult GetEvents([ModelBinder(typeof(WebApiDataSourceRequestModelBinder))]DataSourceRequest request)
{
return db.carEvent.ToDataSourceResult(request);
}

Cordova App Code
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "http://localhost:57459/api/Event",
dataType: "jsonp"
}
},
schema: {
data: "Data",
model: {
ID: "id",
fields: {
ID: { type: "number" },
Event: { type: "string" },
Location: { type: "string" },
Information: { type: "string" },
StateID: { type: "number" },
EventDate: { type: "date" }
}
}
},
serverFiltering: true,
filter: { field: "StateID", operator: "eq", value: StateValue }
});

Thanks Andrew

Data Source

answered on 30 Dec 2014

3 answers

190 views

StockChart - Negative values -> Category Axis label

Hello,

A have issues to successfully set the categoryAxis Labels to the bottom of the stockChart in case of Negative Values.
As recommended on other posts on the issue, I set 2 categoryAxis and I set axisCrossingValue: [0, -1000000000] .
I only succeed with some tricks to make it work with a Navigator :
http://dojo.telerik.com/OgarE/3

But if I remove the Navigator ;
It's not working anymore :
http://dojo.telerik.com/OgarE/4

It's not working either with a vertical stockChart... :
http://dojo.telerik.com/OgarE/5

As I don't bind the data to the datasource attribute, (the data are in the series attributes), I can't catch the dataBound event (the event is not fired) to set the category axis labels padding to 0... So I can't resolve the issue this way...

Please, can you provide a solution which will work in every possible configuration ?

Charts

answered on 30 Dec 2014