Questions on Kendo UI for jQuery Forum

2 answers

137 views

Adding Toolbar to Kendo Grid Causes IE8 Scrollbar Flash

When using the Toolbar method, IE8 flashes the browser vertical scrollbar for a brief moment after the grid is loaded the first time. Without the Toolbar method, the scrollbar is not flashed. Is this a browser/javascript issue, or a Kendo issue?

@(Html.Kendo().Grid<HelpController.AdministrationHelpIndexGridViewModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(h => h.Id)

.Visible(false);

columns.Bound(h => h.Name)

.Width(400);

columns.Bound(h => h.Description)

.Width(400);

columns.Bound(h => h.Id)

.Width(500)

.ClientTemplate(Html.ActionLink("#=LinkText#", "ClickThrough", "Help", new { Id = "#=Id#", area = "" }, new { target = "_blank" }).ToHtmlString());

columns.Bound(h => h.DisplayOrder)

.Width(50);

columns.Command(command => { command.Edit(); command.Destroy(); })

.Width(200);

})

.HtmlAttributes(new { style = "width: 1550px;" })

.ToolBar(toolbar => toolbar.Template("<a class=\"k-button k-button-icontext\"><span class=\"k-icon k-i-plus\"></span>Add a help link</a>"))

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Events(events => events.Edit("onEdit"))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(20)

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(h => h.Id))

.Read(read => read.Action("Index_Read", "Help", new { area = "Administration" }))

.Update(update => update.Action("Index_Update", "Help", new { area = "Administration" }))

.Destroy(update => update.Action("Index_Destroy", "Help", new { area = "Administration" }))

.Events(events => events.RequestEnd("onRequestEnd")))

)

Grid

answered on 08 Apr 2014

1 answer

313 views

Display Chart Legend outside of plot area / Graph?

Hi,

Please see my chart attached. It is very long so I have made it's parent container overflow for scroll, however I need a way to identify to the user what each trend line is.

I can't seem to find the css class for the legend, I would like to absolutely position it outside of the graph perhaps. My other option would be to somehow attach some text to the end portion of the each trendline, but I'm not sure how this would be done. I could not figure out how to attach a note to the very last element in a series either.

Any help with any of these issues would be greatly appreciated!

Thanks!

Charts

answered on 08 Apr 2014

1 answer

188 views

Changing SeriesDefaults Options

Hi,

Is it not possible to set the seriesDefaults options via the chart.options syntax?

I wish to be able to change multiple chart options after initialisation prior to refreshing the datasource, and many function correctly such as:

chart.options.legend.labels.color = "blue";

chart.dataSource.read(data);

However setting anything related to seriesDefaults has not effect:

chart.options.seriechart.options.seriesDefaults.markers.visible = true;

chart.options.seriesDefaults.markers.size = 30;

chart.options.seriesDefaults.markers.border.width = 5;

chart.dataSource.read(data);

Is it not possible to globally change series options such as label visibility? I wish to able to changed these options globally rather than refresh the datasouce and loop through each chartSeries setting options individually.

I have tried the chart.refresh() and chart.redraw() methods after the dataSource is refreshed.

Any help would be appreciated.

Charts

answered on 08 Apr 2014

3 answers

496 views

Not displaying json data

I have a scheduler that I am trying to displaying some events on. I have created a JSBin that shows what I am trying to do. The actual datasource has a transport defined that hits my webservice but I replaced the transport with the data that is actually returned and got the same results.

There should be some events displaying. Admittedly, this is my first scheduler. I started with copy/paste from the demos and tweaked from there. I am at a complete blank as to why those events are not showing up. The best I can think is that there must be a deserialization issue like maybe with the date format or something but that is, of course, a guess.

Any help would be greatly appreciated!

Scheduler

answered on 08 Apr 2014

1 answer

134 views

Kendo Editor in grid edit popup

Is it possible to use the kendo Editor widget for editing a field in the grid popup? Tried without success to figure this out.

Thanks,
Gary

Templates

answered on 08 Apr 2014

13 answers

199 views

VirtualViewSize feature

So I was excited when I saw references to this on the forums, as It's been something I've wanted for a while now (pagination for local data). Unfortunately I've run into issues getting this working on an existing app.

Please correct me if I'm wrong but all I should need to do is add the property to the listview declaration and have the full results as the data property of the datasource no?

The result I'm getting it all the <LI>s are stacked on top of each other. (Yes i'm using the latest Kendo files)

Heres the HTML snippet of my view

<div id="items-view" data-role="view" data-title="Blocks & Items" data-layout="default-layout" data-init="app.items.init" data-show="app.items.showView">

<ul data-role="listview" data-style="inset" data-type="group">

<li>

<ul class="ul-content">

</ul>

</li>

</ul>

</div>

Heres the javascript for it:

var data = app.items.filterLimit(1000, app.items.data);

$("#items-view ul.ul-content").kendoMobileListView({

dataSource: new kendo.data.DataSource({

data: data

}),

template: "<li>#: name #</li>",

endlessScroll: true,

virtualViewSize: 50

});

data variable is a giant json array of items. somewhere in the 500 count range. It's correct, It's the same data i was using previous (looping over and manually appending LI's)

Is there another step that I am missing perhaps? Or am I crazy and this should be working? I'll attach a screenshot of what it's doing....

General Discussions

answered on 08 Apr 2014

4 answers

645 views

[Solved] Can't get total from datasource

I've been struggling with this all day, and I can't believe it's this hard to get the total number of records returned in a datasource! Very frustrating... I've read the documentation over and over and nothing seems to work for me. I've got a json response that is structured like this:

{ records: [], totalRecordCount: 20, queryRecordCount: 20 }

Here's my dataSource code:

return new kendo.data.DataSource({

transport: {

read: {

type: "POST",

data: request,

cache: false,

url: ServiceUri + "/Associates",

dataType: "json"

}

},

serverPaging: false,

pageSize: 25,

schema: {

data: "records",

total: "totalRecordCount",

model: {

fields: {

Id: { type: "number" },

Name: { type: "string" },

Sex: { type: "string" },

Race: { type: "string" },

Height: { type: "string" },

Weight: { type: "string" },

Age: { type: "number" },

DOB: { type: "date" },

LastChanged: { type: "date", field: "IdentifierDate" }

}

},

});

So when I want to get the total I pass a function to this dataSource (i.e. callback) and return it in the requestEnd event, like so:

requestEnd: function(e) {

callback(e);

},

I put this after the schema block in the dataSource, although I don't think it should matter...? This event never fires, or if it does I cannot break inside of it in Chrome. So I tried using the change event in a similar manner, that never fires either. Here's a complete function attempting to get the dataSource and retrieve the total (normally I would not include the events in the dataSource and then bind them again after the dataSource, but for brevity sake...):

GetAssociates: function (id, pgSize, callback) {

var request = {

"SearchParameters": {

ID: id

}

};

return new kendo.data.DataSource({

transport: {

read: {

type: "POST",

data: request,

cache: false,

url: ServiceUri + "/Associates",

dataType: "json"

}

},

serverPaging: false,

pageSize: pgSize,

schema: {

data: "records",

total: "totalRecordCount",

model: {

fields: {

Id: { type: "number" },

Name: {type: "string" },

Sex: {type: "string" },

Race: {type: "string" },

Height: {type: "string" },

Weight: {type: "string" },

Age: {type: "number" },

DOB: {type: "date" }

}

},

requestEnd: function(e) {

callback(e);

},

change: function(e) {

callback(e);

}

}).bind('change', callback).bind('requestEnd', callback);

}

I just want to do a dataSource.total() and find out if there's anything in my dataSource, and I CANNOT. It always returns 0! And I can see that my response is not zero, so why does it always say zero for the total?? I believe I'm following standard async methods to make sure the response has completed, so I'm stumped and completely frustrated, once again.

I know I sound pretty whiny in this message, but it's just been a long day. I sure would appreciate any help!

Thanks,

Eddie

Data Source

answered on 08 Apr 2014

4 answers

176 views

UTC conversion bug ?

Hi,

I'm using a webservice that returns me data that takes into account my local timezone (all their data is expressed in UTC, and they return me data adjusted to my timezone, so 2014-12-31T22:00:00.000Z for instance.

I'm using the "date" type for the category axis, but realized something strange, that depends on the actual interval (year, month, day...). It appears that for UTC dates, Kendo DataViz converts them to local dates. For instance, if I received hourly data, Kendo DataViz automatically shows them using an hourly format, and if I receive 2014-01-02T22:00:00.000Z, it's rendered as midnight on 03rd of january (I'm leaving in UTC+2). However, when dates are shown in monthly or yearly interval, it seems Kendo DataViz omits completely the conversion, so 2013-12-31T22:00:00.000Z is shown as 2013 year instead of 2014 (which is supposed to be the expected result in UTC+2).

Here is a simple gist that reproduces the issue: http://jsbin.com/mapif/4/

As you can see, the first graph that shows data on yearly basis, conversion is not done, while it's done in the other chart that shows data on hourly basis.

Thanks!

Charts

answered on 08 Apr 2014

6 answers

190 views

Android (Samsung Note 2) Device Orientation Change

I was going out of my mind trying to get the device orientation change to work on my (Verizon) Samsung Note 2.

I ended up with the attached code (that seems to work) and am posting to get feedback and help anyone else with the same struggle.

I started with the Kendo Mobile sample app, upgraded the files to 2014 Q1, added a NavBar to the header in the layout, and then added the following to the app.js:

01.(function (global) {

02. var mobileSkin = "",

03. app = global.app = global.app || {};

04.

05. document.addEventListener('deviceready', function () {

06. navigator.splashscreen.hide();

07. $(document.body).height(window.innerHeight);

08. }, false);

09.

10. kendo.onResize(function () {

11. setTimeout(function () {

12. $(document.body).height(window.innerHeight);

13. window.scrollTo(0, 0);

14. }, 400);

15. });

General Discussions

answered on 08 Apr 2014

1 answer

6.3K+ views

Kendo Grid add class to a column header

Hi,

I want to integrate Kendo grid with bootstrap responsive behavior. Below is my code, it did apply to the records column but did not apply to the column header.

In the below example I want the middle name column to be hidden when the screen size is Medium (Bootstrap breaks), the below code does make the columns invisible in case of resolution not large but it does not apply on the column header (Middle Name). Please let me know how I can achieve this.

HTML-
<div kendo-grid k-data-source="someDataSource" k-selectable="'row'"
k-pageable='{ "pageSize": 10, "refresh": true, "pageSizes": false }'
k-sortable="true", k-groupable="true", k-filterable="true" k-columns="gridColumns">
</div>
JS -
$scope.gridColumns = [
{ "field": "firstName", sortable: true, "title": "First Name" },
{ "field": "lastName", sortable: false, "title": "Last Name" },
{ "field": "middleName", sortable: false, "title": "Middle Name",
attributes: {
"class": "hidden-md visible-lg"
} }
];

Grid

answered on 08 Apr 2014