Questions on Kendo UI for jQuery Forum

2 answers

239 views

Howdy y'all.

I'm trying to figure out a way to use the mobile popover widget in a desktop site that is not using kendo mobile. The functionality is basically exactly what I am looking for. Is there any way to do this easily? I'm hoping I don't have to get to hacky with implementation.

Thanks in advance for your help!

PopOver (Mobile)

answered on 24 Nov 2015

1 answer

146 views

How Desktop Web Application and Mobile Web Application can be combined in one app?

Hello!

I'm developing web app that is based on KendoUI Scheduler control with AngularJS. It looks great on desktop browsers, but I want to implement custom design for mobile phones and tablets. I know about mobile=true flag, but this is not enough for me - app still looks not acceptable on phones. So I've read tutorial about building Mobile web app: Link

This tutorial covers scenario, when app is built from scratch, and is adapted only for mobile devices. But I need such behaviour:

When user opens app from desktop browser, it renders like standard web app (this behaviour I've achieved now)
When user opens app from tablet or phone, it renders like Mobile web app, include additional mobile controls (for example, switches Link), custom logic, touch and gestures support (Link) and so on.

Can this behaviour be achieved? And if so, can you please provide some examples/tutorials/demos?

General Discussions

answered on 24 Nov 2015

7 answers

2.2K+ views

Get element id from the data-click Event

Hi,

I am new to Kendo Framework and I am using it for a Mobile application.

I have a javascript function which gets called when one of the <Li> gets clicked, the javascipt function is provided through <ul> data-click attibute. some thing like
<ul data-role="listview" data-style="inset" data-type="group" data-click="listViewClick">
The problem is, when this function listViewClick() gets called with a parameter e (event), I am unable to get the Target ( the <li> that was clicked). I tried to print e.target, e.target.id but no luck.
I need help on how to get the id of the element that was clicked.

TIA,
Manju

ListView (Mobile)

answered on 24 Nov 2015

1 answer

422 views

(Solved) DataSource binding to grouped Listview with custom-ish sort

Posting here in case this helps anyone else:

I had a case where I needed to bind a simply JSON object to a listView. The issue was that the listView when using grouping sorts on the group field, so if you have:

data = [

{ band: '0-11', text: 'Some text here' },

{ band: '8-20', text: 'Some text here' },

{ band: '10-30', text: 'Some text here' } ];

And chose to do this:

kendo.data.DataSource.create( { data: data, group: "band" } )

Then the resulting list will be oddly sorted:

0-11, 10-30, 8-20

The trick here is to sort by one field but use another in the headerTemplate:

data = [

{ band_order: '1.0-11', band: '0-11', text: 'Some text here' },

{ band_order: '2.8-20', band: '8-20', text: 'Some text here' },

{ band_order: '3.10-30', band: '10-30', text: 'Some text here' } ];

And then use a function as the headerTemplate to use another field completely:

$("#myList").kendoMobileListView( {

dataSource : kendo.data.DataSource.create( { data: bands, group: "band_order" } ),

template : $("#mytemplate").html(),

headerTemplate: function(data) { return data.items[0].band; } } );

This allows you to create your own sort by creating a specific "order" field without having to use it as the group title.

ListView (Mobile)

answered on 23 Nov 2015

1 answer

524 views

[Solved] Add vertical guideline

Using Kendo Charts, is it possible to add vertical guidelines? For example, on a chart showing all the days of this month vs. amount of remaining budget, I'd like there to be a red vertical line the height of the entire chart to indicate the current date. Thank You.

Charts

answered on 23 Nov 2015

2 answers

216 views

sorting the columns in the hide and show of the contextmenu

I have a kendo grid i am creating using angularjs. At the moment the columns are hard coded, which is allowing me to chose what columns to show and hide with the context menu option "columns". The problem I have is there is no way that I can see to order them alphabetically without changing the order in the grid.

My question, is this the expectation or is there a way to sort just the context menu columns column name?

Grid

answered on 23 Nov 2015

3 answers

180 views

Refreshing TreeMap with angularjs

I have TreeMap on my page as directive:

Sometimes i should change size of widget. But when i change height and width and call

.scope().kTree.resize()

it's nothing happens. Does it ridht way? How i can dynamicly change size of TreeMap?

Thanks.

TreeMap

answered on 23 Nov 2015

1 answer

834 views

Unable to fix grid row height at set value

I am trying to fix the height of grid rows and hide the overflow. The code below does not work. Even if I set overflow-y:hidden. The rows expand vertically to show all the text. Eventually, I would like to show an ellipse(...) and open a popup with the full text on hover/click. But, I need first to fix the height at some value.

I saw some threads that indicated my approach here might work. So, I think some of my assumptions are incorrect.

My hope is that someone notices right away my problem.

Thanks,

Rick

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Menlo Park Project</title>

<link rel="stylesheet" href="../styles/kendo.common.min.css">

<link rel="stylesheet" href="../styles/kendo.default.min.css">

<style type="text/css">

.k-grid tr { max-height:20px; overflow:hidden; }

.k-grid td { max-height:20px; overflow:hidden; }

</style>

<script src="../js/jquery-1.9.1.js"></script>

<script src="../js/kendo/kendo.all.min.js"></script>

</head>

Grid

answered on 23 Nov 2015

1 answer

1.0K+ views

Custom Validation Not Working

My custom validation isn't working so modified a demo in the dojo and it didn't work as well.

01.<!DOCTYPE html>

02.<html>

03.<head>

04. <meta charset="utf-8">

05. <title>Kendo UI Snippet</title>

06.

07. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css">

08. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css">

09. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css">

10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.min.css">

11. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.dataviz.default.min.css">

12. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css">

13.

14. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

15. <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script>

16.</head>

17.<body>

18.

19.<div id="myform" data-name="my-form">

20. First <input name="firstname" /> Last <input name="lastname" /> <br /><br/>

21. <button id="save">Save</button> <button id="reset">Reset</button>

22. <div id="errors"></div>

23. <div id="user"></div>

24.</div>

25.

26.<script>

27. // attach a validator to the container and get a reference

28. //var validatable = $("#myform").kendoValidator().data("kendoValidator");

29. $("[data-name=my-form]").kendoValidator({

30. rules: {

31. validName: function (input) {

32. if (input.is('[name=lastname]') || input.is('[name=firstname]')) {

33. var first = $('[name=firstname]').val();

34. var last = $('[name=lastname]').val();

35.

36. return !(first === "" && last === "");

37. }

38. return true;

39. }

40. }

41. , messages: {

42. validName: "First or Last name is required."

43. }

44. });

45. $("#save").click(function() {

46. var form = $("[data-name=my-form]");

47. var validatable = form.kendoValidator().data("kendoValidator");

48. //validate the input elements and check if there are any errors

49. if (validatable.validate() === false) {

50. // get the errors and write them out to the "errors" html container

51. var errors = validatable.errors();

52. $(errors).each(function() {

53. $("#errors").html(this);

54. });

55.

56. }

57. else{

58. $("#errors").html('');

59. $('#user').html($('[name=lastname]').val() +', '+ $('[name=firstname]').val());

60. }

61. });

62.

63. $('#reset').on('click',function(){ $('#user').html(''); $('input').val('');});

64.</script>

65.</body>

66.</html>

Any ideas?

Validation

answered on 23 Nov 2015

5 answers

353 views

Kendo ComboBox virtualization with OData

Hello. I'd like to know how to implement virtual scrolling for my ComboBox. I'm using OData for ComboBox's DataSource.

I've tried to use the example (https://demos.telerik.com/kendo-ui/combobox/virtualization) - however i'm stuck. I don't know how to implement a Value Mapper in my WebAPI. In this example it's easy to get the index of some value, which is not loaded yet, because there are no any filters/ordering there. But in my case, i'm using the same OData method for different DataSources, but with different filters/ordering.

So, how can i get the index of some value, if i don't know which filter/ordering was used for the DataSource?

General Discussions

answered on 23 Nov 2015