Questions on Kendo UI for Angular Forum

10 answers

5.1K+ views

Hello,

Having asked this question about how to set-min-width-for-columns, I wan to know is there any way to set max width fro columns in grid. As explained in that question, "when all column widths are explicitly set, and the cumulative column width is less than the available Grid width - the remaining width is distributed evenly between all columns"; however, in that case, I don't want some columns become wider than a certain point. For example, a check box column.

Is there any solution to prevent that?

Thanks,

Mojtaba

Grid

answered on 24 Sep 2020

4 answers

1.0K+ views

br tag replaced to p while setting HTML content

hi,

We are using kendo editor in read only mode without iframe.

<kendo-editor [value]="value" [readonly]="true" [disabled]="true" [iframe]="false"></kendo-editor>

Sample HTML

<html><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=us-ascii\"><meta name=\"Generator\" content=\"Microsoft Exchange Server\"><style></style></head><body><div><div>Can you follow up it looks like they are only make family size now</div><div><br></div><div>Thx</div><div><br></div><div><br></div><div><br></div><div id=\"x_composer_signature\"><div dir=\"auto\" style=\"font-size:85%; color:#575757\">Sent from my mobile.</div></div><div><br></div><div><br></div><div>-------- Original message --------</div><div>From: "akshay@gmail.com; </div><div>Date: 2017-04-20 4:05 PM (GMT-04:00) </div><div>To: "jaspreet@gmail.com"</div><div>Subject: pricing </div><div><br></div></div><font size=\"2\"><span style=\"font-size:10pt;\"><div class=\"PlainText\">Jaspreet<br>I am not sure our pn . <br><br>Why did we ge ?<br>Our large . we can't have this .<br><br>Thanks<br>Akshay<br><br></div></span></font></body></html>

When this HTML gets rendered, editor replaces br tags with p tags (with margins). Is there a way to stop with replacement as this is adding lot of empty space while viewing the HTML in the editor.

Editor

answered on 24 Sep 2020

4 answers

124 views

MaskedTextbox change event not supported in IE v11 browser

Sample code:

<kendo-maskedtextbox id="txteef610884cad733d72d8" name="txteef610884cad733d72d8" mask="(0000)-(00000)" (change)="update($event)" [(ngModel)]="contact" #txteef610884cad733d72d8="ngModel"></kendo-maskedtextbox>

MaskedTextBox

answered on 24 Sep 2020

3 answers

171 views

Unable to Instantiate Window in AngularJS

Ok everyone, so I am at a loss here why I am unable to get the Kendo window to open. In my quickwatch in the IDE, the window seems to build, but does not inherit the methods for Kendo Windows. I have followed all of the steps on Telerik's documentation about ordering of scripts, ensuring there are not multiple references to jQuery, etc. Alas, I cannot find the issue here. Code is as follows:

HTML:

<div class="panel panel-primary k-popup k-window"

id="groupMembershipWindow">

<div class="table-bordered">

<h1>

THIS IS A TEST

</h1>

<table>

<thead>

Group Members

</thead>

<tbody>

<tr>

<td></td>

</tr>

<tr></tr>

</tbody>

</table>

</div>

AngularJS

$scope.buildPopupWindow = function () {

var windowOptions = {

title: "Fuel Group Memberships",

width: 1400,

height: 400,

modal: true,

content: "app/groups/groupMembershipsPopupWindow.html",

center: true,

visible: false,

actions: ["close"],

//open: function (e) {

// $("#groupMembershipWindow").open();

//},

close: function (e) {

angular.element("#groupMembershipWindow").destroy();

}

};

var groupWindow = angular.element("#groupMembershipWindow");

groupWindow.kendoWindow(windowOptions);

groupWindow.data("kendoWindow");

$scope.data.groups.currentPopup = groupWindow;

groupWindow.center().open();

};

Window

answered on 23 Sep 2020

1 answer

2.1K+ views

[Solved] build button link from kendo grid column's fields

Hello,

I'm creating a button inside the grid that will show up inside each row and the link inside the button have to load the data from the column field , as you can see

in bold in this example , how to achieve this please?

<kendo-grid
          [data]="view | async"
          [height]="833"
          [resizable]="true"
          [pageSize]="gridState.take" [skip]="gridState.skip" [sort]="gridState.sort"
          [pageable]="true" [sortable]="true" [filterable]="true"
          (dataStateChange)="onStateChange($event)"
          (edit)="editHandler($event)" (remove)="removeHandler($event)"
          (add)="addHandler($event)"
        >
        <ng-template kendoGridToolbarTemplate>
            <button kendoGridAddCommand>Add new</button>
        </ng-template>
        <kendo-grid-column [width]="120" field="ID"  title="ID" filter="numeric" ></kendo-grid-column>
        <kendo-grid-column [width]="220" field="user_id" title="User ID"></kendo-grid-column>

        <kendo-grid-command-column title="command" width="220">
            <ng-template kendoGridCellTemplate>
                <button kendoButton look="flat" [primary]="true"
                onclick="location.href='https://www.example.net/link-fieldID-fieldUserID'">
comfirm user</button>
                <button kendoGridEditCommand [primary]="true">Edit</button>
                <button kendoGridRemoveCommand>Delete</button>
            </ng-template>
        </kendo-grid-command-column>
      </kendo-grid>

Thanks

Button

answered on 22 Sep 2020

3 answers

1.4K+ views

Value always rounded

I'm facing an issue trying to show a percentage in numeric textbox, when I set the value for something like '2.74' it shows me '3' and the decimals are ignored. I already tried some of the solutions that i found on google, like set the 'round' attribute to false or set the 'decimals' attribute to the desired value, but nothing seems to work.

Am I doing something wrong? If so, can someone show me the error?

<kendo-numerictextbox

*ngIf="servicoExibido.servicoLightModel.valPercCustos === 'P';else currency"

[format]="'p2'"

[(ngModel)]="porcentagemCustoGerais"

[spinners]="false"

[readonly]="true"

[round]="false"

[decimals]="2"

>

</kendo-numerictextbox>

NumericTextBox

answered on 21 Sep 2020

2 answers

210 views

Display aggregate footer

Hi,

I want to show aggregate footer in my grid.

I have checked on https://www.telerik.com/kendo-angular-ui/components/grid/grouping/aggregates/ for the aggregate footer. However, I cannot apply it into my coding. As I am getting data from WebAPI and then bind into grid. So my columns are all dynamic. I cannot define the aggregates and state.group as per shown in the website.

public aggregates: any[] = [{ field: 'UnitPrice', aggregate: 'average' }, { field: 'Discontinued', aggregate: 'count' }];

public state: State = {

skip: 0,

take: 5,

group: [{ field: 'Discontinued', aggregates: this.aggregates }]

};

Is there any workable sample similar to my case to refer? Thank you.

Grid

answered on 21 Sep 2020

2 answers

303 views

[disabledDatesValidation] not available in reactive form?

Is this really not available in a reactive form? If so, how do you get this error displayed in the UI?

DatePicker

answered on 18 Sep 2020

2 answers

222 views

[Solved] Specify the paper size

Hi,

How can i specify the paper size in the kendo-pdf-export tag ?

Example:

<kendo-pdf-export #pdf paperSize='["210mm", "297mm"]'></kendo-pdf-export>

I try to do this and pdf.saveAs() return the error "Unknown paper size" (screenshot).

Regards,
Murilo Alves.

PDF Export

answered on 18 Sep 2020

1 answer

104 views

For Agenda view, how can I reverse the resource grouping or add custom columns?

For the Agenda view, when you use the resource grouping you have column order of [Resource, date, time, event]. So that is saying, here is a resource and here are the events dates/times for that resource.

I am looking for a reverse type of grouping where the scenario is [Date, Resource, time, event]. So i want to say, for this date here are all my resources and their events for that date. So on 9/1/6/2020 it might show 3 of my rooms and then the times and names for all those events.

Additionally is it possible to add custom columns?

I have 2 different use cases that I am trying to satisfy and I am hoping this scheduler can do that so I don't have to build something custom.

1. I want to look at a day and see a list of all my resources that have events going on that day. Reverse resource grouping would satisfy that. I know the Timeline view does something similar but I don't want the horizontal scrolling. Vertical scrolling is preferable and more mobile friendly.

2. I want a daily planner where I can view all my events for a day in chronological order. Adding a custom column can assist is telling me the resource a particular event belongs too without cluttering up the "Event" cell with resource information.

Scheduler

answered on 18 Sep 2020