Questions on Kendo UI for jQuery Forum

2 answers

899 views

[Solved] Prevent Kendo grid data bind events when updating multiple model properties

Hi,
I'm updating multiple properties on a Kendo datasource row model (using model.set javascript), and I want the grid to update only after the last change is made. Another issue is that i don't know (without many if statements) whether any of the properties actually changed.
Regards,
Tom

Grid

answered on 18 Mar 2014

2 answers

206 views

Batch Grid Edit Cell when not in Editor Template

I'm using a batch grid with InCell editing and am wanting to know a way to set a particular column into edit mode.

I've tried using editCell, and so far it hasn't caused any of the cells to go into edit mode :(

In this particular case, we have a ClientTemplate column specified which has a button (really its a link...) in it. When the user clicks the button I would like a particular cell in that row to switch to edit mode. For reference here's what the specific column template looks like:
columns.Template(t => { }).HeaderTemplate("")
.ClientTemplate(@"
<a href='javascript: void(0)' class='abutton SecondaryActiveBtn' onclick='editVariableRate(this)' title='Edit'>Edit</a>")
.Width(100).Title("");

Here is the particular javascript method that gets called on the button click:
function editVariableRate(element) {
grid = $("#variableFee").data("kendoGrid");
var cell = $(element).closest("tr").find("td:eq(2)");
grid.editCell(cell);
}

Am I doing something wrong here because the particular column never goes into edit mode.

Grid

answered on 18 Mar 2014

4 answers

523 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

396 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

118 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

131 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

133 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

250 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

569 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

292 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