Questions on Kendo UI for jQuery Forum

1 answer

483 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.2K+ 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

59 views

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

195 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

174 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

282 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

101 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

1 answer

69 views

How to draw the column chart in js code?I can draw them in web code

I have a json data {(sample1:3,5,6)},{sample2:4,7,8}},that means column A,B,C. I can easily draw that in this sameple like this:
.Series(series => {
series.Column(new double[] { 3 ,4}).Name("column A");
series.Column(new double[] { 5 ,7}).Name("column B");
series.Column(new double[] {6,8}).Name("column C");

})
.CategoryAxis(axis => axis
.Categories("Sample1", "Sample2")
.Line(line => line.Visible(false))
.Labels(labels => labels.Padding(145,0,0,0))
),How to write them in js code?

Charts

answered on 21 Aug 2013

4 answers

266 views

Losing dirty flag on edited items when I click Add new Item

I have a kendoui grid setup and doing inCell edits. I have a button at the top to 'Add a new item'. If I edit a couple of items they little red corners appear so I know they are dirty. If I then click the 'Add new item' button at the top of the grid, it removes the red flags from the edited items. This is misleading and causes the user to think the only record that is dirty is the record they inserted to the grid.

To reproduce:
Run the page attached.
Edit an item or 2 in the grid, but don't save.
They have little red flags in corners to show they are dirty.
Click Add new record button at top of grid.
The red flags disappeared from the dirty items.

How do I fix this?

I'm attaching files for the view and controller (using ASP.net MVC4).

Thank you in advance

Data Source

answered on 21 Aug 2013

5 answers

122 views

Image browser is not centered

Hi

I'm using the image browser for the kendo ui web editor. It works fine but it pops up so far down the screen that you have to scroll to see the buttons. Screenshots are attached.

I'm guessing the cause is that the window is centered before it has the full height.

Best regards,
Martin

Editor

answered on 20 Aug 2013