Questions on Kendo UI for jQuery Forum

4 answers

511 views

[Solved] How can I get CSS Cursor to work for Chart series.

I've currently got a CSS rule for a KendoUI Chart (that is defined in a razor view):

/* use :not(:last-child) to ignore legend */
#idOfMyChart g:not(:last-child) path
{
    cursor: pointer;
}

This sets the cursor rule for the right svg elements in the chart. However, hovering over the series seems to redraw the chart (to display the tooltip) and stops the cursor from displaying as per the css rule.

Is there a way to get these svg elements to display the cursor as a pointer?

Related StackOverflow question: http://stackoverflow.com/questions/12283889/does-setting-the-cursor-for-kendo-ui-chart-series-via-css-work

Charts

answered on 17 Mar 2014

4 answers

392 views

[Solved] Dynamic PanelBar

Hi,
I've got a simple panel bar code at: http://plnkr.co/edit/cJsESYQY5Dz4voQcudud?p=preview
In this code, you can see a panelbar that's limited in size (imagine it has a context) and the panelbar item is much larger.
What I want to happen is the following:
1) Panels won't be able to open more than the UL height.
2) Spread the panels in various heights - so the first would be 75% and the second would be 25%.
I tried doing it with jquery - changing the heights dynamically - but things got much more comlicated when I had a grid inside one of the panels...
Is there a smart way to do this?

PanelBar

answered on 17 Mar 2014

2 answers

114 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

123 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

128 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

244 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

560 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

288 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

225 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

167 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