Questions on Kendo UI for jQuery Forum

1 answer

397 views

Drag & Drop from Sortable-Panel to other window

We like to create an angular spa webproject, where customers can build their dashboard using a sortable panel. Inside the sortable item there is a list of items which should be draggable to other windows (other Programs) to drop them there and read the assigned transfer data.
But I couldn't achieve this because everytime the whole widget takes the drag-events, not the single item.

Here some code:

I use some panels like this:

<div class="panel-wrap" panel-wrapper ng-controller="PanelCtrl as panelCtrl">

<div ng-repeat="panelCol in panelCtrl.panels">

<panel-column panel-col="panelCol"></panel-column>

</div>

with each panel (directive 'panelColumn'):

<div class="col-sm-4 col-md-2" id="{{panelCol.id}}" kendo-sortable k-placeholder="panelCol.placeholder"

k-hint="panelCol.hint" k-connect-with="{{panelCol.others}}">

<my-item-list channel="panelCol"></my-item-list>

</div>

and then the items for the panel (directive 'myItemList'):

<div class="widget k-widget" id="{{myCtrl.id}}">

<span class="widget-header">

<h4>

<img ng-src="{{myCtrl.img}}" />

{{myCtrl.title}}

<span class="collapsed k-icon k-i-arrowhead-n pull-right"></span>

</h4>

</span>

<div class="k-widget collapsablelist" style="height:400px;">

<perfect-scrollbar class="scroller" wheel-propagation="true" suppress-scroll-x="true" wheel-speed="50"

refresh-on-change="someArray" on-scroll="onScroll(scrollTop, scrollHeight)">

<div ng-repeat="d in myCtrl.data">

<my-item item="d"></my-item>

</div>

</perfect-scrollbar>

</div>

and here

<div class="item"ng-style="{'border-left-color': item.color }" item-draggable="true" draggable="true">

.. some content here ...

</div>

I tried all of the examples but couldn't find a solution for this problem. Also tried to use the plain jquery sortable as in the panel example (even with handle) but no luck.

Could you please give me a hint or even better an example how to drag some thing out of a sortable panel?

Best regards
Gerd

Sortable

answered on 05 Feb 2015

1 answer

182 views

Angular-Kendo UI treeview, issue on node expansion

I'm facing an alleged Kendo UI treeview bug in the Angular version.

The tree node renders correctly (Item 2) but when it is expanded to show the sub nodes the text changes to {{dataItem.text}}
This also happens when adding a new sub node to a tree.

Since I can easily reproduce this on kendo's own demo site. I know its not my code:
http://demos.telerik.com/kendo-ui/treeview/angular

I recently upgraded from Kendo UI v2014.3.1119 To v2014.3.1316. In 1119 the issue is not happening.

Any thoughts on what I can do as a work around or when a bug fix might me expected. At this time reverting to 1119 is not an option due to the fact we need to take advantage of some of the new features in 1316

TreeView

answered on 05 Feb 2015

1 answer

249 views

Convert HTML Table to column chart

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

88 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

210 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

146 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

921 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

156 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

320 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

208 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