or
4 answers
139 views
Hi all,
I have a view model with 2 array properties: "prices" and "pricesForStudents" (objects inside arrays are of the same structure):
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:
But since I have 2 arrays I need to repeat the same functions for the second array:
Both tables share the same template to display data:
The only detail here is that "Remove" button must be bound to different properties for the second table, so I repeated the template:
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.
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.
Petyo
Telerik team
answered
on
09 Jan 2015
1 answer
132 views
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
?
Item 3
Item 2
Item 1
Item 1.3
Item 1.2
Item 1.1
?
Alexander Popov
Telerik team
answered
on
09 Jan 2015
4 answers
536 views
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?
Dimiter Madjarov
Telerik team
answered
on
09 Jan 2015
5 answers
181 views
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.
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.
XiMnet Malaysia
Top achievements
Rank 1
Rank 1
answered
on
09 Jan 2015
23 answers
1.0K+ views
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
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
1 answer
52 views
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?
Iliana Dyankova
Telerik team
answered
on
08 Jan 2015
1 answer
273 views
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?
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?
Petur Subev
Telerik team
answered
on
08 Jan 2015
1 answer
292 views
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?
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?
Kiril Nikolov
Telerik team
answered
on
08 Jan 2015
3 answers
99 views
Yey, just lost my bugreport... So once again
Hi there
I'm using the multiselect inside a form to allow the selection of persons. Where talking about 300 - 400 entries. In some cases it is needed, that all persons can be selected. So I added a Function which gets all dataSource entries and sets them as value.
Unfortunately this takes "ages" (about 2-3 sec) and on some workstations even leads to a script timeout. Running Firebug profile, I found out that this is caused by the _select() method of the multiselect widget. In particular by the "that._height(that._visibleItems);" which is, caused by the array loop, called for every data item. If I move this line to the value() method and insert it after the select loop, consumed time drops almost by half.
I don't see why the height needs to be calculated on every data item. I couldn't detect any side effects yet, but maybe there are. Still I would suggest to move the height calculation from the _select() method.
Hi there
I'm using the multiselect inside a form to allow the selection of persons. Where talking about 300 - 400 entries. In some cases it is needed, that all persons can be selected. So I added a Function which gets all dataSource entries and sets them as value.
Unfortunately this takes "ages" (about 2-3 sec) and on some workstations even leads to a script timeout. Running Firebug profile, I found out that this is caused by the _select() method of the multiselect widget. In particular by the "that._height(that._visibleItems);" which is, caused by the array loop, called for every data item. If I move this line to the value() method and insert it after the select loop, consumed time drops almost by half.
I don't see why the height needs to be calculated on every data item. I couldn't detect any side effects yet, but maybe there are. Still I would suggest to move the height calculation from the _select() method.
Kiril Nikolov
Telerik team
answered
on
08 Jan 2015
1 answer
568 views
Hi,
I've been using the Kendo Notification and I swear it automatically re-sizes the notification to fit the message or content. But suddenly that behavior just stopped. I'm not sure what I did wrong. Here's the some code snippet and a screenshot:
<span id="useAIbleGlobalNotification"></span>
<script type="text/javascript">
var useAIbleNotification;
$(document).ready(function(){
useAIbleNotification = $("#useAIbleGlobalNotification").kendoNotification(
{
position: {
top: null,
bottom: 20,
left: 20,
right: null,
}
}).data("kendoNotification");
}
</script>
I call it like these:
useAIbleNotification.show("my message", "success");
As you can see I purposely positioned it to the lower left corner so that I won't worry about the content being too long. But now the notification is no longer re-sizing to fit the content. I tried manually putting a width but it doesn't re-size and just stays the same every time. What am I doing wrong?
Thank You
I've been using the Kendo Notification and I swear it automatically re-sizes the notification to fit the message or content. But suddenly that behavior just stopped. I'm not sure what I did wrong. Here's the some code snippet and a screenshot:
<span id="useAIbleGlobalNotification"></span>
<script type="text/javascript">
var useAIbleNotification;
$(document).ready(function(){
useAIbleNotification = $("#useAIbleGlobalNotification").kendoNotification(
{
position: {
top: null,
bottom: 20,
left: 20,
right: null,
}
}).data("kendoNotification");
}
</script>
I call it like these:
useAIbleNotification.show("my message", "success");
As you can see I purposely positioned it to the lower left corner so that I won't worry about the content being too long. But now the notification is no longer re-sizing to fit the content. I tried manually putting a width but it doesn't re-size and just stays the same every time. What am I doing wrong?
Thank You
Dimo
Telerik team
answered
on
08 Jan 2015
