Questions on Kendo UI for Angular Forum

1 answer

300 views

Auto-generated column needs to refresh over and over

Using Kendo UI with Angular:

I have an Auto-generated column/grid and need to refresh all the data on an ongoing basis. (Every 10 seconds). To check for any changes to the data.

My data is local at the moment and called sampleCustomers (See below)

I`m relatively new to Kendo and Angular so as descriptive as you can be would be really appreciated. (Add this to app.component.ts, add this to app.component.html, etc.)

Sample of my data below:

export const sampleCustomers = [{
'Id': 'ALFKI',
'CompanyName': 'Alfreds Futterkiste',
'ContactName': 'Maria Anders',
'ContactTitle': 'Sales Representative',
'Address': 'Obere Str. 57',
'City': 'Berlin',
'PostalCode': '12209',
'Country': 'Germany',
'Phone': '030-0074321',
'Fax': '030-0076545',
'LikeDogs': "Yes",
"FirstOrderedOn": new Date(1996, 8, 20),
"Discontinued": false,
}, {
'Id': 'ANATR',
'CompanyName': 'Ana Trujillo Emparedados y helados',
'ContactName': 'Ana Trujillo',
'ContactTitle': 'Owner',
'Address': 'Avda. de la Constitución 2222',
'City': 'México D.F.',
'PostalCode': '05021',
'Country': 'Mexico',
'Phone': '(5) 555-4729',
'Fax': '(5) 555-3745'
},

I`m looking forward to an answer regarding this as I have dug deep throughout the internet and have come up empty.

General Discussions

answered on 28 Aug 2018

1 answer

1.5K+ views

Autocomplete valueChange on blur behavior

I have an autocomplete that's working fine, except I want to change one aspect of its behavior-- I would like to not react to the valueChange event when the control has lost focus. The situation is a search box, where once a user has made a selection, a search page will be routed to. However, I don't want to navigate if the user abandons their input. The control emits a valueChange when a blur happens. I have noticed that the valueChange emits before the blur emits. What would be the best way to achieve the desired behavior? I have a ViewChild reference available if that is needed.

General Discussions

answered on 27 Aug 2018

2 answers

116 views

Window fixed buttons

Is there a way to specify buttons in a window to be positioned fixed at the bottom of the window so if a scrollbar is needed for the content, the buttons are still visible? For dialogs, there's the KendoDialogActions component but that overrides the default styles of buttons. I want to keep the styles of buttons but have it behave like buttons inside KendoDialogActions.

General Discussions

answered on 24 Aug 2018

1 answer

322 views

Auto Resize Grid Columns with a Locked Column

I have done some digging and it seems grid columns are unable to resize to fit the full width of a grid (responsively) if there is a locked column present on the grid. Is this the case? If not could someone point me in the direction of how I would go about achieving this? Thanks.

General Discussions

answered on 24 Aug 2018

1 answer

1.1K+ views

Multi Row Grid Footer

We have a requirement to construct a somewhat complex grid that requires multiple "footer template rows". Each row should be statically locked at the bottom of the grid as the user scrolls. I have scoured the docs but it this does not seem this is currently supported. Am I missing something?

Thanks.

General Discussions

answered on 24 Aug 2018

1 answer

221 views

Error during build with 1.2.0 material theme

I get the following error trying to ng serve an app using 1.2.0 version of the angular material theme. 1.1.4 version runs without issue.

ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--15-3!./src/styles.scss)
Module build failed:
undefined
^
Functions may not be defined within control directives or other mixins.
in node_modules\@progress\kendo-theme-material\scss\progressbar\_theme.scss (line 5, column 15)

General Discussions

answered on 23 Aug 2018

2 answers

905 views

DatePicker / TimePicker / Grid / ... - Translations missing

Hello

I miss some translations in these components - my app is running in German and most of all seems fine, but on some points there are things written in Englisch

DatePicker: TODAY-Link in the top-right edge does not tranlsate - Month / Placeholders / Days are translated

TimePicker: The buttons "Cancel" & "Set"

Grid: Empty message "No records available."

Overall: Tips by moseover buttons like "Toggle calendar" at the DatePicker or "Decrease/Increase value" at the NumericTextBox

Am I missing something?

Kind regards

Jürgen

General Discussions

answered on 22 Aug 2018

1 answer

338 views

kendo angular date range is not changing with external events

Hi Team,

I am using <kendo-daterange> which includes <kendo-dateinput> and <kendo-daterange-popup>.

<kendo-daterange-popup> has a kendo dropdown with options like last week, last month etc.

With every change of values from drop-down I am changing the value property of <kendo-dateinput>, below is the code:

<kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>

whenever I cahnge range.start and range.end it changes the value in input box but after sometime it goes back to its orignal state and <kendo-daterange-popup> doesnt reflect the changes.

Note: It works fine when is changed directly from the input box, it also works at the time of initial load where I am assigning the initial value of range.start and range.end

Below is the full HTML template:

<kendo-daterange>
<label>
<span class="label">Start</span>
<kendo-dateinput kendoDateRangeStartInput [(value)]="range.start"></kendo-dateinput>
</label>
<label>
<span class="label">End</span>
<kendo-dateinput kendoDateRangeEndInput [(value)]="range.end"></kendo-dateinput>
</label>
<kendo-daterange-popup>
<ng-template kendoDateRangePopupTemplate>
<h4>Popup Template</h4>
<kendo-multiviewcalendar topView= "month" [views]= 3 kendoDateRangeSelection >
</kendo-multiviewcalendar>
<kendo-dropdownlist
(valueChange) = "changeDatePeriod($event)"
[ngModel] = "defaultDropdownItem"
[data]="calendarDropdownItems"
textField = "text"
valueField = "value">
</kendo-dropdownlist>
</ng-template>
</kendo-daterange-popup>
</kendo-daterange>

General Discussions

answered on 22 Aug 2018

3 answers

842 views

Passing column templates to a parent component with a kendo-grid

My aim is to have one component "grid-user" pass column templates (kendoGridCellTemplate, kendoGridHeaderTemplate etc.) to a parent "grid-provider" component that hosts the <kendo-grid> element, so that multiple grid-users can present the same grid without each having to configure paging, sorting, etc.

My application provides the ability to search different kinds of products. All search results are shown in Kendo UI for Angular grid. Each kind of product has different fields that are shown in the search results but the grid's general functionality is always the same. I want to define the grid once but let the different search providers provide their own column configurations. However so far I have only been able to provide header, filter, and cell templates when the "<ng-template kendoGridCellTemplate>" etc. are nested directly under <kendo-grid-column> elements, which are nested directly under the <kendo-grid> element - all in the same template.

Please see this example: https://stackblitz.com/edit/angular-htffqq

The first grid is configured correctly but cell templates are directly beneath <kendo-grid-column> and <kendo-grid>. The second grid, which shows a default configuration, doesn't recognise the template provided by @ContentChild and defaults to no configuration.

Is it possible for columns to be configured in this way? I've tried many slightly different approaches but none seem to make any difference, so I'm starting to think it's simply not possible. Help?

General Discussions

answered on 21 Aug 2018

8 answers

147 views

Persisting grid state

I have worked with the MVC grid for many years and I am finding it hard to replicate basic functionality with the angular grid. For example the instructions for persisting grid state at this page runs through how to persist the angular grid settings in local storage. Good grief, I was prepared for a steep learning curve but I was not prepared for hundreds of lines of code where previously a few would do.

I do not want to create an interface for columnConfig and then use *ngFor to loop through a column collection. This loses my ability to use ng-template in each grid column. My use case is to save the current settings of the grid when a user selects a button which routes to the details page of a particular row in the grid. When the user then selects an option to return to the grid the grid should display the previous state with the correct row selected:

$("#peopleGrid").on("click", ".k-grid-ReDirect", function (e) {

e.preventDefault();

var row = $(e.target).closest("tr");

var grid = $("#peopleGrid").data("kendoGrid");

var dataItem = grid.dataItem(row);

var personId = dataItem.PersonId;

var dataSource = grid.dataSource;

var state = {

columns: grid.columns,

page: dataSource.page(),

pageSize: dataSource.pageSize(),

sort: dataSource.sort(),

filter: dataSource.filter(),

selectedRow: personId

}

localStorage["people-grid-options"] = kendo.stringify(state);

window.location.href = "@Url.Action("Details", "People")" + "/" + personId;

});

and then when the user returned to the page we pick up the previous state from local storage:

$(document).ready(function () {

var grid = $("#peopleGrid").data("kendoGrid");

var toolbar = $("#peopleGrid .k-grid-toolbar").html();

var options = localStorage["people-grid-options"];

if (options) {

var state = JSON.parse(options);

var options = grid.options;

options.columns = state.columns;

options.dataSource.page = state.page;

options.dataSource.pageSize = state.pageSize;

options.dataSource.sort = state.sort;

options.dataSource.filter = state.filter;

options.dataSource.group = state.group;

grid.destroy();

$("#peopleGrid").empty().kendoGrid(options);

$("#peopleGrid .k-grid-toolbar").html(toolbar);

$("#peopleGrid .k-grid-toolbar").addClass("k-grid-top");

}

$("#peopleGrid").data("kendoGrid").dataSource.read();

});

And then, when the grid is data bound I find the relevant row and add the selected class.

function onPeopleGridDataBound(e) {

var grid = $("#peopleGrid").data("kendoGrid");

var options = localStorage["people-grid-options"];

if (options) {

var state = JSON.parse(options);

var selectedRow = state.selectedRow;

//throws an error on first row - probably down to Filterable settings but completes ok

$.each(grid.tbody.find('tr'), function () {

var model = grid.dataItem(this);

if (model.PersonId == selectedRow) {

$('[data-uid=' + model.uid + ']').addClass('k-state-selected');

}

});

}

Now, how in the hell do I do that with the angular grid or am I simply asking for functionality which is not available?

General Discussions

answered on 21 Aug 2018