Questions on Kendo UI for jQuery Forum

0 answers

163 views

kendo.dataSource throws warning in Karma/Jasmine tests

So i'm wondering if anyone has been able to "sucessfully" implement karma tests using kendos built in $http.get; the kendo.dataSource. During testing I receive this warning

WARN [web-server]: 404: ...

I've attached a screenshot

It's basically the transport.read trying to get the data for the chart. I've tried to use $httpBackend to resolve this request but I still get the warning. While it's not failing any tests it's really annoying to see.

Here is the plunkr

Charts

asked on 29 Apr 2014

3 answers

297 views

[Solved] First editable cell doesn’t enter in edit mode when adding rows to kendo grid with frozen

Hi Kendo team:

When I add a row to a grid with frozen columns, neither the
first editable cell enters in edit mode nor the vertical scroll changes to put the
new row in sight.

I’ve attached an example. Click the add button and you will
not see the new row. You have to scroll down and you’ll see that any cell is in
edit mode.

Kind Regards,

Oscar.

Grid

answered on 29 Apr 2014

1 answer

211 views

How to change the series icon shape in Kendo UI linechart?Can I use custom icon?

I know the default icon is "circle",now I want to change the icon shape.The total icon shape are only "circle", "square", "triangle", "cross".Can Iuse custome icon?I use these codes in the databound event,but it seems not work.

var colorArr = new Array("#FF0000", "#FF8C00", "#006400", "#40E0D0", "#800080");

var iconShapeArr = newArray("circle", "square", "triangle", "cross");

function onDataBound(e) {

var chart = e.sender;

var series = chart.options.series;

for(var index = 0; index <= series.length - 1; index++) {

chart.options.series[index].color = colorArr[index];

chart.options.series[index].markers.background = colorArr[index];

// chart.options.series[index].notes.icon.shape = "square";

}

Charts

answered on 29 Apr 2014

1 answer

390 views

[Solved] Read datasource - Post array of strings to Web API

Hello

I am trying to accomplish following, get appointments of a user through POST request as I need to post other calendar ids to get appointments of other users as well. The POST request is sent to a Web API. The endpoint gets hit but the array of calendarIds is always empty.

This is the datasource definition:

dataSource: new kendo.data.SchedulerDataSource({
batch: true,
transport: {
read: {
url: "/api/MyCalendar/GetAppointments",
dataType: "json",
type: "POST"
},
parameterMap: function(data, type) {
if (type === "read") {
return JSON.stringify(data);
}
}
}

This is the Web API implementation:

[HttpPost]
public HttpResponseMessage GetAppointments(string[] calendarIds)
{

// calendarIds is always empty

This the request posted content (textView) from fiddler:{"calendarIds":["1c78e75f-9516-42cf-a439-271ee997abf1"]}

I am not sure what is wrong in here, thanks for any help on this.

Scheduler

answered on 29 Apr 2014

1 answer

75 views

Strange Kendo UI Mobile and RequireJS-Issue

Hi Telerik-Team

I have a very strange issue:
According to your documentation, it's not possible to use the kendo.mobile.min directly with requireJS, which kind of makes sense (and I don't really care because including full featured libs with TypeScript + AMD is a pain anyway).

So what I do is simply load the file normally through the script-tag.
I then can initialize the App from within my modules, use the data- paramters to define behaviours, etc..
Everything works like a charm.

My current view features a lot of widgets, like buttons and scrollview which is kind of my "proove".

But here is the strange thing: when I use requireJS, Touch seams to be the only thing which is not working:
No matter if I declare them with the data-attribute, or through $(element).kendoTouch.

Now, according to your documentation, the "namespace" of the Touch-Widget is kendo.ui.Touch.
That object exists. And I can initialize my touch-behaviour with a new instance of it and that works without any problem.

As soon as I remove requireJS, I can use the touch-widget normally again.
I'm really wondering what could break the Touch-Widget, and as far as I can tell, only the Touch-Widget...

Thanks!

General Discussions

answered on 29 Apr 2014

2 answers

304 views

[Solved] Listview always trigger Create event

I have a Listview with two templates, one for show the rows info and another for edit mode. My problem is: every time i click in update or delete always triggers the create event and with cancel delete the row... What I'm doing wrong?

this code is in my view

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

<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>Nominee:</dt>

<dd>#:NomineeName#</dd>

</dl>

<input type="hidden" name="NomineeTitle" value="#:NomineeTitle#" />

<input type="hidden" name="NomineeDeptId" value="#:NomineeDeptId#" />

<input type="hidden" name="NomineeId" value="#:NomineeId#" />

</div>

</script>

<div class="NomineeRight">

<a id="addNominee" title="Add Nominee to the list"><img src=@Url.Content("~/img/rnr_add_item.png") alt="Add nominee" /><strong> Add Nominee</strong></a>

@(Html.Kendo().ListView<X.Models.NomineeInfo>()

.Name("NomineeList")

.TagName("div")

.ClientTemplateId("listViewTmpl")

.Editable(edit => edit.TemplateName("NomineeEditTmpl"))

.Events(ev =>

{

ev.Save("checkData");

ev.Cancel("cancelEdit");

ev.Remove("removeElem");

})

.DataSource(dataSource =>

{

dataSource.Events(ev => ev.Sync("listviewSync"));

dataSource.Model(m => m.Id("NomineeId"));

dataSource.Create(create => create.Action("NomineeListViewCreate", "Nominate"));

dataSource.Read(read => read.Action("NomineeListViewRead", "Nominate"));

dataSource.Update(update => update.Action("NomineeListViewUpdate", "Nominate"));

dataSource.Destroy(destroy => destroy.Action("NomineeListViewDestroy", "Nominate"));

})

)

</div>

this is my edit template

@model X.Models.NomineeInfo

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

<div class="edit-buttons">

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

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

</div>

<dl>

<dt>Employee</dt>

<dd>

<input type="text" class="k-textbox" data-bind="value:NomineeName" name="NomineeName" style="width:150px"/>

</dd>

<dt>Job Title</dt>

<dd>

<input type="text" class="k-textbox" data-bind="value:NomineeTitle" name="NomineeTitle" style="width:150px" />

</dd>

<dt>Department</dt>

<dd>

@(Html.Kendo().DropDownList()

.Name("NomineeDeptId")

.SelectedIndex(@Model.NomineeDeptId)

.HtmlAttributes(new { style = "width:150px" })

.DataTextField("DeptName")

.DataValueField("DeptID")

.OptionLabel("Select a Dept")

.DataSource(ds => ds

.Read(

read => read.Action("GetDepartments", "Utility")

)

</dd>

</dl>

</div>

js

// validate the information before save

function checkData(elem)

{

if (elem.model.NomineeName === "")

{

elem.preventDefault();

createNotification("Please enter a valid Nominated Name.", "error");

}

else if (elem.model.NomineeDeptId === 0)

{

elem.preventDefault();

createNotification("Please enter a valid Department.", "error");

}

// cancel the listview edit mode

function cancelEdit(elem)

{

//var listView = $("#NomineeList").data("kendoListView");

//listView.cancel();

elem.preventDefault();

listView.dataSource.read();

}

function removeElem(elem)

{

//var listView = $("#NomineeList").data("kendoListView");

console.log("remove");

console.log(elem);

}

// send the listview to read from server every time it sync

function listviewSync()

{

this.read();

}

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

<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>Nominee:</dt>

<dd>#:NomineeName#</dd>

</dl>

<input type="hidden" name="NomineeTitle"value="#:NomineeTitle#" />

<input type="hidden" name="NomineeDeptId"value="#:NomineeDeptId#" />

<input type="hidden" name="NomineeId"value="#:NomineeId#" />

</div>

</script>

@*<div class="NomineeLeft">

<a id="addNominee"><imgsrc=@Url.Content("~/img/rnr_add_item.png") alt="Add nominee" /><strong>Add Nominee</strong></a>

</div>*@

<div class="NomineeRight">

<a id="addNominee" title="Add Nominee to the list"><img src=@Url.Content("~/img/rnr_add_item.png") alt="Add nominee" /><strong> Add Nominee</strong></a>

@(Html.Kendo().ListView<RewardSystemMvc.Models.NomineeInfo>()

.Name("NomineeList")

.TagName("div")

.ClientTemplateId("listViewTmpl")

.Editable(edit => edit.TemplateName("NomineeEditTmpl"))

//.Pageable(page => page.ButtonCount(1))

//.HtmlAttributes(new { style = "height:150px;overflow: auto;" })

.Events(ev =>

{

ev.Save("checkData");

ev.Cancel("cancelEdit");

ev.Remove("removeElem");

})

.DataSource(dataSource =>

{

dataSource.Events(ev => ev.Sync("listviewSync"));

dataSource.Model(m => m.Id("NomineeId"));

dataSource.Create(create => create.Action("NomineeListViewCreate", "Nominate"));

dataSource.Read(read => read.Action("NomineeListViewRead", "Nominate"));

dataSource.Update(update => update.Action("NomineeListViewUpdate", "Nominate"));

dataSource.Destroy(destroy => destroy.Action("NomineeListViewDestroy", "Nominate"));

})

)

</div>

ListView

answered on 29 Apr 2014

4 answers

4.5K+ views

[Solved] How to empty combobox?

I have a combobox bind with ajax to a server method, but I need to empty it when the user selects some options on the UI.

How can I empty the combobox?

Thanks in advance.

ComboBox

answered on 29 Apr 2014

3 answers

1.2K+ views

How to change currency symbol without changing locale?

Hi,

I'd like to take advantage of the automatic currency formatting (using the "c" option), but by setting a specific currency symbol. However, I do not want to change the locale (which seems to be the recommended solution), because what I want is not changing the way number is formatted, BUT only the currency symbol.

Is that possible? I've tried several things but with no success.

Thanks!

Globalization

answered on 29 Apr 2014

1 answer

112 views

Script error on 2 times key press

We are using Kendo Dropdown in our project. One of example is:

@(Html.Kendo().DropDownList()
.Name("DELFLG")
.Items(item =>
{
item.Add().Text("Ignore").Value("");
item.Add().Text("Yes").Value("Y");
item.Add().Text("No").Value("N").Selected(true);
}).DataTextField("Text").DataValueField("Value").HtmlAttributes(new { style = "width:130px" })
)

Select last value in drop down and press key on keyboard which is NOT starting character of any list box item, it prompts script error. This is happening in kendo demo also.

http://demos.telerik.com/kendo-ui/web/dropdownlist/index.html

DropDownList

answered on 29 Apr 2014

1 answer

295 views

max lenght content in list view

Hi I am using kendo listview component as seen below:

$("#showHide").kendoListView({dataSource: vals,template: "<div style='overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin:4px;'>#:name#</div>",selectable: "multiple",
change: function() {
selected = $.map(this.select(), function(item) {
return vals[$(item).index()].name;
});
},
});

Is there any way that i can find the max lenght element of whole content. for example
1). asdf
2).asdfsadfasdf
3).asdfasdfsadfsadfasdf

In this 3 element is largest.

Please suggest if there is any way we can find the max length of all the elements.

ListView

answered on 29 Apr 2014