Questions on Kendo UI for jQuery Forum

1 answer

99 views

Grid sometimes fails to update when using mouse/update button

I've created an example that reproduces the issue some of the time. This issue does not occur all the time but seems to be related to using the mouse button and update button. Hitting enter to save seems to always work. At first I thought it was my code (validation, etc) but I've narrowed it down to a simple example that still is an example of the issue.

I've previously had hacks in place to have custom buttons that call $(document.activeElement).blur() before calling a grid update method but even that was problematic.

Dojo example: http://dojo.telerik.com/oWoBu
Screencast showing the issue: http://screencast.com/t/lsmHjMqc

In the screencast the first two attempts succeed but the third attempt shows how the data isn't saved.

Grid

answered on 09 Jan 2015

1 answer

83 views

Problem with validating number type filed

Hi,

I am having issues with number type field validation.
The fields have a default value of 0, and they are required, but Kendo still shows an error message when the field is not empty.

This is my number field:

<input type="number" id="someid" name="somename" value="0" min="0" max="100" required="required" validationMessage="This is a required field">

This is my js:

$(document).ready(function(){

$("form").kendoValidator({

rules: {

radio: function(input){

if (input.filter("[type=radio]") && input.attr("required")) {

return $(".edit_filling").find("[data-qs=" + input.attr("data-qs") + "]").is(":checked");

}

return true;

}

},

messages: {

radio: "This field is required"

}

});

Ideally this should be valid even if the user doesn't touch it. Of course if he deletes the 0, or inputs a higher value than 100 then the error message should be displayed.

Please help me with this issue.

Best Wishes,
Matt

Validation

answered on 09 Jan 2015

4 answers

143 views

Refactoring ViewModel with multiple collection properties

Hi all,
I have a view model with 2 array properties: "prices" and "pricesForStudents" (objects inside arrays are of the same structure):

var

model = kendo.observable({<br>  prices: [<br>            { hours: 24, firstYear: 7500, advanced: 8200 }, { ... }<br>        ],<br>        pricesForStudents: [<br>            { hours: 24, firstYear: 6000, advanced: 6300 }, { ... }<br>        ],<br><br>        ... other properties<br>});

I bind these 2 properties to 2 tables using templates, and I also have "Add" and "Remove" buttons.
I need to ensure each table has at least one row (each array has at least one element), so "Remove" button gets disabled, if the appropriate table contains only one row.
So, I introduced the following 3 methods in the ViewModel:

addPrice: function() {<br> this.get("prices").push({});<br>},<br>removePrice: function(e) {<br> this.get("prices").remove(e.data);<br>}<br>removePriceButtonEnabled: function() {<br> return this.get("prices").length > 1;<br>}

But since I have 2 arrays I need to repeat the same functions for the second array:

addPriceForStudents: function() {<br> this.get("pricesForStudents").push({});<br>},<br>removePriceForStudents: function(e) {<br> this.get("pricesForStudents").remove(e.data);<br>}<br>removePriceForStudentsButtonEnabled: function() {<br> return this.get("pricesForStudents").length > 1;<br>}

Both tables share the same template to display data:

<script id="regularPricing" type="text/x-kendo-template"><br> <tr><br> <td><input type="number" class="numerid-box single-line" data-bind="value: hours" data-role="numerictextbox" data-format="n0" /></td><br> <td><input type="number" class="numerid-box single-line" data-bind="value: firstYear" data-role="numerictextbox" data-decimals="2" /></td><br> <td><input type="number" class="numerid-box single-line" data-bind="value: advanced" data-role="numerictextbox" data-decimals="2" /></td><br> <td><button data-bind="enabled: removePriceButtonEnabled, click: removePrice" data-role="button">Remove</button></td><br> </tr><br></script>

The only detail here is that "Remove" button must be bound to different properties for the second table, so I repeated the template:

<script id="regularPricing" type="text/x-kendo-template"><br> <tr><br> <td><input type="number" class="numerid-box single-line" data-bind="value: hours" data-role="numerictextbox" data-format="n0" /></td><br> <td><input type="number" class="numerid-box single-line" data-bind="value: firstYear" data-role="numerictextbox" data-decimals="2" /></td><br> <td><input type="number" class="numerid-box single-line" data-bind="value: advanced" data-role="numerictextbox" data-decimals="2" /></td><br> <td><button data-bind="enabled: removePriceForStudentsButtonEnabled, click: removePriceForStudents" data-role="button">Remove</button></td><br> </tr><br></script>

It works, but there's a lot of repeating code (and even templates).
Later I will probably have 3 arrays insted of 2 now.
Since Kendo does not allow javascript in data-bind attributes (like knockout js), seems like I have to define a separate property or method in the view model for each case, even if it is logically repeating another property/method.
Can it be refactored somehow?

Thanks.

MVVM

answered on 09 Jan 2015

1 answer

135 views

Sort children as well

In this example, sort only works on the top hierarchy. Is it possible to sort the children too, such that after clicking "sort descending", you end up with

Item 3
Item 2
Item 1
Item 1.3
Item 1.2
Item 1.1

?

TreeView

answered on 09 Jan 2015

4 answers

542 views

Manually Cancel Upload

I'm using two upload controls for a multi file upload page. If the browser isn't HTML5 compatible it changes to a flash uploader. I wanted to create a consistent feel so I made my own custom progress area that looks the same for both. I'm wondering if I can manually throw the cancel event for a file in progress. Is there javascript I can call to cancel a file or do I have to use the built in file list area?

Upload

answered on 09 Jan 2015

5 answers

187 views

[Solved] ListView issue with detail view

Hi,

In this URL, I have a Listview with its detail view.
http://telerik.ximnet.com.my/kendo_test/#views/sample_listview.html

When I click an item, it can show the message in the detail view.
However, when I click Cancel and click on another item again, it will shows error as demonstrated here:
http://upload.ximnet.com.my/huisheng/list_view_details.swf

What could be the issue?

Thanks.

ListView (Mobile)

answered on 09 Jan 2015

23 answers

1.0K+ views

[Solved] Check multiple checkboxes at once

Hi,

Is there a way to check multiple checkboxes at once through the TreeView API? I have a TreeView with a large number of nodes (up to ~10,000) and a requirement to be able to save/reload checkbox selections. At the moment to reload them I'm clicking each of the required checkboxes via javascript, but that fires off the events to re-evaluate the checked/indeterminate/unchecked states of all parent nodes for each checkbox, which is extremely time-consuming.

Ideally I'd like to be able to pass the TreeView a list of checkboxes to check and have them all done in one go, but any pointers on how to make this more efficient would be gratefully received.

Many thanks,
Chris

ToolTip

answered on 09 Jan 2015

1 answer

52 views

Tooltip Render - moved to BODY

I'm having difficulty with the tooltip position with the latest build. Before I could use a work around with CSS and alter the position (http://www.telerik.com/forums/position-tooltip). Now, this workaround doesn't seem to have an effect as the tooltip seems to be positioned absolutely in the body. Has the rendering of chart tooltips been changed, and how do I now position this as CSS doesn't seem to have an effect?

Charts

answered on 08 Jan 2015

1 answer

282 views

Batch editing in hierarchy grid with local data

Hi,

I'm having a hard time getting the grid to persist "dirty" state when setting up a hierarchy configuration. Take a look at the following fiddle: http://jsfiddle.net/amberite/4zx0yhdf/

Edit "Master row 2", and you will see the red triangle indicating that the row has been changed. Then, expand "Master row 1" and edit the child item "Child row 2". Finally, edit "Master row 1".

You will notice that if you follow these steps, there will be a red triangle on "Master row 1", then an additional red triangle on "Child row 2", but when the final edit happens on "Master row 1", the child grid loses its red triangles.

Why is this happening, and how can I persist the grid's dirty state?

Grid

answered on 08 Jan 2015

1 answer

299 views

Update badge number in navBar from remote view

I have layout, remove view.

The remove view has a button, when I tap on this button, I need 1 count to be added in the layout's navbar's button's badge. how do I achieve that?

NavBar

answered on 08 Jan 2015