Questions on Kendo UI for jQuery Forum

2 answers

811 views

[Solved] Keyboard pushes footer up on Android?

There is a behavior when using Android 4.0.4 - Samsung Galaxy Note (Possibly others) where the keyboard is displayed underneath the application footer. So essentially it is pushing the footer up and thus hiding the application instead of overlaying the application like iOS or even a normal website.

Does anyone know what is causing this or have any idea of how to fix it?

Robert

General Discussions

answered on 21 Aug 2013

3 answers

373 views

How to disable mobile button (suggestion)

In my project I need some buttons to disable. Many posts here and my support tickets telling that for the moment buttons cannot be disabled. I have a suggestion, because I think it is very simple.

If you make a button like <button>, it has attribute "disabled" and if this attribute is set click does not appear.
Second, for disabled buttons add some styling, and buttons are disabled:

.km-ios .km-button[disabled]{

color:#ccc;

cursor:default;

}

.km-ios .km-button[disabled]:active{

color:#ccc;

background-color:#7185A2;

box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);

-webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);

cursor:default;

}

<button type="button" data-role="button" disabled="disabled">My button</button

Button (Mobile)

answered on 21 Aug 2013

3 answers

346 views

Scroll and Button Disable issue

I am facing two issues with respect to scroll and button disable. Kendo UI Mobile version used is kendoui.mobile.2013.1.514.commercial
I have attached the sample project which has the issue.
Please find below the issue details

Issue 1 - This issue is occurring in iOS 6 Safari browser.
I am trying to add a scroll to the screen so that user is able to enter the values to textbox fields in both Portrait and landscape mode.
Fields are moving outside the screen when trying to scroll.
Steps to reproduce the issue:
1. Try to scroll the screen by selecting the space next to Unit button.
2. Entire screen gets scrolled and fields moves outside the screen.

Issue 2 - This issue is occurring in iOS 6 Safari browser
I am trying to disable the button dynamically using jQuery but the button is not getting disabled and i am able to click the button.
Steps to reproduce the issue:
1. Click on "Unit" button next to Unit label
2. Alert appears

Any help provided is appreciated.

General Discussions

answered on 21 Aug 2013

1 answer

529 views

Eclipse IDE Setup for Code Completion & Checking

I am looking at Kendo UI and am using Eclipse w/ the Aptana module, I'd like to evaluate Kendo UI.

How do i configure Eclipse with Kendo UI to get the best dev environment, code complete, etc?

What I mean is, I've got the downloaded Kendo UI files, I use Eclipse, how do I get Eclipse to play best with Kendo UI?

Thanks in advance!

General Discussions

answered on 21 Aug 2013

1 answer

1.3K+ views

Purpose of .k-Content .k-group and another styles?

Could someone please explain the purpose of .k-content .k-group and other styles that are listed in the kendo documentation? I apply them to my div's and content within the div, yet i see no styling change at all! What am i missing here?

General Discussions

answered on 21 Aug 2013

2 answers

82 views

[Solved] Cannot zoom charts on windows phone

Hi

Please navigate to any kendoui chart with Windows Phone (IE browser) e.g.
http://demos.kendoui.com/dataviz/bar-charts/date-axis.html
The browser native zoom that work on any other parts of the page doesn't work on the chart area.

Just checked that it's not caused by combination of wp/svg as here zoom works:
https://developer.mozilla.org/samples/svg/swarm-of-motes.xhtml
Furthermore- other types of dataviz widgets (e.g. radial gauge) don't have this problem.
Thanks.

Raido

Charts

answered on 21 Aug 2013

1 answer

223 views

Request: "Tag-input"-plugin

Hello

I would like to request a plugin that is similar to the one used for tags at stackoverflow.com. The ability in an textbox to enter, for example, a list of emailaddresses, or domainnames, and they create a tag after you press space after it. The multiselect, as I can see, doesnt allow to enter "new items" that doesnt exists in list.

Or is there some way to modify the multiselect so it can add new tags?

General Discussions

answered on 21 Aug 2013

1 answer

219 views

Using the Validation with qTip2

I was wondering if it would be possible to use qTip2 to display the tooltips from the validation, instead of the default ones. I have spent several days trying to do this, with little success.

http://qtip2.com/api

With the jQuery Unobtrusive Validation, I can achieve this with the following edits to the code;

function onError(error, inputElement) { // 'this' is the form element

var container = $(this).find("[data-valmsg-for='" + escapeAttributeValue(inputElement[0].name) + "']"),

replaceAttrValue = container.attr("data-valmsg-replace"),

replace = replaceAttrValue ? $.parseJSON(replaceAttrValue) !== false : null;

//replace = $.parseJSON(container.attr("data-valmsg-replace")) !== undefined;

container.removeClass("field-validation-valid").addClass("field-validation-error");

error.data("unobtrusiveContainer", container);

if (replace) {

container.empty();

error.removeClass("input-validation-error").appendTo(container);

}

else {

error.hide();

}

var element = inputElement;

// Set positioning based on the elements position in the form

var elem = $(element),

//corners = ['left center', 'right center'],

corners = ['bottom left', 'top center'],

flipIt = elem.parents('span.right').length > 0;

// Check we have a valid error message

if (!error.is(':empty')) {

// Apply the tooltip only if it isn't valid

elem.filter(':not(.valid)').qtip({

overwrite: false,

content: error,

position: {

my: corners[flipIt ? 0 : 1],

at: corners[flipIt ? 1 : 0],

viewport: $(window)

},

show: {

event: false,

ready: true

},

hide: false,

style: {

classes: 'qtip-red' // Make it red... the classic error colour!

}

})

// If we have a tooltip on this element already, just update its content

.qtip('option', 'content.text', error);

}

// If the error is empty, remove the qTip

else { elem.qtip('destroy'); }

}

But I am having a difficult time figuring out how to replicate this behavior with Kendo UI.

Validation

answered on 21 Aug 2013

1 answer

324 views

Dynamically building an autocomplete using an ASMX webservice datasource

I am creating input controls dynamically and using an ASMX web service as its datasource. The example snippets in the doumentation and most forum posts assume that you already know the ID of the <input> when creating the .kendoautocomplete for example:

01.$('#txtReceiptee').kendoAutoComplete({

02. filter: "startswith",

03. dataTextField: "Name",

04. dataSource: new kendo.data.DataSource({

05. type: "json",

06. transport: {

07. read: {

08. type: "POST",

09. url: "AJAXReceiptee.asmx/GetReceipteeNames",

10. contentType: 'application/json; charset=utf-8',

11. datatype: "json",

12. data: function ()

13. {

14. return {

15. context: $("#txtReceiptee").data("kendoAutoComplete").value().replace(/\ /g, '%')

16. }

17. }

18.

19. },

20. parameterMap: function (options)

21. {

22. return JSON.stringify(options);

23. }

24. },

25. serverFiltering: true,

26. serverSorting: true,

27. pageSize: 10,

28. schema: {

29. data: "d"

30. } // schema

31. })

32.

33. });

This works just fine because on line 15 I can extract the value of the input field from the known id: #txtReceiptee. However if I create an element dynmaically and want to use the same datasource setup as above, I cannot seem to find a way to direct the data function to reference its 'owned' input:

01.$('<input>').kendoAutoComplete({

02. filter: "startswith",

03. dataTextField: "Name",

04. dataSource: new kendo.data.DataSource({

05. type: "json",

06. transport: {

07. read: {

08. type: "POST",

09. url: "AJAXReceiptee.asmx/GetReceipteeNames",

10. contentType: 'application/json; charset=utf-8',

11. datatype: "json",

12. data: function ()

13. {

14. return {

15. context: $(" ?????? ").data("kendoAutoComplete").value().replace(/\ /g, '%')

16. }

17. }

18.

19. },

20. parameterMap: function (options)

21. {

22. return JSON.stringify(options);

23. }

24. },

25. serverFiltering: true,

26. serverSorting: true,

27. pageSize: 10,

28. schema: {

29. data: "d"

30. } // schema

31. })

32.

33. });

This new <'input'> element is in a grid so I will be having multiples of this created dynamically

AutoComplete

answered on 21 Aug 2013

1 answer

125 views

where is OnCommand for grid?

The previous telerik mvc extensions has the ability for custom commands and an OnCommand event to perform custom logic.

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html#OnCommand

With the new version how can i accomplish similar functionality?

Today i tried to attach to OnEdit,k-on-edit, but since it's late in the pipeline i end up with flicker (pop up editor with grid) or a javascript error when using ( mode: inline).

Grid

answered on 21 Aug 2013