Questions on Kendo UI for jQuery Forum

5 answers

421 views

Hello,

I would like to know what is the best strategy to dynamically generate (and delete) widgets in my app project. Notifications and different state changes are received via Ajax from a Python enabled server.

In a little sample (I'm just evaluating as for know) I tried this and seemed to work:

<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
//injecting a widget?
tmp=' <a data-role="button" href="#drawer-starred" data-badge="12">Notifications</a>';
$("#drawer-home").append(tmp);
//kendo.init($("#drawer-home"));
</script>

But I'm not very confident about it. I thought kendo.init would be required but apparently not so.
Thanks very much for any help!

Javier

General Discussions

answered on 06 Jan 2014

3 answers

682 views

Problems when ModelState is not valid

Hi

I have a simple MVC page for adding an article with a text box for the title and a Kendo editor for the content both bound to a model.

If I have validation rules on the title text box such as required field then when I post the form to the server it correctly shows an error message, however the text I wrote in the kendo ui editor is changed to show the html markup.

How do I ensure that what is displayed in the Kendo UI editor is as I wrote it (i.e. without the html markup) when the MVC Controller returns the model to the page if Model.IsValid == false

Many thanks in advance

Editor

answered on 06 Jan 2014

1 answer

98 views

Problem after using scheduler after switching tabs

Hi Fellas,
I am struggling with the Kendo UI scheduler. After I switch to the tab, I cannot normally go back without it changing the style

<div data-role="view" data-init="initScheduler" id="scheduler" data-title="Scheduler">

<header data-role="header">

<div data-role="navbar">

<a data-role="button" href="#home" data-icon="back" data-align="left" ></a>

<span data-role="view-title">iOS Platform</span>

<a data-role="button" data-rel="drawer" href="#right-drawer" data-icon="share" data-align="right" ></a>

</div>

</header>

<div id="scheduler"></div>

</div>

That's how I call the scheduler and the problem is demonstrated on this page http://chris1904.webege.com/
If you go to scheduler, you realize that if you go back the UI looks different. How can I prevent it from doing that?

Thanks for your help and this amazing framework,
Chris

Edit:
Sorry, I clearly posted this in the wrong section, but I cannot change it anymore. Please move it to the correct board

ActionSheet

answered on 06 Jan 2014

1 answer

157 views

Black screen in WP application

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

465 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

267 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

49 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

41 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

41 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

130 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