Questions on Kendo UI for jQuery Forum

1 answer

174 views

Upload multiple files in custom edit template of CRUD not able to get data in backend.

<div class="k-edit-label">
<label for="ClientPayments_client_id">Client</label>
</div>
<div class="k-edit-field" data-container-for="ClientPayments_client_id">
<input required
validationMessage="Is required"
name="ClientPayments_client_id"
data-bind="value:ClientPayments_client_id"
data-value-field="value"
data-text-field="text"
data-source="ds_clients"
data-option-label="Please choose"
data-role="dropdownlist" />
</div>

<div class="k-edit-label">
<label for="ClientPayments_FileRecords_name">Files</label>
</div>

<div class="k-edit-field" data-container-for="ClientPayments_FileRecords_name">
<div class="k-edit-field k-button k-upload-button" aria-label="files" style="width:100%">
<input name="files" id="files" type="file" data-role="upload" data-async='{"saveUrl":"http://dev.eqrcp.com/db/api/admin/client_payments.json", "autoUpload":"true"}'/>

<span>Files</span>
</div>
</div>

<div class="k-edit-label">
<label for="ClientPayments_amount">Amount</label>
</div>

<div class="k-edit-field" data-container-for="amount">
<input required validationMessage="Amount is required" type="number" class="k-input k-textbox" name="ClientPayments_amount" data-bind="value:ClientPayments_amount">
</div>
</div>
</div>
</div>
</script>
<script>
$(document).ready(function() {
console.log("In files click");
$("").kendoUpload();
});
</script>

Upload

answered on 13 Oct 2016

1 answer

175 views

AngularJS Function to HTML

I am trying to create a function that changes the awesome icon before the test based on what the text is.

I can't get it to read the html from the return. I have attach an image of what I am trying to create.

field: "ProductName", title: "Status", template: " {{ setStatus(dataItem.ProductName) }} #=ProductName# "

$scope.setStatus = function(name) {
if (name === 'Chai') {
return "<i class='fa fa-check-circle' style='color:green; font-size: 150%'></i>";
}
else if (name === 'Chang') {
return "<i class='fa fa-times-circle' style='color:red; font-size: 150%'></i>";
}
}

Grid

answered on 13 Oct 2016

1 answer

345 views

Changing the input control type in the edit template, but keeping binding.

I've got a Kendo Grid that has an editor template with about 4 fields. 2 of those fields work together in that depending on the first field's value, I need to change the second <input> to be a calendar control, dropdownlist, etc. This seems to work once if I leave a blank <input> and then in Javascript just do a $(#mycontrol).calendar() or equivalent to flip to a different type. It seems, though, that there's not a way to easily tell an input to remove the calendar control portion and just go back to a regular input so that it can be changed to another type, without removing it entirely and adding another one, which breaks the binding back to the grid. Does anyone have a suggestion or pointer for the best way to do this in Kendo? Thanks!

Grid

answered on 13 Oct 2016

3 answers

362 views

RestrictDecimals Option Not working.

We are currently using the Kendo NumericTextBox (version Kendo.2016.2.504.545) for a currency field, and we would like to restrict user entry of decimal places to 2 in the textbox. We tried a few of the NumericTextBox options, including using “RestrictDecimals” with no success. The option RestrictDecimals ("Specifies whether the decimals length should be restricted during typing.") sounds like what we need to support this functionality, but does not look like is supported in the release we are using. We did find a forum post dated 2014 (http://www.telerik.com/forums/restrict-user-from-entering-unlimited-number-of-decimals) stating that the decimal places cannot be restricted while typing in the textbox, and overall user input can only be restricted with the min/max options

1. Is the RestrictDecimals option supported in the 2016.2.504.545 version.

2. If yes do you have sample or demo of using this option.

.

steven

NumericTextBox

answered on 13 Oct 2016

5 answers

221 views

Item grouping. How to set different groups order.

Hello, I'm working with kendo Autocomplete. http://demos.telerik.com/kendo-ui/autocomplete/grouping.

I need to use grouping where one groups has higher priority in the list than the others. Currently, groups are placed in alphabetical order. Is there any way I can change order?

Thank you.

AutoComplete

answered on 12 Oct 2016

4 answers

976 views

Getting exception TypeError: a.delayedClick is not a function while loading kendogrid in angular2

I am getting a exception in browser console when I try to load a kendogrid using

angular2 component. Empty grid is loaded in the browser and in the browser console, I get the exception like below ypeError: a.delayedClick is not a function at new init (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:35:32027) at new init (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:36:11080) at new init (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:36:27154) at init._attachGroupable (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:49:18710) at init._groupable (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:49:18349) at new init (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:48:16751) at HTMLDivElement.<anonymous> (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:26:4054) at Function.each (http://kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js:2:2881) at n.each (http://kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js:2:846) at n.e.fn.(anonymous function) [as kendoGrid] (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:26:4031)

Following are the code/typescript which I am using to load the grid

import {Component } from 'angular2/core'; import { Grid } from './grid'; import { CacheDataService } from '../Service/CacheDataService'; declare var kendo: any; @Component({ selector: 'kendo-grid', templateUrl: './KendoGrid.html', directives: [Grid] }) export class ExtractorGrid { info = "Willkommen"; options: any; constructor() { console.log("Inside constructor of ExtractorGrid"); this.setUpGridOptions(); console.log("after setUpGridOptions in ExtractorGrid constructor"); } private setUpGridOptions() { console.log("Inside setUpGridOptions of ExtractorGrid"); var dataSource = new kendo.data.DataSource({ //type: "odata-v4", transport: { read: "http://localhost:23647/api/extractorqueue/" }, error: function (e) { // handle data operation error alert("Status: " + e.status + "; Error message: " + e.errorThrown); }, pageSize: 5, serverPaging: true, serverFiltering: true, serverSorting: true, batch: false, schema: { model: { name: "queueId", fields: { queueId: { editable: false, nullable: true }, applicationName: {}, customerId: {}, createdBy: {} } } } }); console.log("After Datasource extraction in setUpGridOptions"); console.log("Datasource : " + dataSource); this.options = { dataSource: dataSource, columns: [ { field: "queueId", title: "queueId", width: "40px" }, { field: "applicationName", title: "applicationName", width: "200px" }, { field: "customerId", title: "customerId", width: "120px" }, { field: "createdBy", title: "createdBy", width: "120px" }, ], pageable: true, groupable: true, sortable: true, selectable: true } } }

In Grid.ts

import { Component, Input, Host, ElementRef, AfterViewInit } from 'angular2/core'; declare var $: any; @Component({ selector: 'k-grid', template: '<div></div>' }) export class Grid implements AfterViewInit { constructor( @Host() private elm: ElementRef) { console.log("in constructor of Grid"); } @Input() options: any; ngAfterViewInit() { console.log("in ngAfterViewInit of Grid"); $(this.elm.nativeElement).children().first().kendoGrid(this.options); console.log("after assigning to to kendo"); } }

It is crashing when executing the following line
$(this.elm.nativeElement).children().first().kendoGrid(this.options);

any ideas why this exceptions is happening?

Grid

answered on 12 Oct 2016

1 answer

80 views

PivotGrid

Hi,

I have problem with PivotGrid and summary row.

First read is OK.
If change dataSource
$("#pivotgrid").data("kendoPivotGrid").dataSource.read();

Data in detail ros are OK but summary row don’t change

Thanks

Map

answered on 12 Oct 2016

1 answer

1.6K+ views

[Solved] Custom class to row based on dataItem

How can I add custom class to row based on dataItem?

I think I could use rowTemplate, but that would ignore columns.template which is not OK. I also don't want to change rowTemplate just add some custom classes.

Grid

answered on 12 Oct 2016

5 answers

185 views

The rendering Mode "canvas" draws the chart blurred on mobile devices.

The rendering Mode canvas draws the chart very blurry on mobile devices. Why? For example the CanvasJs Framework also draws with canvas method. There, the chart looks on mobile devices very sharp.

Diagram

answered on 12 Oct 2016

8 answers

325 views

Prevent Grid SignalR (Server Side Paging) To Append Another Client Modified Rows

I am testing signalR with grid with server side paging/filtering/sorting and work very well. I’d like to know how prevent adding new rows to other clients when a row is modified. Example:
User 1 is on first page while User2 is on the last page. When User 1 modify a row User 2 can see the modified row at end of the grid. I have already tried this:
    function notification(e) {
        var notification = $("#notification").data("kendoNotification");
        notification.success(e.type);

        if (e.type == "create") {
            e.items.pop();
            e.preventDefault();
        }
    }

The creation operation was not permitted by grid but the type is always “create” when record was not found on client datasource. There is something for prevent append of new records?

Grid

answered on 12 Oct 2016