Questions on Kendo UI for Angular Forum

0 answers

1.0K+ views

How to trigger onChange event?

Hello there,

have no idea to trigger the change event of dropdownlist

I need to set other inputs of my form ,if the code has a specific value, at the onchange event
My html:

<div class="row">

<div class="col-md-6">

<mat-label id="title-t" class="required"></mat-label>

<kendo-dropdownlist

id="tID"

[data]="dataSourceList"

[textField]="'name'"

[valueField]="'code'"

formControlName="tList"

(valueChange)="onChangeList($event)">

</kendo-dropdownlist>

</div>

</div>t;

My ts:

public onChangeList(e){

var t_code= e.code;

console.log(t_code);

}

i want call event change in another function, something like this:
//tID.kendoDropDownList.change();

thanks,

Federico

DropDownList

asked on 24 Sep 2020

3 answers

685 views

Get item id list for selected items

right now we can see node index values we can get as sleeted values instead of this i need to get below

lets say we have unique ID value for each node items then we select the items on tree I need to get that unique ID value as selected values

how can I achieve this ?

TreeView

answered on 24 Sep 2020

10 answers

5.1K+ views

Set max width for columns

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

130 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

173 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

216 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