Questions on Kendo UI for Angular Forum

3 answers

810 views

kendo-excelexport component. change visibility of column inside excel

I use next simple code for creating excel for export.

<kendo-excelexport #export [data]="data" [fileName]="fileName"> 
<ng-container *ngFor="let column of columns"> 
    <kendo-excelexport-column [field]="column.datasource" [locked]="column.locked" [hidden]="column.hidden" [title]="column.title"          [width]="column.width"> 
</kendo-excelexport-column>
 </ng-container> 
</kendo-excelexport>

Currently, hidden means remove (exclude) column from excel (actually don't add it).
My goal of the hidden property was - save the column inside excel, but make it visible none for the user. I mean, I want to set visible false for the first column in excel, and the user will see other columns. But when I read the excel file, I see all columns including visible false.
For example, we have columns Id, Name, Age. In excel we have default ordering of columns A(for Id column), B(for Name column), C(for Age column). After export users see inside the excel file only B, C columns. Column A visible false. When I read the file, I should see A, B, C columns. - This is my goal.
Is it possible (maybe with other property, or other libraries)?

Excel Export

answered on 28 Sep 2020

1 answer

523 views

Numeric Virtual Keyboard

Hello,

We have a Kendo NumericTextBox in an Angular App that is going to be used on an Android phone. In standard HTML input elements it is possible to set the attribute "inputmode" to "numeric" for the virtual keyboard on mobile devices to be displayed numerical. For the app, we would need this behavior for the Kendo NumericTextBox component too. So far, I did not find a possibility to achieve this. Is there an existing possibility or a workaround (except for manually adding the attribute via querySelector)?

NumericTextBox

answered on 25 Sep 2020

1 answer

85 views

passing data to grid

I am using angularjs and in 1 of the components I have my kendo grid <sales-kendo-grid-component>

I am trying to reuse that component in my <other-sales-component> where I have stored data $scope.otherSales that I want to populate kendo grid with.

// other sales component

<div class="container">
<h1>Sales from other sources</h1>
<sales-kendo-grid-component></sales-kendo-grid-component>
</div>

How do I bind my $scope.otherSales to populate grid that's coming from <sales-kendo-grid-component>

Grid

answered on 24 Sep 2020

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

604 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

4.8K+ 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

990 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

97 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

138 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

1.9K+ 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