In this Article I will run through how to enable AngularJS when using a Grid Component.
Table Of Contents
Firstly you will need to enable AngularJS in your Project.
Once you have created a new Project, go to the main Project and tick "Use AngularJs Capability".
Add a Form Component onto your Project.
Then drag a Grid Component onto your Form.
Right Click and "Edit Component".
Click on the "General" tab.
Tick "Use Angular JS".
Configure your component to get some Data then run the Project.
If you create a clone of the example, but turn off AngularJS and run both you will see the difference in the Grid.
You will see there are extra options against the Column Headings.
You can Filter any row
Not much work needed for a lot of extra functionality.
FYI I just checked 8.1.5816.0 and there is no change in this behaviour.
Sorry for the slow reply and yes I'm happy to provide examples as it would be great to see these new Angular pieces improved. Please find attached.
EDIT: No change in behaviour in 8.1.5618.0 which I have now upgraded to.
I will be reviewing these concerns in depth and passing them along to engineering to be addressed. If you have sample project to attach, and specific steps you are using to generate the problems, it would be helpful.
Good find - I forwarded this over to the Product Management team to review.
Glad the IncludeHTML trick worked for you!
While I'm at it, I've found a couple of other issues with the new Angular/Kendo grid that limit its usefulness.
I also found that the grid does not follow template styling. You can modify the grid (and probably other kendo components) by using an embeded style as Andrew describes.
Try this to set a different font:
.k-widget { font-family: Calibri; font-size: 12px; }
Thanks Andrew that worked well.
looks like you can do an includehtml with some css to fix it.
https://www.symantec.com/connect/articles/applying-custom-css-workflow-forms
target the class "k-grid-content" and give it a height of whatever you prefer; though it seems there will be some hanging off the bottom. make this "!important".
target the "k-grid" class and give it a height of auto. make this "!important".
setting it to 200px actually renders as about 311.63px. looks like you'll just have to play with the value a bit to get it the size you like, but maybe just consider that there will be about 111.63px at the bottom in addition to whatever px size you set.
if you put this in an includehtml component on the form, it should sort it out for you.
<style> .k-grid { height: auto !important; } .k-grid-content { height: 200px !important; } </style>
Alex, I have found the new angular based grid component does not follow the element sizing. The same behaviour is visible in your example above (the angular grid is about twice as high). Have you found a way to correct this? I've had a couple of attempts with javascript without much success.