Questions on Kendo UI for jQuery Forum

1 answer

80 views

Issues with Kendo Grid on mobile devices

Hi,

Concerning the kendo grid on mobile devices (phone/tablet) did you know that :

- When you set or clear a column filter, the grid height is no more 100% of the screen height and a part of it becomes invisible (you need to try to scroll down to see the whole grid). This behavior is visible on your own demo (kendo adaptative grid), is a huge usability issue and clearly a bug. Please provide a working workaround.

- When you set a column order, then go inside column settings, the "Sort Ascending / Descending" title becomes invisible. This is also reproducible on your own demo. Is this a wanted behavior? If it is, it is far from great (even if it is a minor issue).

Thanks in advance

General Discussions

answered on 24 Dec 2013

3 answers

188 views

Total number of categoryaxis categories

Hi,

I am trying to set step numbers for the categoryaxis labels. I would like for the categoryaxis to show 7 labels no matter how many datapoints is on the chart. I figured I'd use the categoryAxis.labels.step property to do this. The chart can have up to or more than 1000 datapoints. I am using this example however there appears to be several arrays that holds data and I am not sure which container to target. How can I effectively control the number of xaxis labels no matter how many datapoints is on the chart? Thanks in advance.

Thanks,
Tonih

Charts

answered on 24 Dec 2013

1 answer

108 views

complex menuitems

Hi There,

I am trying to create a menu with menuitems like this (see attached image).
Is this possible to create such a menu with kendo?

Can I use something like a grid inside the menu?

Thanks in advance
Robert

Menu

answered on 24 Dec 2013

3 answers

265 views

Hide columns in a grid // table ID attribute of the grid.

I have 2 questions...

1) On responsive pages, how do I make the grid columns hide based upon screen size?

2) How do give an id attribute to the table when it is created? I know the grid is generated within a div tag holder which I can reference. I only want to reference the table ID (i.e. the grid itself).

Thanks.

Grid

answered on 24 Dec 2013

1 answer

76 views

Jaydata and Kendo Mobile

I am doing a simple app in Kendo Mobile. I have a form that adds to a datasource when you click add. That works great. I am having trouble converting it over to use Jaydata. Here is what I have:

var alarmsViewModel = kendo.observable({

alarms: [

{ time : "13:00", note : "Note goes here", daysOfWeek : "Every Monday", onOff : "off", snooze : "off", alarmType : "ring" },

{ time : "11:30", note : "Note goes here 2", daysOfWeek : "Every Monday", onOff : "off", snooze : "off", alarmType : "ring" }

],

add: function(e) {

this.get("alarms").push({

time: this.get("time"),

note: this.get("note"),

daysOfWeek: this.get("daysOfWeek"),

onOff: this.get('onOff'),

snooze: this.get('snooze'),

alarmType: this.get('alarmType')

});

e.preventDefault();

},

onClick: function(e) {

kendoConsole.log("event :: click", e);

}

});

Now I realize I have to define the data schema, then I can just attach it to a listview like I would a normal viewmodel. How do I add to it though? My form is pretty simple just data-binding the fields like so:

<input type="time" data-bind="value:time">

All the examples in the blog post on here and on Jaydata's site all are for grids or other things that are editable.

Thanks.

MVVM

answered on 24 Dec 2013

2 answers

207 views

Manipulate search string

Hi,

I have a working multiselect with a remote datasource with a ton of values (1500+).
The multiselect allows my users to start typing and find the item they're looking for.

What I would like to do is manipulate/verify their search term before actually searching. Here's an example to clarify.

All items are in the same format, six numbers or letters, followed by a dash, followed by 2 numbers, example: 3Z0000-02. The length of the code before the dash is always 6 characters (letters and/or numbers); if a code has only 2 characteristics, trailing zeros are added to pad the code to 6 characters (in the example 4 zeros).

To make searching easier/faster for the users, I want to allow them to type 3Z-02 and show 3Z0000-02 as a result. I know how to manipulate the string itself, but I am looking for a hook in the MultiSelect widget where I can manipulate the search string entered by the user, before it is used for searching.

Is this possible, and if yes, which event should I use to perform this manipulation? A small example of how to manipulate a search string before filtering the datasource would be greatly appreciated.

Regards,
Rinck

MultiSelect

answered on 24 Dec 2013

1 answer

186 views

Style question - keep parent style when selecting child item

I have a demo my problem online -- as you can see, I have a problem when selecting a child under Secondary Reviews or Primary Reviews.

I want the child items to remain as they are when you mouse over them or to just set text-decoration to underline. When you click on a child item, the parent should remain unchanged and the text of the child item should turn blue.

All styles are inline in the index.html page.

I know I'm missing something obvious here but just can't figure out how to change that child style without that change affecting the parent tem's style.

Thanks for any help!

Joel

PanelBar

answered on 24 Dec 2013

3 answers

259 views

grid rendering issue when located on panelBar bottom panel (initially inactive / collapsed)

I want to put together a jsBin project to demonstrate a problem I'm having with the kendo grid on a panelBar, but the problem only manifests itself when the grid contains a large amount of data, i.e. a thousand rows or more. Is there a Northwind or other URL that returns a large dataset I can use?

Here's the scenario, in the meantime.

Top panel (active panel) contains a Google map.
Bottom panel (collapsed) contains kendo grid.

User clicks on the map, and the latitude/longitude is used to fetch data from our database via AJAX.
Kendo grid is populated with the data while the bottom panel is still collapsed.
User clicks on the bottom panel to expand it and see the query results.

This works perfectly -- but only on the first query.

When the user re-opens the top map panel to click on a different location, I destroy() the existing grid, reconfigure the grid, and repopulate the grid's dataSource with the new data from the second query. Although the dataSource data object contains the full dataset from the XHR, the grid renders only the first row, and the height of the grid is truncated from 600px to 100px.

PanelBar

answered on 24 Dec 2013

3 answers

878 views

ComboBox refresh method selects an item

I have a question about some code inside the refresh() method of the ComboBox widget. Specifically, the following lines:

if (state !== STATE_FILTER && !that._fetch) {

that._selectItem();

}

In my application, the dataSource of a combobox needs to change based on the user making various choices. In this case, we use ComboBox.setDataSource() to update the combo. When the user clicks the dropdown button to open the popup, the combo does a refresh which causes the above code to run. That code selects the first item in the data, even though "suggest" and "highlightFirst" are both false. Moreover, the "change" event is not fired, so the combo shows a selection, but our application code is not notified.

Why does refresh() select an item? Shouldn't it just rebuild the options list but keep other state in the control unchanged?

Thanks,
AHG

ComboBox

answered on 23 Dec 2013

2 answers

78 views

SPA drop down list from view template not working on re-render

Running build v2013.3.1119. The drop down list functions normally when it is first displayed, but after switching out views with a re-render of the view the drop down list becomes disabled and cannot be clicked on or accessed. I also noticed that a submit button loses its click event hander when the template is re-rendered.

Here is a jsfiddle example that replicates the issues: http://jsfiddle.net/markm1/x5q24/

I have tried different ways of creating the drop down, including using mvvm and the results are the same. Any ideas?

Here is the html:
<script id="index1" type="text/x-kendo-template">
    <select id="ddMatter1" name="ddMatter" >
        <option>Select 1...</option>
        <option value="type-1">1</option>
        <option value="type-2">2</option>
    </select>
<input id="search" name="search" type="submit" value="Search"/>
</script>
<div id="app"></div>
<br/><br/><br/>
<p>click render to break things</p>
<input id="render" type="submit" value="Render"/>

And here is the script:
var index1 = new kendo.View('index1');
$("#app").html(index1.render());
$("#ddMatter1").kendoDropDownList();
$("#search").click(function () { alert('search'); });
// render the view again to break things
$("#render").click(function () { $("#app").html(index1.render());
alert("Now the drop down does not work and the search button is no longer wired up")});

SPA

answered on 23 Dec 2013