Questions on Kendo UI for jQuery Forum

6 answers

144 views

[Solved] 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

254 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

577 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

297 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

243 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

184 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.5K+ views

[Solved] 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

177 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

2 answers

758 views

Kendo blocked Signature Pad

We really need some kind of signature plugin integrated with our product. And found Signature Pad http://thomasjbradley.ca/lab/signature-pad/ works well on desktop and iPhone, Android.

Once we deploy this plugin in Kendo, no longer working.

Please give some help with it.

General Discussions

answered on 14 Mar 2014

9 answers

800 views

[Solved] Declarative creation of Grid with data attribues (footerTemplate)

I have a Grid which works fine until I try to add an aggregate value and create a footer.

<div id="layerTable"

class="Part"

data-role="grid"

data-column-menu="true"

data-filterable="true"

data-sortable="true"

data-scrollable="false"

data-resizable="true"

data-reorderable="true"

data-groupable="true"

data-bind="source: LayerTable"

data-columns='[

"Class",

"Type",

"FileCount",

{field: "Size",

format: "{0:n3} MB"

},

{field: "Date",

format: "{0:F}" },

"Path"]'>

</div>

I have tried adding in the aggregate both in the dataSource (which is a JSON array:

manifest.Layers.aggregate =

[

{field: "Size", aggregate: "sum"},

{field: "FileCount", aggregate: "count"}

];

As well as in the HTML:

<div id="layerTable"

class="Part"

data-role="grid"

data-column-menu="true"

data-filterable="true"

data-sortable="true"

data-scrollable="false"

data-resizable="true"

data-reorderable="true"

data-groupable="true"

data-bind="source: LayerTable"

data-columns='[

"Class",

"Type",

"FileCount",

{field: "Size",

format: "{0:n3} MB",

aggregates: ["sum"],

footerTemplate: "Total: #: sum# "

},

{field: "Date",

format: "{0:F}" },

"Path"]'>

</div>

However, any combination I have tried (only footer, only HTML column aggregates, or only data-source aggregates is not working.

What happens? All the declared Kendo objects later on in the page (sliders, combo-boxes, etc.) all do not load at page reload time.

I am guessing that I am trying do something that is not supported. Right?

Grid

answered on 14 Mar 2014