Questions on Kendo UI for jQuery Forum

1 answer

243 views

Hi all,

I'm actually kendo-beginner and my question is: is it possible to convert html table into column chart?

I have something similier to this but it is not working, i have a feeling that this might be related to databinding process but I'm not sure..

<asp:Repeater ID="Repeater1" runat="server"
DataSourceID="RefData">
<HeaderTemplate>
<table id="datatable">

<thead>
<tr>
<th > Name </th>
<th>Score</th>
</tr>

</thead>
</HeaderTemplate>
<ItemTemplate>

<tbody>
<tr>

<td >
<%# DataBinder.Eval(Container.DataItem, "QName") %>
</td>

<td >
<%# DataBinder.Eval(Container.DataItem, "Score") %>
</td>
</tr>
</tbody>

</ItemTemplate>
<FooterTemplate>

</table>

</FooterTemplate>
</asp:Repeater>

<script type="text/javascript">

var dataTest = [document.getElementById('datatable')];

function createChart() {
$("#chart").kendoChart({

dataSource: {
data: dataTest
},

title: {
align: "center",
text: "Score"
},
legend: {
visible: false
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
background: "transparent"
}
},
series: [{
field: "Score",
colorField: "userColor"
}],
valueAxis: {
max: 28,
majorGridLines: {
visible: false
},
visible: false
},
categoryAxis: {
field: "Score",
majorGridLines: {
visible: false
},
line: {
visible: false
}
}
});
}

$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
</script>
</div>

Any help is appreciated.

Regards,
Maryam

Charts

answered on 05 Feb 2015

1 answer

82 views

TypeScript definition file Q3 2014 SP1

I am trying to upgrade my project from using Kendo UI Professional Q3 2014 to Q3 2014 SP1. Once I upgraded, I started getting some compilation errors in my TypeScript files. The type definition file (kendo.web.d.ts) has changed which is causing errors in my code.

For example:
1. kendo.bind() used to have an optional 3rd parameter "namespace", but in the latest version this parameter is no longer optional and is now required.
2. kendo.toString() used to only take two parameters, now there is a third (required) parameter "culture"

Those are the items that I have found using a simple test project that has some basic kendo controls, but I am worried that there may be more issues that I would find if I attempted to update a bigger/more complex project.

Since this is a service pack release (SP1), I would assume that there would not be changes to the method signatures. Was this just an oversight in the Type Definition file? Or should we be prepared for interface to change even in service pack releases?

If this was just an oversight, can someone from Telerik provide the corrected type definition file?

Thanks,
Sean

General Discussions

answered on 05 Feb 2015

2 answers

198 views

Kendo UI Examples - Sample Mobile Applications

I am trying to get the Sample Mobile Applications to run locally but am having no luck. I have deployed them to my local IIS (Windows 7) and have corrected all the path errors using virtual folders but both the Sushi app and the Cuteness.io app refuse to run.
Sushi shows a list of items to purchase but I cannot interact with it at all, and Cuteness just shows the splash screen.
I do not know what I am doing wrong.

I tried the same samples online and they seem to work, however the main html files appear very different from those provided in the examples.

Any help would be appreciated.

Thanks

General Discussions

answered on 05 Feb 2015

1 answer

137 views

How to Migrate DropDownLists's DBContext to MVC5 using Latest UI for MVC bits

Hi,

I'm migrating an MVC3 application to MVC5 which includes heavy use of the Kendo library. My new solution includes the bits from UI for MVC. I'm seeing an issue with defining the DBContext for a particular view. My code is as follows:

01.var ctx = System.Web.HttpContext.Current.GetDataContext;

02.

03.$jqInt("#to-country").kendoDropDownList({

04. dataValueField: "id",

05. dataTextField: "name",

06. dataSource:$jqInt.merge([{ id:'', name:'Select Country'}], @Html.Raw(Json.Encode(ctx.AFCountries.Select(x => new { x.id, x.name })))),

07. change: function(e){

08. quote.set("toCountry", e.sender.value());

09. $jqInt("#to-city").data("kendoDropDownList").dataSource.read();

10. }

11. });

Since I'm now using Entity Framework and have a Model AFCountry, what must I do to ensure that the DropDownList pulls from this particular table? Is there a new/different approach that must be taken?

Thanks much for your help and guidance.

DropDownList

answered on 05 Feb 2015

3 answers

910 views

Poor Performance When Using An AutoComplete Template With HTML

I have an AutoComplete control that is bound with to a DataSource with remote data. When I add a template with HTML, the list of items (~1800 items) can take a very long time, sometimes up to 7 seconds, to render, especially when using Chrome. When I remove the HTML tags it renders much faster. Also, scrolling up and down through the items with HTML in the template is very slow.

My template with HTML is pretty simple:

template: '<div style="float: left;">#: Name # </div><div style="float: right; width: 50px; text-align: right;"> #: Qty # </div><div style="float: right;"> #: kendo.toString(Cost, "c0") # </div>'

This template performances a significantly amount better:

template: '#: Name # #: Qty # #: kendo.toString(Cost, "c0") #'

I understand that a lot of rendering is being done by the browser to generate the control and the selection list, but I was wondering if there was anything that can be done to improve the speed. It displays almost instantly in FireFox. The kicker here is that it's very quick in IE as well.

Any advice is greatly appreciated.

AutoComplete

answered on 05 Feb 2015

4 answers

153 views

Templated Column List Filter

Is it possible to filter a templated column that uses a function to iterate over a sub-class?

I have a grid that has the following column:

{

field: 'agenda',

template: kendo.template($("#agendas-template").html()),

title: "Agendas",

filterable: true,

sortable: false,

groupable: false

}

The Template function/script that is used to display the data:

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

# $.each(agenda, function(data) { if (typeof this.Name !== "undefined") {#

<span><a href="/#: this.URLBase #/agenda/#: this.Id #">#: this.Name #</a></span>

# } }); #

</script>

The above functions display a list of links within one grid cell, because each meeting can have multiple Agendas. Now I would like to be able to filter on the Agenda Name. "this.Name" variable above.

Is this possible?

Thanks.

Grid

answered on 05 Feb 2015

5 answers

312 views

Conditionally setting editable server-side

I'm building a grid in my .cshtml file, with InCell edit mode and a destroy command, but I want to conditionally disable the grid based on an app-wide SaveEnabled setting (wired up to a user's access). No matter how I combine Editable.Enabled and Editable.Mode, it never seems to set editable.enabled in the generated javascript.

@(Html.Kendo().Grid<WebAreaGroupAccess>()<br> .Name("areaGroupAccess")<br> .Columns(col =><br> {<br

>                    col.Bound(g => g.ActiveDirectoryGroupId).Title("Group").Width("30%").EditorTemplateName("ActiveDirectoryGroup").ClientTemplate("<

a class='StandardHyperlink' href=/CPQ-IFO/Admin/Groups/${ActiveDirectoryGroupId}>${ActiveDirectoryGroupId}</a>");<br> col.Bound(g => g.Description).Title("Group Description").Width("30%");<br

>                    col.Bound(g => g.AccessLevel).Title("Access Type").Width("20%").EditorTemplateName("AccessLevel").ClientTemplate("#= AccessLevel == 0 ? 'Read-Only' : 'Read/Write' #");<

br

>                    col.Command(command => { command.Destroy(); }).Width("20%").Hidden(!Model.PageDataModel.SaveEnabled);<

br> })<br> .Editable(edit =><br> {<br> edit.Enabled(Model.PageDataModel.SaveEnabled);<br> edit.Mode(GridEditMode.InCell);<br> })<br> .ToolBar(toolbar => toolbar.Create())<br> .Events(e => e.Edit("onEdit").Save("onSave").Remove("setSaveRequired"))<br> .DataSource(ds => ds<br> .Ajax()<br> .Batch(true)<br> .ServerOperation(false)<br

>                    .Read(read => read.Action("AreaGroup_List", "Area", new { AreaCode = Model.Area.WebAreaCode }))<

br> .Create(update => update.Action("AreaGroup_Create", "Area"))<br> .Update(update => update.Action("AreaGroup_Update", "Area"))<br> .Destroy(update => update.Action("AreaGroup_Delete", "Area"))<br> .PageSize(10)<br> .Model(m =><br> {<br> m.Id(g => g.ActiveDirectoryGroupId);<br> m.Field(g => g.ActiveDirectoryGroupId).DefaultValue("LNA-ISOURCE_ACCOUNT_ADMIN");<br> m.Field(g => g.Description).Editable(false);<br> m.Field(g => g.AccessLevel);<br> m.Field(g => g.WebAreaCode);<br> })<br> .Events(e => e.Sync("onSync").Error("onError"))<br> )<br> )

When SaveEnabled is false, the command column gets hidden, but the Access Level column is still editable. Here's the generated javascript for editable:

"editable":{"confirmation":"Are you sure you want to delete this record?","confirmDelete":"Delete","cancelDelete":"Cancel","mode":"incell","template":null,"create":true,"update":true,"destroy":true}

Grid

answered on 05 Feb 2015

1 answer

200 views

[Solved] Cannot add elements to diagram when specifying dataSource in options

Hello,

I am having an issue when attempting to bind to dataItems when I provide a dataSource in the options of the diagram. I have created a sample in the Dojo that throws the error: "Cannot read property 'toLowerCase' of undefined"
http://dojo.telerik.com/iMoja/3
If I comment out the line that specifies the dataSource in the diagram options then dragging and dropping elements on the diagram works as expected, however I would like to be able to provide the model of my dataItems to the dataSource as this would give me the ability to use the default edit window. Is there a field that is expected on the dataSource configuration that I am not providing?

Thanks

Diagram

answered on 05 Feb 2015

5 answers

337 views

[Solved] 2 issues with fixed height

The smaller issue : When I use the "height" parameter when initializing the TreeList, it is ignored on my iPad on Safari with iOS 8. If I use the "height" css style instead, it works fine.

The bigger issue : The TreeList sometimes stops displaying it's content. Here is how it happens :

It happens only on my iPad and my Android tablet. I have a TreeList with a fixed height. I bind it to a dataSource containing a list long enough for the TreeList to have a scrollbar. I scroll down the list a little. Then, I change the content of the dataSource to something shorter. The TreeList refreshes and display an empty list. The TreeList knows it's not really empty because it doesn't show the usual "No records to display" message, and I can interact with the dataSource to check it's content.

If I do not scroll before changing the dataSource's content, it works fine.

Is that a bug or I'm doing something wrong?

TreeList

answered on 05 Feb 2015

1 answer

180 views

Multiple server CascadeComboBox not working with angularJS

Hi,

I have made window with 3 comboboxes and I attached to them k-option.
I've made example here: [working example] but In my application where I have remote datasources and only last combobox works ok.
The second one (customer) not cascading from first one (client).

As I say before only difference is remote datasource, and they looks:

$scope.addClientOptions = {

index: -1,

optionLabel: " ",

highlightFirst: true,

autoBind: true,

filter: "contains",

dataTextField: "name",

dataValueField: "id",

dataSource: {

type: "json",

serverFiltering: true,

transport: {