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.

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)

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

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>

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?

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:

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

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

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

Hi, 

I have a grid in my app that can display content of various width depending on the page it's on. Some columns can be 100 px wide when on another page it will be 250px wide. 

In order to handle this I'm using the autoFitColumns() method to display it nicely to the user. However, I'm surprised that when running autoFitColumns(), all the columns will shrink to their optimal size and then render a grid which is not nice at all. (Just like in your stackblitz when clicking Auto-fit all columns https://z1p2hz.run.stackblitz.io) Wouldn't it be possible to actually fit all columns to their optimal size and then stretch them back to use 100% of the grid width ? 

I have to do the following to achieve that : 

container.querySelectorAll('table')[0].style.width = '100%';
container.querySelectorAll('table')[1].style.width = '100%';

Same goes for the autoFitColumn() method, the columns passed as parameter should have their size optimized but then stretched again so that the grid content doesn't end up using only 50% of the grid for example. 

My other question is, what is the best way to call the autofit method ? In angular, I feel like there is no event to subscribe for grid rendering so this is also kind of custom. I just call the autoFitColumns() when my data is received from the back-end but sometimes the grid is not rendered yet at this moment so I have to put the call to autoFitColumns() in a loop to wait for the table rendering. I had to do a custom method to check for table rendering and it is quite ugly. We should have the possibility to include the autoFitColumns feature in the grid declaration itself so it will automatically autoFit each time the grid is rendered. 

Thanks in advance for your answers.

I have a grid where half of the columns are generated dynamically, but I need to add a tooltip to these columns. Normally I would use a kendoGridCellTemplate, but this doesn't seem to work with dynamic columns. I have tried a number of different things, but I'm not getting anywhere. 

<kendo-grid-column *ngFor="let block of dynamicBlocks" field="{{block.field}}" title="{{block.title}}" width="82">
<ng-template kendoGridCellTemplate>
{{THE FIELD VALUE}} --- what goes here?
</ng-template>
</kendo-grid-column>

I am a little frustrated by the lack of responsive properties of the grid. I can live with the problem of having to use the media property and kendo-grid-span-column directive for columns but why can't I also hide the toolbar on smaller devices?  Surely the best method here would be to have the media property follow standard grid principles.  For example a grid with four columns could have media="col-2", media="col-3", media="col-5", media="col-2" and the hidden property could have [hidden]="sm" etc.  To stack using the kendo grid we need to duplicate code like so:

But even then we can't hide the toolbar on smaller devices.  Why won't a simple directive instruction like this for the toolbar template:

When I started with the angular grid I thought I was going to get a lot of modern way of looking at things but it seems that the underlying code is generating css like we did 10 years ago when we were working with Telerik and Visual Basic and had 34 columns in a window which more or less worked like a spreadsheet.  The documentation points to the widgets using a container which does not work well with Bootstrap because the Bootstrap container is 'non-default'.  Come on guys, DevExpress grids stack, as do PrimeNG grids as do data tables (the list goes on).

Your widgets are so well thought out they are a pleasure to work with and I have worked with the MVC and JQuery stuff for a decade or so.  Your scheduler has given me the opportunity to close so many deals I can't begin to count them all.  I am so looking forward to the angular version.  Your widgets are brilliant and your support is second to none.  Your forums have a wealth of information your competitors must look on with envy.

But your approach to responsiveness is just so poor.  Come one guys, give us something to shout about.  Is there anything on the roadmap to change your approach or are you going to hang on to a css foundation which has the same footprint as a fossilised dinosaur?

Rant over, keep up the good work but please give us some good news on responsiveness because if the scheduler has the same problem it's game over.  I really don't want to go and try the other options on the market but it's the device which is driving the market, not the functionality.