Questions on Kendo UI for jQuery Forum

1 answer

295 views

Kendo UI Chart - Visualize count of returned JSON fields

I want to display the counts of specific retrieved fields in my pie/donut chart.

I'm retrieving data via REST and the result is in json format. The source is a list repeating values:

Example: In the following list, I'd like to get a present the number (count) of completed responses; perhaps in a second chart present the breakdown of responses by location.

var userResponse = [

{ User: "Bob Smith", Status: "Completed", Location: "USA" },

{ User: "Jim Smith", Status: "In-Progress", Location: "USA" },

{ User: "Jane Smith", Status: "Completed", Location: "USA" },

{ User: "Bill Smith", Status: "Completed", Location: "Japan" },

{ User: "Kate Smith", Status: "In-Progress", Location: "Japan" },

{ User: "Sam Smith", Status: "In-Progress", Location: "USA" },

]

======

My Initialization currently looks like this:

$('#targetChart').kendoChart({

dataSource: {

data: data.d.results,

group: {

field: "Location",

},

seriesDefaults: {

type: "donut",

},

series: [{

field: 'Id',

categoryField: 'Location',

}],

});

Charts

answered on 01 Jul 2016

1 answer

1.5K+ views

The model that ClientDetailTemplateId uses

We have a grid

@(Html.Kendo().Grid<PatientRecord>(Model.WorklistPatientRecords)

that has a ClientTemplateId

.ClientDetailTemplateId("grid-details-form")

Where "grid-details-form" id is in

@{ Html.RenderPartial("_DiagnosisRecordComments");

The implied model for the partial that makes up the ClientTemplate is obviously PatientRecord

Now within _DiagnosisRecordComments I have some code that looks like the following

#

new AcmeGroup.ValidationComments(ValidationCommentsViewModel);

#

ValidationCommentsViewModel is a property of PatientRecord and that works fine.

The problem is that I want to pass PatientRecord itself....the actual implied model that is used by the client template/Partial. If I use

#
new AcmeGroup.ValidationComments(PatientRecord);
#

I get an error.

What name do I use for the actual implied model that ClientDetailTemplate actually uses?

Templates

answered on 01 Jul 2016

1 answer

726 views

Kendo Splitter does not properly resize in a window

Hi, please look at the following example:

http://docs.telerik.com/kendo-ui/controls/layout/window/how-to/add-auto-resizing-splitter

Please run the example and follow these steps:

1. Move the splitter to the right.

2. Move mouse to the right edge of the window and drag towards the left.

(i.e. resize the window to be smaller using the right edge of the window)

3. Note that the splitter does not resize proportionally and becomes hidden such that you can no longer operate the splitter.

Are there any fixes/workarounds for this?

Thanks,

Michelle

Splitter

answered on 01 Jul 2016

1 answer

131 views

Kendo ui Gantt globalization

Hello

I am creating a directive that encapsulates the kendo ui gantt, and I'm trying to use globalization but is not working.

I am using $watch in language attr and when changes he made the search for the file and then re-create the directive, but has no effect.

Can you help me?

Attached is my directive, only for testing..

Gantt

answered on 01 Jul 2016

9 answers

566 views

[Solved] excel feature and mvvm

I am trying to use the excel export feature with a grid but the toolbar icon is not the one in the demos.
And it is not exporting (see snapshot).

Is there something obvious I am doing wrong.

<script id="NodeViewTemplate" type="x-kendo-template">

<div data-role="grid" id="grid1"

data-scrollable="true"

data-sortable="true"

data-groupable="false"

data-filterable="true"

data-reorderable="true"

data-resizable="true"

data-row-template="NodeRowTemplate"

data-alt-row-template="NodeAltRowTemplate"

data-toolbar="['excel']"

data-excel="fileName: 'Nodes.xlsx',

filterable: true"

data-columns="[

{ field: 'statusimage' , width: 175 , title: 'Status' },

{ field: 'idradio', width:100 , title: 'Device' },

{ field: 'peakCurrent',width:100 , title: 'Peak' },

{ field: 'avgCurrent',width:100 , title: 'Average' },

{ field: 'dateupdated', width:200 , title: 'Last Updated' },

{ field: 'nextupdate', width:200 , title: 'Next Update' },

{ Command: ['edit'] , width:150 , title: ''},

]"

data-bind="source: Nodes, visible: isVisible">

</div>

</script>

Grid

answered on 01 Jul 2016

8 answers

402 views

Grid filtering functionality to be readonly

Hello,

I would like to ask if there is a possibility the filtering which is enabled from datasource (filterable: true) to be active and visible but readonly.
Actually we have a scenario in which in 'Edit mode' the user can choose by which columns the grid to be filtered, and then when saved and ran in 'Live mode' the grid is reloaded and the user could only see by which columns the grid data is filtered but cannot change the filter.

Thank you,

Regards

Grid

answered on 01 Jul 2016

3 answers

144 views

[Solved] wrapper is not the most outer jQuery element

I though that in all kendo widgets, wrapper property is the outer element for widget. But in TabStrip case this is not true, because wrapper and element point to same jQuery element (when created from div, not ul).

Why?
Is there any other widget, which wrapper property do not point to top(the most outer) jQuery element?

TabStrip

answered on 01 Jul 2016

1 answer

127 views

Any issues creating template html in JS files?

Most of the kendo examples use a script tag template for the HTML of a widget (modal, etc).I was doing some experimentation to see if I could define the template html in my JS files. Turns out that works just fine, JS/logic expressions and all: http://dojo.telerik.com/izEJa

I was wondering if anyone knows of any negatives of doing this? I am considering creating template html in my JS to make the templates more portable and to declutter my views more.

Templates

answered on 30 Jun 2016

1 answer

120 views

Lock/Unlock option removed

I understand the lock/ unlock option from the column menu is removed as soon as a multi-column headers are introduced. This may be because the columns in a group cannot be locked individually so it can misdirect the end use.

Just want to understand if this is indeed the reason behind this? What about the lock/unlock option on the columns that are not under a multi-column header? Why are they removed ?

Is there a plan to put a column menu on the multi-column header (top most level) with a lock/unlock option ?

Thanks,

Ehtesham

Grid

answered on 30 Jun 2016

5 answers

544 views

Layouts in templates

After looking at numerous examples of templates, I have noticed a common thing: they are declared as a <dl></dl>. Is there a particular reason for this? Here are my templates:

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

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

<dl>

<dt>Terminal</dt>

<dd>#= getTerminalTitleActual(TerminalId) #</dd>

<dt>Service</dt>

<dd>#= ServiceId #</dd>

<dt>Fee</dt>

<dd>#= ServiceFee#</dd>

<dt>Card</dt>

<dd>#= ParkingCardNumber #</dd>

<dt>Issued On</dt>

<dd>#= ParkingCardIssueDate #</dd>

<dt>Expiry Date</dt>

<dd>#= ParkingCardExpiryDate #</dd>

</dl>

<div class="edit-buttons">

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

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

</div>

</script>

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

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

<dl>

<dt>Terminal</dt>

<dd><input name="TerminalId" data-source=terminals data-role="dropdownlist" data-text-field="TerminalName" data-value-field="TerminalId" /></dd>

<dt>Service</dt>

<dd><input name="ServiceId" data-source=services data-role="dropdownlist" data-text-field="NameEnglish" data-value-field="Code" /></dd>

<dt>Fee</dt>

<dd><input type="text" data-bind="value:Fee" data-role="numerictextbox" data-type="currency" name="Fee" required="required" /></dd>

<dt>Card</dt>

<dd><input type="text" data-bind="value:ParkingCardNumber" class="k-input k-textbox" name="ParkingCardNumber" required="required" /></dd>

<dt>Issued On</dt>

<dd><input type="text" data-bind="value:ParkingCardIssueDate" data-role="datepicker" data-format="dd-MMM-yyyy" name="ParkingCardIssueDate" required="required" /></dd>

<dt>Expiry Date</dt>

<dd><input type="text" data-bind="value:ParkingCardExpiryDate" data-role="datepicker" data-format="dd-MMM-yyyy" name="ParkingCardExpiryDate" required="required" /></dd>

</dl>

<div class="edit-buttons">

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

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

</div>

</script>

Now this renders a card but I'd like to go for a landscape view with 3 rows and three columns. Can we have customized layouts using bootstrap or tables for templates?

ListView

answered on 30 Jun 2016