Questions on Kendo UI for jQuery Forum

3 answers

166 views

I believe I have found a bug in the router control, with the routeMissing callback. According to the documentation, you should be able to call e.preventDefault() to cancel the navigation and stay on the current route.

This works as expected if I have a link on a page that points to an invalid route (ex. "#/missing") - the route is cancelled and I stay on the current view. But if I type the missing route (#/missing) into the browser address bar, then it reverts back to the route prior to the current route.

I have created an example in JS Bin that demonstrates this behavior - http://jsbin.com/EXARiTiJ/26

Here are the steps to recreate the issue:

When the page loads, it will first navigate to the Home view
Click on "Orders" to navigate to the Orders view. This will navigate correctly and update the url appropriately.
Click "Missing" to navigate to a route that has not been defined. This will fire the routeMissing handler, which calls e.preventDefault() and reverts the url and the view back to "Orders"
However, if you manually update the url in the address bar to "#/missing", the routeMissing handler fires and you are sent back to the Home view, and the url still has the invalid route (#/missing)

I am using the Q1 2014 release of the controls and testing in IE 10. I do not see the issue when testing with Google Chrome (v. 33)

SPA

answered on 18 Apr 2014

1 answer

113 views

Dropdown menu in grid

Does anybody have an example of how to create a dropdown menu in a gridrow. Since i have limited space in the grid, i would like to create a dropdown menu for the available actions - i.e.

Edit
Delete
Pause

The dropdown should be visible also when not in edit mode and when a user selects an action in the drop down, it should fire a javascript function.

DropDownList

answered on 18 Apr 2014

3 answers

244 views

Can I use Drawer with only a PanelBar to drive it (no draws)

I'm just wondering with I'm on the right track with using the mobile Drawer.

I don't need what all the examples use - individual "draw" items in a "listview".
I have a PanelBar - already working from the non-mobile part of the site.

This is what I want:
I want the PanelBar to show.
Then, when an item in the PanelBar is clicked, to navigate to a full-page view of the URL that the PanelBar's datasource has for that item.
Then be able to slide back to the PanelBar - to repeat this process.

In the non-mobile site, I have a Splitter with the PanelBar on the left and URL showing area, on the right.
And I set the iframe src in the right-panel to the URL of the clicked PanelBar's datasource. And it works fine.

I was hoping (see below) I could do a similar thing, and somehow tell the "Drawer" to navigate to the iframe (or div) I've just filled with the clicked PanelBar item's URL.
Is this feasible within the way Drawer works, or is this so far from the way it's meant to work that I'd be better of hacking a "Draw" of my own?

<body>
<div id="app-drawer" data-role="view" data-layout="drawer-layout" data-title="@Model.name">
<div id="header" data-role="header">
<div id="app-icon"><img src="@Model.image" width="32" height="32" /></div>
<div id="header-text">@Model.name</div>
</div>
<div id="app-user-panel">

</div>
<div id="view-container" data-role="view">
<iframe id="view-frame"></iframe>
</div>
</div>

<script>
$(document).ready(function() {
var model = @Html.Raw(Model.ToJson());
var panel = new MyWorkingAppPanel('app-user-panel');
panel.init(model);

I toyed with this concept but couldn't work out what was required to get it working
// var drawer = $("#app-drawer").kendoMobileDrawer({
// container: "#view-container"
// });
//
// $("#app-drawer").data("kendoMobileDrawer").show();
// $(".k-link").click(function() {
// $("#app-user-panel").hide();
// $("#view-container").show();
// });

var app = new kendo.mobile.Application(document.body, {
skin: "flat",
hideAddressBar: true,
});
</script>
</body>

Drawer (Mobile)

answered on 18 Apr 2014

2 answers

397 views

MVC Kendo Grid with Server Side Pagination and Grouping

Question is Posted in -

http://www.telerik.com/forums/mvc-kendo-grid-with-server-side-pagination-and-grouping#jWLOwHobVUGG09menSdC4w

Grid

answered on 18 Apr 2014

1 answer

421 views

I cannot select a manual color through the input

I use the Kendo UI Web v2014.1.318.
I try with Firefox and Google Chrome.

I cannot select a manual color through the input.

When I open the color picker, the focus is done to an input before the color picker.
When I click in the color input, I cannot get the focus to enter the color.

01.<div class="silx-setting-settings-dialog ui-dialog-content ui-widget-content" id="ui-id-5" style="width: auto; min-height: 50px; max-height: none; height: auto;">

02. <div class="silx-row">

03. <label>!! Action label:</label>

04. <input type="text" class="silx-setting input settingLabel" value="Systematic Rejection">

05. </div>

06.

07. <script type="text/javascript">

08.

09. var as_Color = "#cccccc";

10.

11.

12. $(".settingBackgroundColor").kendoColorPicker({

13. value: as_Color,

14. buttons: false,

15. change: function(e) {

16. $(".previewSettingImage").css("backgroundColor", e.value);

17. },

18. select: function(e) {

19. $(".previewSettingImage").css("backgroundColor", e.value);

20. }

21. });

22. </script>

23. <div class="silx-row">

24. <label>!! Background color:</label>

25. <span role="textbox" aria-haspopup="true" class="k-widget k-colorpicker k-header" aria-disabled="false" tabindex="0" aria-label="Current selected color is #cccccc" aria-owns="6fb0d2e4-e256-4d54-9bb3-853eb40cdec6"><span class="k-picker-wrap k-state-default"><span class="k-selected-color" style="background-color: rgb(204, 204, 204);"></span><span class="k-select" unselectable="on"><span class="k-icon k-i-arrow-s" unselectable="on"></span></span></span><input class="silx-setting input settingBackgroundColor" data-role="colorpicker" style="display: none;"></span>

26. </div>

27.

28. <script type="text/javascript">

29. $(".settingImage").kendoComboBox({

30. dataTextField: "text",

31. dataValueField: "value",

32. template: '<span class="k-state-default"><img width="26" height="26" src="/Root/Global/plugins/silx-extendable-dashboard/img/silcActions/#:data.text#" alt="#:data.text#" /></span>',

33. dataSource:

34. [

35. { text: "Systematic Rejection.png", value: "Systematic Rejection.png" },

36. { text: "dashboard-exit.png", value: "dashboard-exit.png" },

37. { text: "logo-vertech.png", value: "logo-vertech.png" }

38. ],

39. change: function(e) {

40.

$(".previewSettingImage").css("background-image", "url(/Root/Global/plugins/silx-extendable-dashboard/img/silcActions/" + e.sender.input.val() + ")");

41. }

42. });

43.

44. var ao_KendoCombo = $("input.silx-setting.settingImage:hidden").data("kendoComboBox");

45. ao_KendoCombo.value("Systematic Rejection.png");

46.

47. $(".addImageFile").kendoButton(

48. {

49. click: function(e) {

50. UploadImageFile(e);

51. }

52. }

53. );

54. </script>

55. <div class="silx-row">

56. <label>!! Image:</label>

57. <span class="k-widget k-combobox k-header silx-setting input settingImage" style=""><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input class="k-input silx-setting input settingImage" type="text" autocomplete="off" maxlength="524288" role="combobox" aria-expanded="false" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="" aria-busy="false" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1">select</span></span></span><input class="silx-setting input settingImage" data-role="combobox" aria-disabled="false" aria-readonly="false" style="display: none;"></span>

58. <button type="button" class="addImageFile k-button" style="font-size:20px;line-height:20px;" data-role="button" role="button" aria-disabled="false" tabindex="0">...</button>

59. <div class="previewSettingImage silc-action-button" style=

"background-color: rgb(204, 204, 204); float: right; margin-right: 175px; margin-top: 0px; background-image: url(http://192.168.1.185:8080/Root/Global/plugins/silx-extendable-dashboard/img/silcActions/dashboard-exit.png);"

></div>

60. </div>

61.

62. <div class="silx-row">

63. <label>!! Order:</label>

64. <input type="text" class="silx-setting input settingOrder" value="1">

65. </div>

66.

67. <div class="silx-settings">

68. <button class="silx-settings-cancel">Annuler</button>

69. <button class="silx-settings-ok">Ok</button>

70. </div></div>

Regards,
Michaël Gauthier

ColorPicker

answered on 18 Apr 2014

4 answers

1.3K+ views

No change event on .select

DropDownList

answered on 17 Apr 2014

4 answers

1.4K+ views

Add new record when using custom form

I have a grid with the "Add new record" button in the toolbar, which is created via the toolbar: ["create"] configuration, and I am using a custom form on the page for adding and editing records from the grid.

How can I wireup the event handled for the "Add new record" button so that it establishes a new row in my datasource?

And (I'm using a view model), how can I get that new row to set it in the view model used by the form?

I tried the following in the grid configuration:

edit: function (e) {

if (e.model.isNew()) {

var model = this.dataSource.reader.model();

this.dataSource.add(model);

viewModel.set("selected", model);

}

However, the edit event doesn't seem to be getting fired when I click the "Add new record" in the grid toolbar.

Thank you for your assistance.

Gary

Grid

answered on 17 Apr 2014

9 answers

191 views

Label Clipping Q1 2014

Having an issue with labels being clipped when they are beyond the chart but still within the plot area. I've attached two screenshots of the same data and options for the chart in Q3 2013 compared to Q1 2014.

Some browsers clip the labels when they go beyond the boundaries of the chart canvas, which I guess is understood. In Q3 2013, I would simply add padding using chartArea.margin so that the labels would always be within the boundary of the canvas and they wouldn't be clipped in some browsers.

It looks like this isn't working anymore, and the labels are being clipped even if you have plenty of margin space above your chart. Is there any way I could prevent my labels from being clipped in some browsers with Q1 2014? I have this happening on quite a few of the charts in my system, it seems to be a really common issue any time I use labels.

Charts

answered on 17 Apr 2014

1 answer

115 views

Bug When rebuilding a ListView with headers.

Hello,

I am trying to re build a list view and I'm facing a situation I cannot solve:

I first build a list view with headers:

var template = Handlebars.compile( $( '#eventListTemplate' ).html() );

// detach events

var listView = $("#list-container").data("kendoMobileListView");

if ( typeof listView !== typeof undefined ) { listView.destroy(); };

$("#list-container").empty();

$("#list-container").kendoMobileListView({

template : template,

dataSource: kendo.data.DataSource.create( { data:results, group:"start" } ),

fixedHeaders: true

});

Then when a user click on some button, it should repopulate the list view without headers this time (the data structure is completely different as well as the template):

$("#list-container").data("kendoMobileListView").destroy();

$("#list-container").empty();

var template = Handlebars.compile( $( '#userListTemplate' ).html() );

$("#list-container").kendoMobileListView({

template : template,

dataSource: kendo.data.DataSource.create( results ),

fixedHeaders: false

});

Unfortunately, the list view is repopulated with the headers and the whole thing crash as nothing is displayed (I've checked in the code source, it is appended though, but nothing is displayed) its just like if when calling the destroy method the widget wasn't completely destroyed. Why is this happening ?

Thank you very much for your help as for now I have to drop out the headers

ListView (Mobile)

answered on 17 Apr 2014

6 answers

540 views

Change AutoComplete's DataTextField at run-time

I created this fiddle to demontrate what I want to do, which is change the dataTextField (the one searched by the autocomplete widget) at run-time from one property to another:

http://jsfiddle.net/jtower/uSLND/

Any suggestions?

- J. Tower, Falafel Software

AutoComplete

answered on 17 Apr 2014