Questions on Kendo UI for jQuery Forum

2 answers

102 views

ScrollView not 100% and only first out of text swipe able

Hello

I have 2 problems with the ScrollView:

First i'm using data-stretch="true" and data-content-height="100%" but my Scrollview is not rendered with 100% (of possible space)
see here:
http://jsfiddle.net/mU9H3/
and ScrollView within Modalview
http://jsfiddle.net/xY6rU/

2nd problem is the page 2(+) is only touchable (to swipe) till the text ends.(first page woks fine)

i can't find the failure.
(i try to use scrollview in mobile app within modalview)

thx for the advice!

ScrollView (Mobile)

answered on 17 Mar 2014

5 answers

103 views

Is it possible to load an existing div when appending a splitter window?

I have an application where users can turn the splitter on and off (not collapse a pane). When they turn it off, I use the splitter.remove to remove the pane and the splitter.append to add the pane back. But it seems like, if I want to put pre-defined data in that pane that I have to supply the html using the .html method. However, I want to maintain the state of the pane which means I need to really be able to show/hide a div. Is there an actual way to do this? It looks like I could use the contentsUrl method but then I have to supply a full page and can't really maintain state in the page.

Am I going about this in the wrong way?

Thanks.

Splitter

answered on 17 Mar 2014

6 answers

106 views

Modify an Array, it's not this diffucult, right?

I just can;t wrap my head around this...it can't be this hard?

I really just need to do something "like" a tabstrip.

So 4 elements, when one is clicked it becomes selected, the others become deselected. I have an array in my model with Text, Value, Selected properties and a template to render it out.

...Is there some easier way to do this?...or a way that works, because this doesn't :)

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

# if(data.Selected) { #

<label class="selected #: CssClass #">

# } else { #

<label class="#: CssClass #">

# } #

<input type="radio" name="subfilters" value="#= Value #" data-bind="click: onSubFilter_Click, checked: selectedSubFilter" />

#= Text #

</label>

</script>

onSubFilter_Click: function (e) {

var subFilters = this.get("subFilters");

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

if (e.data.Text === subFilters[i].Text) {

subFilters[i].Selected = true;

}else{

subFilters[i].Selected = false;

}

this.set("subFilters", subFilters);

$eceViewModel.refreshEncounters();

},

MVVM

answered on 17 Mar 2014

3 answers

229 views

Feature Request: column.attributes.class should handle function (similar to column.template)

Hello Guys,

KendoUI is great :)
But some pretty simple features are missed:

We have no possibility to set up custom CSS classes for table cells.
Please not offer to use RowTemplate instead :) we need it on cell level only and don't want to think how rest of row's HTML should look like

Currently possible to define column style like this (sets 'some-css' class to table cell):
var columns = [{ field: 'someData', title: 'Some Data', attributes { 'class': 'some-css'} }];

it would be really nice to have something like this (set css classes depending on dataRow):
var columns = [{ field: 'someData', title: 'Some Data', attributes { 'class': function(dataRow){ return row.data > 1 ? 'css-go-up': 'css-go-down' }} }];

Thanks,
Val

Grid

answered on 17 Mar 2014

1 answer

534 views

Left Align the "itemsPerPage" span

span.k-pager-info.k-label{

text-align:left;

}

$searchTable.kendoGrid({

height: height,

sortable: true,

selectable: false,

navigatable:true,

resizable: true,

reorderable: true,

columnResizeHandleWidth: 10

,pageable: {

pageSize: 10,

pageSizes:[10,20,50,100],

buttonCount: 5,

input:true,

messages:{

page:"Section",

itemsPerPage: "Select to show more",

display: "<span style='text-align:left;' >Showing {0}-{1} from {2} data items</span>"

}

});

It's great that I'm able to modify the labels for the information and functional bar at the bottom.

I would also like to be able to have the "itemsPerPage" label left justified, instead of beiong poalced in the far right corner. This is because I have a grid that dynamically grows with the number of columns in the results, so it can at times be very wide (off the page), and this information is not immediately visible. Is there a nice function or configuration item I'm missing?

I tried adding a "span" to the message, but it didn't work since the added span ends up inside of another span.

I also tried using CSS, but that's not having any visible effect either. I'm still experimenting with some widths for it perhaps, or maybe my selector just needs to be more specific (suggestions?). When selecting the elements with the developer tools, the spans themselves don't appear to be taking up the entire space of the bottom bar.

Grid

answered on 17 Mar 2014

2 answers

266 views

Kendo UI scheduler - right click on cells deselects selection

Hi!
I have the problem mentioned above. I want to create a little context menu on scheduler when clicking on selected cells. The problem is than when i rightclick selected cells, it selects only one cell that was clicked and deselects the other ones. Is there a solution for that ?
Regards

Data Source

answered on 17 Mar 2014

3 answers

207 views

Complete template example for editor

I am trying to customise the editor template for the scheduler and have found examples to include the recurrence editor but none for the timezone editor. Also using the examples for the recurrence doesn't appear to hide recurrence options when editing a single event within the series. It seems to do a simple customisation requires a lot of work to restore the existing functionality, especially when looking at the source it builds the template on the fly anyway.

Is it possible to provide a full HTML template example that acts identical to the original template, or provide a way to add a simple fields to the default template?

Scheduler

answered on 17 Mar 2014

1 answer

147 views

Column resizing issue

I enabled column resizing and it works great for the first 4 columns. At the 5th column when I hover to find the resizable icon, it just won't appear and every column after that also won't do it. Have I done something wrong in the grid? I tried commenting out the child grid and that didn't fix it. I also tried commenting out scrollable, sortable, filterable, pageable and reorderable. Still no luck.

$(document).ready(function () {

$("#gridWrapper").kendoGrid({

dataSource: {

type: "json",

transport: {

read: "@ParentURL",

cache: false

},

schema: {

model: {

id: "Identity",

fields: {

Identity: { type: "string" },

CarrierName: { type: "string" }

}

},

pageSize: 50

},

height: 470,

scrollable: true,

detailInit: detailInit,

sortable: true,

filterable: true,

pageable: false,

resizable: true,

reorderable: true,

selectable: "Multiple",

//"template": "<input type=\"checkbox\" />"

toolbar: [{ text: "Select All", className: "SelectAll" }, { text: "Assign Load", className: "AssignLoad" }, { text: "Unassign Load", className: "UnAssignLoad" }, { text: "Update", className: "Update" }],

columns: [

{

field: "Load",

title: "Load",

width: 120

},

{

field: "Routes",

title: "Routes",

width: 120

},

{

field: "WHS",

title: "WHS",

width: 120

},

{

field: "CustomerName",

title: "Customer",

width: 220

},

{

field: "OrderNum",

title: "Order#",

width: 100

},

{

field: "City",

title: "City",

width: 100

},

{

field: "Status",

title: "Status",

width: 100

},

{

field: "PONum",

title: "PO#",

width: 120

},

{

field: "ShipDate",

title: "Ship Date",

width: 120,

template: '#= kendo.toString( toDate(ShipDate), "MM/dd/yyyy" ) #',

type: Date

},

{

field: "DeliveryDate",

title: "Delivery Date",

width: 120,

template: '#= kendo.toString( toDate(DeliveryDate), "MM/dd/yyyy" ) #',

type: Date

},

{

field: "CaseCount",

title: "Case Count",

width: 120

},

{

field: "ExpectedWgt",

title: "Expected Wgt",

width: 120

},

{

field: "ExpectedSkids",

title: "Expected Skids",

width: 120

},

{

field: "DeliveryCarrier",

title: "Delivery Carrier",

width: 120

},

{

field: "StopNum",

title: "Stop#",

width: 120

},

{

field: "LoadStopNumber",

title: "Seq#",

width: 120

},

{

field: "LineHaulCarrier",

title: "Line Haul Carrier",

width: 140,

//template: "#=CarrierName#",

//editor: reportEditor

},

{

field: "Comments",

title: "Comments",

width: 120

}]

}).attr("id", "GridOptions");

function detailInit(e) {

$("<div/>").appendTo(e.detailCell).kendoGrid({

dataSource: {

type: "json",

transport: {

read: "@ChildURL",

cache: false

},

filter: { field: "Identity", operator: "eq", value: e.data.OrderNum },

pageSize: 5

},

height: 200,

scrollable: {

virtual: true

},

sortable: true,

filterable: true,

pageable: true,

columns: [

{

field: "ProductCode",

width: 30

},

{

field: "Description",

width: 50

},

{

field: "Cases",

width: 30

},

{

field: "Weight",

width: 30

},

{

field: "Skids",

width: 30

}]

}).attr("id", "GridChildren");

}

Grid

answered on 17 Mar 2014

26 answers

1.3K+ views

Datepicker becomes 'static'

Hello!

I'm working on a single-screen application using Kendo for the UI. I just built in a datepicker on one of the screens, and it presented me with quite a strange behaviour.
Some background information: the application is single-screen, so I never navigate to different URLs, rather the content is changed by modifying the DOM with javascript. So I build up screens from scratch by creating the elements, and replacing $(body).html(), or any other parent I need to update if its a smaller change.
One of these screens has a DatePicker, created like this:

$("#captureDate").kendoDatePicker();

For the first time this screen loads, the DatePicker works fine. But if I navigate to another screen, and come back later, the DatePicker is loaded, but it's "frozen", meaning I can open it, it shows the right date, but none of the controls work inside the widget (changing the date/month/year etc.).
The #captureDate element is part of a kendo template rendered into the DOM every time this screen loads up (the element itself is an input with a date as the value, formatted with kendo.toString(), with culture set [to hu-HU]). The screens are "destroyed" on navigation by replacing the .html() of the changing element (usually the whole body) with the new screen's content.

What could be the cause of the problem? Thank you in advance for your help!

DatePicker

answered on 15 Mar 2014

0 answers

154 views

Dependent Observable Performance

I'm creating this thread as a way of soliciting ideas for getting the best performance I can out of the kendo MVVM framework (speed is King!).

One of the major problems I've encountered with this and other MVVM frameworks is that using dependent /calculated observable objects and functions can really slow down the client GUI. This is in part because of some rather verbose permissions and model states that are generally required in an "enterprise" HTML5/JavaScript. application. If a particular function on the observable references multiple values on the view model (using get), this can cause useless and extraneous executions of that function caused by other processes updating and changing the values on the model. The two best examples of this are loading the model with AJAX, and clearing the model; these two operations cause every single model value to change, which causes a lot of useless multiple executions and updates of calculated fields.

What suggestions might everyone have for increasing the performance of kendo MVVM?

MVVM

asked on 14 Mar 2014