Questions on Kendo UI for jQuery Forum

1 answer

332 views

Hello,

I wish to place a sparkline chart in the final cell of each row in a html table. When resizing the window a standard area chart resized in line with the browser/its container, however the sparkline does not resize at all. Is it possible for the sparkline to resize automatically like other dataviz objects?

The attached screenshot shows the sparkline on the left and the standard chart on the right after the browser has been resized.

Thanks.

Charts

answered on 30 May 2014

2 answers

165 views

Can't move the map or see markers.

Hello,

I just copied the Razor MVC example "basic usage" from the demo page and I can't see the markers.
Aside of that, the map disappears when I tried to navigate with the mouse to another area (image attached).

These is the code I have used:

@(Html.Kendo().Map()
.Name("map")
.Center(30.268107, -97.744821)
.Zoom(3)
.Layers(layers =>
{
layers.Add()
.Type(MapLayerType.Tile)
.UrlTemplateId("http://tile2.opencyclemap.org/transport/#= zoom #/#= x #/#= y #.png")
.Subdomains("a", "b", "c")
.Attribution("© <a href='http://osm.org/copyright'>OpenStreetMap contributors</a>." +
"Tiles courtesy of <a href='http://www.opencyclemap.org/'>Andy Allan</a>");
})
.Markers(markers =>
{
markers.Add()
.Location(30.268107, -97.744821)
.Shape(MapMarkersShape.PinTarget)
.Tooltip(tooltip => tooltip.Content("Austin, TX"));
})
)

Thanks.

Map

answered on 30 May 2014

9 answers

3.2K+ views

Kendo fails to parse or format UTC dates

Hello,

The kendo date format do not seem to take the time zone into account when parsing or formatting UTC dates.
This simple test reproduces it:

$("#grid").kendoGrid({

dataSource:{

data:[

{

utcdate: kendo.parseDate("2012-04-18 11:23:45Z", "u"),

localdate: new Date()

}

],

schema:{

model:{

fields:{

utcdate:{

type:"date"

},

localdate:{

type:"date"

}

},

height:360,

groupable:true,

scrollable:true,

sortable:true,

pageable:true,

columns:[

{

field:"utcdate",

title:"local from UTC",

format:"{0:yyyy-MM-dd HH:mm:ss}",

width: 150

},

{

field:"utcdate",

title:"UTC from UTC",

format:"{0:u}",

width: 150

},

{

field:"utcdate",

title:"UTC-S from UTC",

format:"{0:s}",

width: 150

},

{

field:"localdate",

title:"local from local",

format:"{0:yyyy-MM-dd HH:mm:ss}",

width: 150

},

{

field:"localdate",

title:"UTC from local",

format:"{0:u}",

width: 150

},

{

field:"localdate",

title:"UTC-S from local",

format:"{0:s}",

width: 150

}

]

});

Parsing the 0-based UTC date apparently ignores the timezone and creates a different local date that is offset by the timezone the user is in. The "local from UTC" column should display the local time, not the 0-based UTC time.
Formatting a local JavaScript date to a UTC date produces a date without taking into account the timezone. All "from local" columns are displaying the same hours, while they should be offset.

Looking at the Kendo UI source code for parsing dates, it clearly does not have a check for the "Z" timezone marker. And is also missing a UTC() function call to create the date. The formatting functions also don't use the JavaScript Date UTC functions.

Can this be fixed globally somehow?

Best Regards,
Wannes.

Globalization

answered on 30 May 2014

1 answer

333 views

Chart - Group labels on x Axis

Hello,

On my page I have a Kendo chart.

The chart contains weeks on the xAxis, and the labels are displayed correctly. Is it possible to group the week labels by month name, like in the image bellow, but
still keep the series lines on a week basis?

Thank you,
Adrian

Charts

answered on 30 May 2014

3 answers

293 views

Virtual Scrolling on Dropdownlist example

Hi - Is there an example on how to make the kendo dropdownlist as virtual scroll-able? It mentions that it has this ability http://www.telerik.com/kendo-ui/dropdownlist

Can anyone provide me an example. I'm new to Kendo UI

Very much appreciated.

RLN

DropDownList

answered on 30 May 2014

1 answer

116 views

Kendo popup on validation errors

Hi,

I have a kendo pup shown on grid edit.

For some reason the popup closing even though there are server validation failure messages shown beside fields on form when creating a new item/row in the grid.

.But this does not happen when edit is done existing Row in the grid.The popup doesn't close when their are validation messages shown on the form for incorrect input.

Any thoughts.

Thanks
Chatrapathi chennam

Grid

answered on 29 May 2014

3 answers

526 views

Kendo Angular Grid - no records message and icon

Hi,

We're using Kendo Grid and AngularJS. We show data in the grid by fetching it either thru $http service call and bind the result to the grid and secondly by using transport : { servicePath }.

We have a requirement where we wish to show an icon and a custom message to the user if there are no records available to be shown in the grid.

Can you please let us know how shall we go about it? If you need more information, please let us know.

Thanks!

Grid

answered on 29 May 2014

9 answers

484 views

Button Not Working in Android Browser

I have found that the button on my login page does not work at all in the stock android browser. I have created a jsfiddle with the relevant section of my page, which you can try at the following link:
http://jsfiddle.net/efinkel/HSEFs/2/

It seems like the button does not catch the touch/click event in that browser. However, the page works as expected with the mobile versions of Chrome and Firefox. The phone I tested this with is a Samsung Galaxy S3 running Android 4.04.

Button (Mobile)

answered on 29 May 2014

7 answers

933 views

Change multiple selected cells background color on click

Hi,

I have a Kendo Grid with selectable: "multiple, cell" option. I would like to select multiple cells, then click on a button outside the grid to change the selected cells background color. Do you have any suggestions?

Thanks

Grid

answered on 29 May 2014

7 answers

456 views

Show Crud Server validation error beside fields

Hi,

1) I am looking for how to show one or more server side errors beside the fields .As of now able to popup database sever error but not sure how to show it beside the column fields.Please find the demo attached below(By default showing the sever error while updating the code Field).
2) For some reason the Validation messages are showing below the fields and not beside the fields in the form as show in the image.

Here is how I have set it up

01.uwdataSource = new kendo.data.DataSource({

02. transport: {

03. read: {

04. url: crudServiceBaseUrl + "/GetUnderwriterData"

05. },

06. create: {

07. url: crudServiceBaseUrl + "/POSTaddUnderwriterData",

08. type: "POST",

09. contentType: "application/json"

10. },

11. update: {

12. url: crudServiceBaseUrl + "/POSTUnderwriterData",

13. type: "POST",

14. contentType: "application/json"

15. },

16. parameterMap: function (options, operation) {

17. if (operation !== "read" && options.models) {

18. return kendo.stringify(options.models[0]);

19. }

20. },

21. error: function (args)

22. {

23. if (args.errors) {

24. alert('there was an error');

25. var grid = $("#underwriterGrid").data("kendoGrid");

26. grid.one("dataBinding", function (e) {

27. e.preventDefault();//cancel grid rebind if error occurs

28.

29. for (var error in args.errors) {

30. showMessage(grid.editable.element, error, args.errors[error].errors);

31. }

32. });

33. }

34.

35. }

36. },

37. schema: {

38. //Define the field which contains the error

39. errors: function (response) {

40. return response.error;

41. },

42.

43.

                },//End of Schema

           });



 uwdataSource.bind("error", dataSource_error);

01.function showMessage(container, Code, errors) {

02. var validationMessageTmpl = kendo.template($("#message").html());

03. //add the validation message to the form

04.

container.find("[data-valmsg-for=" + Code + "],[data-val-msg-for=" + Code + "]").replaceWith($(validationMessageTmpl({ field: Code, message: errors[0] })))

05. // .replaceWith(validationMessageTmpl({ field: name, message: errors[0] }))

06. }

07.

08.function dataSource_error(e) {

09. alert(e.xhr.responseText); // displays "error"

10. }

//Index.cshtml

<script type="text/kendo-template" id="message">

<div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">

<span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div>

</div>

</script>

Thanks,
Chatrapathi chennam

Validation

answered on 29 May 2014