Questions on Kendo UI for jQuery Forum

1 answer

176 views

Hi,

I'm trying to run an application using WP8 layout, but it only shows a black screen with navigator bar bellow.
Texts and input fields are not visible (see screen attached).

IOS, IOS7 and Android runs like a charm, only WP doesn't.

I'm using these CSS and JS files:

<style type="text/css">

@import url(css/kendo.common.min.css);

@import url(css/kendo.default.min.css);

@import url(css/kendo.mobile.all.min.css);

</style>

<script src="js/jquery.min.js"></script>

<script src="js/kendo.all.min.js"></script>

Running this code at the end of HTML:

<script>

var app = new kendo.mobile.Application($(document.body), {platform:"wp"});

</script>

I'm using trial version of Kendo UI (2013.3.1119.trial).

The same happens with examples that came in ZIP file (kendoui.complete.2013.3.1119.trial.zip).

Thanks for help.

Reggards,
André L. Santos

General Discussions

answered on 06 Jan 2014

3 answers

501 views

Autocomplete dropdown does not show up

Hello,
Now an experience with AutoComplete control.
There is this control, which has minLength = 3, and keyup event hits server to get data that is searched for. Now if the desired lookup for data is say 39015 which gets records that has a column with this value (from DB), so what a strange thing I observe is, when i start typing each char i.e. 3..9..0.1..5 one by one - it hits the server each time - the problem is :
- If the typing is slow as in wait for each server call to get completed, it shows up the popup.
- If typing in is arbitary, like slow or fast or a mix, say 39 and then 015, it doesn't show up the popup.

Although, the data being fetched is correct for all the inputs. But issue comes up with showing up the popup.

I read it over in one the forum threads, to use SEARCH() method- so what i did is : call the search method in change event, checking if number of items returned are > 0.
It resolves the problem but but it arises another problem - I see in debugger that it calls the datasource read method until a selection from popup is made, which is a big bash to performance. Is there a way to control it or any other clean way to just open the popup once data is fetched.

ko.bindingHandlers.kendoAutoComplete.init = function (element, params) {
////debugger;
var e = $(element);
var widget = e.data("kendoAutoComplete");

widget.dataSource.bind("change", function (d) {
//anytime the data source is updated, update the data pointer and the input
if (d.items) {
data = new kendo.data.ObservableArray(d.items).toJSON();

//Sometimes the dropdown isn't rendered - force it to show up/ search from the populated datasource of the autocomplete
if (d.items.length > 0) {
widget.search(d.items[0].CompanyName);
}
}
});

AutoComplete

answered on 04 Jan 2014

0 answers

289 views

Error when trying to use kendo ddl inside listview edit template mvc

Hello,

Using the mvc extensions I have a grid with details row. In the details row I have a listview with editor template like this:

Grid:

@(Html.Kendo().Grid<PromotionModel>()

.Name("Promotions")

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(promotion => promotion.PromotionID);

model.Field(promotion => promotion.PromotionID).Editable(false);

model.Field(promotion => promotion.Clicks).Editable(false);

model.Field(promotion => promotion.Impressions).Editable(false);

model.Field(promotion => promotion.WebsiteID).DefaultValue(1);

})

.Read(read => read.Action("PromotionsRead", "Promotions", new { Area = "Administration" }))

.Create(create => create.Action("PromotionsCreate", "Promotions", new { Area = "Administration" }))

.Update(update => update.Action("PromotionsUpdate", "Promotions", new { Area = "Administration" }))

.Destroy(destroy => destroy.Action("PromotionsDestroy", "Promotions", new { Area = "Administration" }))

.Events(events => events.Error("OnError")) // Handle the "error" event

)

.ClientDetailTemplateId("details-template")

.Columns(columns =>

{

columns.Bound(x => x.PromotionID);

columns.Bound(x => x.Title);

columns.Bound(x => x.PromotionType);

columns.ForeignKey(x => x.WebsiteID, (System.Collections.IEnumerable)ViewData["Websites"], "WebsiteID", "Name");

columns.Bound(x => x.ProductCode);

columns.Bound(x => x.Clicks);

columns.Bound(x => x.Impressions);

columns.Bound(x => x.IsVisible);

columns.Command(commands =>

{

commands.Edit();

//commands.Destroy();

commands.Custom("Delete").Click("confirmDelete");

}).Title("Commands").Width(200);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.PopUp).DisplayDeleteConfirmation(false))

.Pageable()

.Events(e => e.Edit("OnEdit"))

.Sortable()

.Groupable()

.ColumnMenu()

.Filterable()

)

Grid details template:

<script id="details-template" type="text/x-kendo-template">

<div class="demo-section">

@(Html.Kendo().ListView<PromotionTranslationModel>()

.Name("ListView_#=PromotionID#")

.ClientTemplateId("translationTemplate")

.TagName("div")

.DataSource(ds => ds

.Model(m => m.Id("RecordID"))

.PageSize(3)

.Create(create => create.Action("PromotionTranslationsCreate", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))

.Read(read => read.Action("PromotionTranslationsRead", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))

.Update(update => update.Action("PromotionTranslationsUpdate", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))

.Destroy(destroy => destroy.Action("PromotionTranslationsDestroy", "PromotionTranslations", new { Area = "Administration", promotionID = "#=PromotionID#" }))

)

.Pageable()

.Editable(editable => editable.TemplateName("PromotionTranslationEditTemplate"))

.ToClientTemplate()

)

</div>

</script>

ListView template:

<script type="text/x-kendo-tmpl" id="translationTemplate">

<div class="product-view k-widget">

<div class="edit-buttons">

<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a>

<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span></a>

</div>

<dl>

<dt>Text</dt>

<dd>#:Text#</dd>

<dt>Image URL</dt>

<dd>#:ImageSource#</dd>

<dt>Language</dt>

<dd>#:LanguageID#</dd>

</dl>

</div>

</script>

ListView editor template:

@model BusinessObjects.Models.PromotionTranslationModel

@using Kendo.Mvc.UI;

<div class="translation-view">

<dl>

<dt>Text</dt>

<dd>

@(Html.EditorFor(p => p.Text))

<span data-for="Text" class="k-invalid-msg"></span>

</dd>

<dt>Image URL</dt>

<dd>

@(Html.EditorFor(p => p.ImageSource))

<span data-for="ImageSource" class="k-invalid-msg"></span>

</dd>

<dt>Language</dt>

<dd>

@*@(Html.EditorFor(p => p.LanguageID))*@

@(Html.Kendo().DropDownList()

.Name("color")

.DataTextField("Text")

.DataValueField("Value")

.BindTo(new List<SelectListItem>() {

new SelectListItem() {

Text = "Black",

Value = "1"

},

new SelectListItem() {

Text = "Orange",

Value = "2"

},

new SelectListItem() {

Text = "Grey",

Value = "3"

}

})

.Value("1")

)

<span data-for="LanguageID" class="k-invalid-msg"></span>

</dd>

</dl>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-update-button" href=""><span class="k-icon k-update"></span>Save</a>

<a class="k-button k-button-icontext k-cancel-button" href=""><span class="k-icon k-cancel"></span>Cancel</a>

</div>

In the ListView editor template when I try to add a kendo dropdown list I get a jquery error
"Uncaught SyntaxError: Unexpected token ILLEGAL "

However if I use the default editor "@(Html.EditorFor(p => p.LanguageID))" it does work fine. What can be the cause of that ?

ListView

asked on 04 Jan 2014

2 answers

56 views

is there a way to get rid of the circle around the noteText (stock chart)?

love the noteText on the stock chart
hate the circle

can i get rid of it

General Discussions

answered on 03 Jan 2014

2 answers

46 views

need help to get stock chart categoryAxis.labels.step=0 to work

hello
here is the code im using to call a stock chart
which works

$J($chartD).kendoStockChart({

dataSource: wData,

series: [{

type: "candlestick",

openField: "open",

closeField: "close",

highField: "high",

lowField: "low",

categoryField: "cat",

notes:{

line: {

width: 2,

length: 2

},

label: {

font: "10px arial"

}

},

tooltip:{

format: "{4}:<br /> {0:n0} -- {3:n0}"

}

}],

categoryAxis:{

categories: cats,

type: "category",

labels: {

font: "9px arial,sans-serif",

rotation: 45,

// step: 0,

skip: 0

}

},

valueAxis: {

labels: {

format: "N0"

}

});

as soon as i uncomment the categoryAxis.labels.step line
the chart just spins out and crashes my browser tab (chrome)

can you pls enlighten me on what im doing wrong?

thx so much

General Discussions

answered on 03 Jan 2014

3 answers

46 views

a couple of stock chart questions

hi
the first one might be easier so ill start with that
1) is there anyway to get rid of the navigator?
2) in my chart i should be having 10 bars
ie, i have an array with 10 data objects

here is my code:

console.log(wData);

$J($chartD).kendoStockChart({

dataSource: wData,

series: [{

type: "candlestick",

openField: "open",

highField: "high",

lowField: "low",

closeField: "close"

}],

categoryAxis:{

categories: cats,

type: "category"

},

valueAxis: {

labels: {

format: "N0"

}

});

i have attached a text file with what console.log(wData) is
also i have a attached a screen shot of the graph

as you can see
the chart is only rendering the last object and not even correctly
because the open should be "0"

also just fyi
here is what "cats" looks like in the js console (which is correct)
Array[9]
0: "2009"1: "Workforce Headcount"2: "Direct Hire"3: "Acquisition"4: "Voluntary Termination"5: "Involuntary Termination"6: "Layoff"7: "Net Mobility"8: "2010"

pls help
thanks so much

General Discussions

answered on 03 Jan 2014

3 answers

148 views

Twitter widget doesnt refresh

Hi there,

I have been working on an app that intergrates the twitter widget.
When i copy the source from the twitter config page and paste it in my view in the app.

it displays correctly in the simulator.

when i run it on my phone (android 4.2.2) the text loading tweets stays.
the text needed to be replaced when done loading.

i figgured out when i click on the "empty" view the tweets are there but i cant see them.
when i switch to an other tab and return to the twitter view it is showing correctly.

can someone help me?

tried it very long on different ways now.

General Discussions

answered on 03 Jan 2014

1 answer

160 views

Remote data source returns grouped data?

Consider the set of data below returned from a remote data source.

[

{

activityName: "Scheduled",

hourlyActivities: [

{

hour: 8,

activityCount: 5

},

{

hour: 12,

activityCount: 11

}

]

},

{

activityName: "Cancelled",

hourlyActivities: [

{

hour: 8,

activityCount: 1

},

{

hour: 12,

activityCount: 5

}

]

}

]

I'm trying to get a basic line chart that is grouped by activityName (displayed in legend), where the x axis is hour and the y axis is activityCount? Can I get an MVVM example on how to configure the chart and data source? I was able to achieve grouping when the data source was an array of simple objects (not grouped), but I don't know where to start when the data is grouped by the server.

Charts

answered on 03 Jan 2014

3 answers

2.0K+ views

How to change default validation message in kendo grid ?

I am using date column in grid while in-line edit if I enter invalid date ( like "ewr") then it showing default validation message "Filedname is not valid date". But Instead of default message I need to show custom message. How can I change the message?

Grid