Questions on Kendo UI for Angular Forum

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

105 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

148 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.0K+ views

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.2K+ 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

188 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

262 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

191 views

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

78 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

1 answer

70 views

Serialize grid state

Hello,

When i try to serialize a grid state object with aggregate operation using the `toDataSourceRequest ` or `toDataSourceRequestString` API's they simply get ignore/not mentioned in the output. ( i'm trying to achieve server side aggregation )

state object example :

{
skip : 0,
take : 10,
group : [
{
aggregates: [ { field: 'myField', aggregate: 'count' } ],
field: 'myField'
}

]
}

toDataSourceRequest output : {page: 1, pageSize: 10, group: "myField-asc"}

toDataSourceRequestString output : page=1&pageSize=10&group=myField-asc

Thanks in advance.

Grid