Get all visible columns - angularjs

I'm struggling with angular ui grid.
Digging into their API I'm trying to find a way is it possible to get visible columns ( only visible ).
$scope.gridOptions.columnDefs
returns all columns that are defined with all options. One solution will be that I iterate trough that array and filter out columns which have property "visible" : true, but I want to avoid that if it is possible.
Thanks in advance

To get all visible columns:
options.columnApi.getAllDisplayedColumns()
ag grid columnApi Reference

This should do it (depending on what you are ultimately trying to achieve):
uiGridExporterService.getColumnHeaders($scope.gridApi.grid, uiGridExporterConstants.VISIBLE);
If you can share a little more I might be able to help further.
Let me know if you have any other questions.

Related

How show a static number of rows using Ag datagrid

I'm new on reactjs, and I want to create a table to show some data. In the project I'm working, we are using Ag-Grid datagrid.
I already have created it with basic usage, but my question is:
Supose I have 100 rows as enter, how I can display in datagrid just the 10 firsts?
I stil wanna load all data (for filtering, sort, etc), just don't wanna show all by default.
I'm looking at documentation and do some search, but don't find the proper way to do it.
Edit: I already see the pagination options (the default solution provided by documentation), but in my case, at least for now I don't want pagination. Just wanna render the X first rows (the extra will be ommited in table, but have to be loaded in UI, if not, I could use autoHeight).
Thanks in advance.
I'm assuming you are using the Client Side Row Model and not loading data from a Server. In which case, the easiest way to achieve this would be to show the 10 rows, and add more rows (depending on when you want to load them) via Transaction Updates, please see the documentation on this here
you can use pagination:
documentation reference

AngularJs Kendo Grid Load Sorting on Initialization

I have a kendo grid "GridProjects" (See attachement: Part HTML). At the initialization, the column set (name, field, ...) and the sorted column list are retrieved from my BD on the gridHelperService.
To update the column set, I used the attribute "k-columns" on my HTML. However, I couldn't do the same thing for the sorted columns since the sort proprety is inside datasource.
I Know that I can use k-data-source, but in my case, it doesn't work because my dataSource transport and filter is binded with some variables on the controller.
Every thing is explained at this attachement: Projects Kendo Grid
I can't figure out how to fix this, if anyone can give me a hit, I'll appreciate.
Thanks!
I don't know much about your setup but based upon the image. Here is what you can try where you want the sort to happen. I don't know the columns your setup has but if you have firstName I would do sort like this.
$scope.GridProjects.dataSource.sort({field: "FirstName", dir: "asc"});
Inside the $scope you can get access to the kendo-grid="GridProjects" and then its dataSource and then sort it.
My problem was that my settings (columns) are loaded after my grid was created.
I changed my code to created the grid after my settings are loaded. To do, I called my function that creates the grid on my callback function (onSuccess).

Show dots for incomplete data in a cell which is using cellTemplate

If data doesn't fit the cell, usually ui-grid displays dots to tell that there are more data available which can be seen on expanding the column.
But when I use the cellTemplate, it doesn't displays dots even if data doesn't fit. Please see attached screenshot for more information.
Can anyone please help me to how fix this problem.
Are you using class="ui-grid-cell-contents" in your template?

How can I add slickgrid checkboxes to specific rows depending on if a value is true or false, without adding it as a formatter?

Does anyone know how I can add checkboxes only to specific rows in slickgrid without using the formatter approach?
Currently I've just done a columns.push(checkboxSelector.getColumnDefinition()); but that adds checkboxes to all the rows.
When I tried to use the formatter approach like this https://groups.google.com/forum/?fromgroups=#!topic/slickgrid/uKq2aVU5luo I found that when I scrolled through the grid, it would not hold the 'check' that were already selected in the checkboxes of the rows?
Grateful for any help on this.

Different elements in grid column

Is it possible to have different elements in a Ext JS grid column? If yes, how can I do this? If no, is there another appropriate solution? Maybe with an example.
Thanks for your help!
Kind regards, shub
What do you mean by different elements exactly?
You could use a TemplateColumn, and put in any markup and record values that you want
You could use the .renderer() method to return any markup that you want
You could use the .getRowClass() method to return a different css class depending on content
If you want to put an actual ExtJS component in a grid column, you should use Skirtle's ComponentColumn

Resources