Resize columns in KendoUI Grid Angular 2

[Mateusz]

Hello.

I am looking for way to manage resize columns by user in Angular 2 application. I saw in another versions of KendoUI Grid (for example in AngularJS) that this is possible but I can't find any solution for that in Angular 2 technology. Are you support that or it will be added later?
Also I thinking about reorder columns. And like in last question, I saw in another versions of KenduUI that this feature is implemented but I can't find any way to do that in Angular 2? Should I wait for next versions of Kendo or there is simple way to make it on my own now? Thank you for any answers.

[Dimiter Topalov]

Hi Mateusz,

Thank you for your interest in Kendo UI for Angular.

In general, all new features and components along with the respective documentation and runnable examples, are available in our dedicated site as soon as they are released, so you can follow our progress there:

http://www.telerik.com/kendo-angular-ui/components/

You can also check out our road map:

http://www.telerik.com/kendo-angular-ui/roadmap/

Currently the column resizing and column reordering functionalities are not supported by the Kendo UI for Angular Grid component, and our focus is on releasing a 1.0 production ready version of the Grid in our final release, planned for May.

Please, submit feature requests for any functionality that you would like to see in our components, to our UserVoice portal:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-2-feedback/category/181393-grid

It is closely monitored, and helps us adjust our road map in accordance with customer demand. Thank you in advance.

There is no trivial way of implementing the desired functionalities, but I can recommend our professional services for any feature customization, custom implementation, consulting, and more:

https://www.progress.com/services/outsourcing/feature-customization

Let me know if you are interested, and I will arrange for someone from the team to contact you.

Regards,
Dimiter Topalov
Telerik by Progress

[Sergey]

did kendo implement this feature?

[Dimiter Topalov]

Hello Sergey,

Grid column resizing functionality is currently under development, and is scheduled for our next big release in September.

However, as we always do with all new components, features, enhancements, and fixes, it will be released as soon as it is ready and properly tested, so it is possible the discussed functionality to be released even sooner, but I currently I cannot commit to a specific timeline.

Regards,
Dimiter Topalov
Progress Telerik

[Harishkumar]

Hi - Can you please let us know when the actual date you have planned to release the column resizing and reordering feature to Kendo grid 

[Dimiter Topalov]

Hello Harishkumar,

The Grid column resizing functionality is currently in active development and we hope we will be able to release it as a part of our official September release (planned for mid-September).

The column reordering functionality should be one of the features we start working on next, and most probably we will try to introduce it along with our next big release in January.

Of course, as always, we are doing our best to release all fixes, features, and enhancements as soon as they are ready and tested, so if we have something working for either of the discussed features sooner, it will be released.

You can track the following GitHub issue in our public repository:

https://github.com/telerik/kendo-angular/issues/650

Regards,
Dimiter Topalov
Progress Telerik

[Harishkumar]

As we are in mid of September already , when you planned to release Resizing feature for Angular Grid .Please let us know.

Also please let me know is there any option to use drag and drop of grid columns.

Thanks 

Harishkumar 

[Dimiter Topalov]

Hi Harishkumar,

Please accept our apologies for the delay. We really wanted to release the Grid column resizing functionality along with the September release this week, but could not finish it in time.

I can assure you it is in its final stages of development and testing, and we will release it as a dev build as soon as possible (and as an official production package soon after).

The development builds for our packages that contain the latest features and fixes, can be obtained as described in the following section of our documentation:

http://www.telerik.com/kendo-angular-ui/components/installation/development-builds/

The GitHub issue, linked in one of the previous responses will be updated accordingly when we release the feature as well.

Thank you for the understanding.

Regards,
Dimiter Topalov
Progress Telerik

[BAHADIR KORKUT]

Hi,

I get kend-angular-grid package from dev environment but couldn't found 
anything like resizable property. When will you commit this 
feature to dev environment? Could you inform about release plan?

"_from": "@progress/kendo-angular-grid@dev",
"_id": "@progress/kendo-angular-grid@1.2.1-dev.201706261335", 

[Dimiter Topalov]

Hi Bahadir,

The Grid column resizing functionality is not yet ready and released, but as previously mentioned, we are working on some finishing touches, and hope that it will be available in the next couple of weeks.

On a side note, please make sure that you have followed the instructions in the following GitHub issue:

https://github.com/telerik/kendo-angular/issues/712

... so that you have access to the latest Kendo UI for Angular dev build and official packages.

Regards,
Dimiter Topalov
Progress Telerik

[Dhruba Jyoti]

Finding this error-

Can't bind to 'resizable' since it isn't a known property of 'kendo-grid'.

1. If 'kendo-grid' is an Angular component and it has 'resizable' input, then verify that it is part of this module.
2. If 'kendo-grid' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("fa fa-spinner fa-pulse fa-fw"></i> Loading..
</div> -->
<kendo-grid [kendoGridBinding]="gridData" [ERROR ->][resizable]="true" style="height: 300px">
    <kendo-grid-column-group title="Product Info">
      "): ng:///OrderOverviewModule/GridComponent.html@85:42
Can't bind to 'minResizableWidth' since it isn't a known property of 'kendo-grid-column'.
1. If 'kendo-grid-column' is an Angular component and it has 'minResizableWidth' input, then verify that it is part of this module.
2. If 'kendo-grid-column' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("-grid-column-group title="Product Info">
        <kendo-grid-column field="ProductID" [width]="50" [ERROR ->][minResizableWidth]="30" title="ID">
        </kendo-grid-column>

"): ng:///OrderOverviewModule/GridComponent.html@87:58
    at syntaxError (compiler.es5.js:1694)
    at TemplateParser.parse (compiler.es5.js:12791)
    at JitCompiler._compileTemplate (compiler.es5.js:26994)
    at eval (compiler.es5.js:26913)
    at Set.forEach (<anonymous>)
    at JitCompiler._compileComponents (compiler.es5.js:26913)
    at eval (compiler.es5.js:26800)
    at Object.then (compiler.es5.js:1683)
    at JitCompiler._compileModuleAndComponents (compiler.es5.js:26799)
    at JitCompiler.compileModuleAsync (compiler.es5.js:26728)
syntaxError @ compiler.es5.js:1694
TemplateParser.parse @ compiler.es5.js:12791
JitCompiler._compileTemplate @ compiler.es5.js:26994
(anonymous) @ compiler.es5.js:26913
JitCompiler._compileComponents @ compiler.es5.js:26913
(anonymous) @ compiler.es5.js:26800
then @ compiler.es5.js:1683
JitCompiler._compileModuleAndComponents @ compiler.es5.js:26799
JitCompiler.compileModuleAsync @ compiler.es5.js:26728
PlatformRef_._bootstrapModuleWithZone @ core.es5.js:4536
PlatformRef_.bootstrapModule @ core.es5.js:4522
(anonymous) @ main.ts:12
../../../../../src/main.ts @ main.bundle.js:1496
__webpack_require__ @ inline.bundle.js:55
0 @ main.bundle.js:1526
__webpack_require__ @ inline.bundle.js:55
webpackJsonpCallback @ inline.bundle.js:26
(anonymous) @ main.bundle.js:1
z

[Dimiter Topalov]

Hi Dhruba,

The Grid resizing functionality was introduced in the 1.5.0 version of the Grid package. Please make sure that you are using the latest versions of the Kendo UI packages as they include all current features, fixes, and enhancements.

If you are facing issues to upgrade our packages to the latest versions, please check out the following GitHub issue that contains instructions about how to resolve such a problem:

https://github.com/telerik/kendo-angular/issues/712

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Dhruba Jyoti]

Thanks Dimiter. It was the version issue which was causing me problems. Can you please tell whether I can change the Accessibility Controls provided by Kendo? I need to override the Alt+Down arrow for the Kendo Datepicker.

 

[Dimiter Topalov]

Hi Dhruba,

I am glad you have resolved the issue. Overriding the built-in keyboard navigation/behavior of the Kendo UI for Angular components is currently not supported, but you can both handle the open event handler to provide some custom logic, associated with opening the component, or provide a custom key handler to open the DatePicker programmatically via the toggle() method upon some key/key combination of keys is pressed.

Also, if you have the time, please submit a feature request for any desired features and enhancements that you would like to see built-in in future versions of our packages, to our UserVoice portal:

http://kendoui-feedback.telerik.com/forums/555517-kendo-ui-for-angular-feedback/filters/hot?category_id=181399

It helps us track the customer demand and prioritize accordingly when updating our roadmap. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Maseeha]

@Dimiter Topalov Can you share me the link for column resize in kendo grid?

 

[Dimiter Topalov]

Hello,

Sure, you can check out the following documentation article and examples:

https://www.telerik.com/kendo-angular-ui/components/grid/columns/resizing/

It is also worth mentioning that the Grid emits a columnResize event that contains information about the resized column and its old and new width:

https://www.telerik.com/kendo-angular-ui/components/grid/api/GridComponent/#columnresize

https://www.telerik.com/kendo-angular-ui/components/grid/api/ColumnResizeArgs/

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik