Questions on Kendo UI for jQuery Forum

3 answers

284 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

423 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

458 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.4K+ 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

223 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

138 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

603 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

1 answer

140 views

Official Example of Alert / Confirm Using Kendo Window

Hello,

I was just looking over the Telerik blog post "How To Do JavaScript Alerts Without Being A Jerk". Is there a complete, updated, official example of a standard alert/confirm implementation that one can download?

Thank you,
Tony

General Discussions

answered on 17 Apr 2014

3 answers

98 views

How kendo modules loaded

Hi,

I want to know the design pattern used while building kendo, I saw 'kendo_module' with some interesting attributes (id, deps, features, ...), but I didn't see anything related to its behavior.

I'm asking because I want to organize our kendo components/modules in order to easily plug-and-play them.

Thanks

General Discussions

answered on 17 Apr 2014