Is it possible to add columns at run-time? Suppose I have a paginated set of data that has 4 columns on page 1 and the same 4 columns PLUS 1 more different columns on page 2, then on page three have the same 4 columns as page 1 but 2 columns different than page 2.
i.e.
Page 1 columns in data and shown in grid:
File, DocName, PrintDate, Event
Page 2 columns in data and shown in grid:
File, DocName, PrintDate, Event, Person
Page 3 columns in data:
File, DocName, PrintDate, Event, RunDate, Designation
Page 3 columns shown in grid:
File, DocName, PrintDate, Event, Person, RunDate, Designation
And they will all remain in the grid when maneuvering back and forth between the pages.
You can do this by adding all columns that are to be shown in the grid to all pages initially.
Then, when the grid is loaded, hide the columns that should not be visible for the first page, by using this function:
http://www.shieldui.com/documentation/grid/javascript/api/methods/hideColumn
Then attach a "change" event handle for the grid pager:
$("#grid").swidget().pager.on("change", function(e) {
var currentPage = this.currentPage;
// hide the cols not supposed to be visible on this page
// and show the rest - using the grid's hideColumn() and
// showColumn() functions
// ...
});
Related
I have a Ext grid with checkbox selection Model. The grid contains multiple pages of 50 records each. I have a 'Clear Selections' button to deselect all the selected rows in the selection model.
The code for this is :
handler: function(){
this.selectionModel.deselectAll();
this.selectedReordsArray.clear();
},
scope: this
The problem is, when I select some records in the first page and move to second page and select some records there as well. Now if I click 'Clear Selections' button it deselects the rows on that page i.e. second page , but when I go back to page 1 , the rows there are still selected.
Is there any way to remove checkbox selections from all the pages.
Thanks,
PS : I am using Ext JS 4.1.3
Add "pruneRemoved: false" for your selmodel. Then try adding deselectAll() method for your gridstore. This will clear selected records from all pages.
In the angular ui grid i have too many columns to display.
Want to display extra columns as expand collapse under each row.
Which means expand/collapse button will be provided for each row and while exanding a particular row the extra columns headertemplate will b displayed along wil b displayed along with column values.
Is it poasible with angular ui grid
As far as , there is no an option for that.
You can use the following to make things work as you wish:
remove default row headers by setting to false enableExpandableRowHeader
adding a custom row header by calling $scope.gridApi.core.addRowHeaderColumn
For reference :
http://ui-grid.info/docs/#/tutorial/114_row_header.
http://ui-grid.info/docs/#/tutorial/216_expandable_grid.
How can I dynamically click rows in my grid?
E.g.: I am using border layout.
I have a grid in the west with a list of Companies.
When I click on a Company, the information of the company which has an Id, is displayed in a form in my center area.
Now, when I want to add a company ( I am doing this with a button which opens a "Add window"), and type all information in the form and then press "save", I reload the grid.
How could I make it, that the company which is newly added, is clicked on and its information is displayed in the center area.
NOTE: The companies are listed with an ajax request, and the information is called with a "onCompanyGridHandler".
You can make the new campany created added in the top of the grid by sorting the grid's store with, for example, the date of campany creation. You can so add this line in the grid's store:
sorters: { property: 'datecreate', direction : 'DESC' },
Then, after the campany creation, you select the first row of the grid, using this code:
Ext.getCmp('your_grid_id').getView().select(0);
There are a couple of approaches you can take here:
In the function where you add the data from the Add Window to the grid panel's store, you can also get the form and use the form's loadData() method to load the data into the form, populating both the Grid and Form at the same time.
As is mentioned in a comment, after adding the data to the grid's
store, make fire the click event on the row in the grid that is
displaying the new data. I prefer the first approach because you do
not have to find the correct row in the grid and fire its click
event. In the first approach both the grid and form are loaded
with the data directly.
David
I am showing 1500 to 2000 records at a time inside a Grid with 5 columns. There is a combobox on toolbar. When there will be combo change I need to update 2 columns data. For that I am reading the store and setting the values of each record (for 2 columns). Whatever values am setting for 2 columns am getting from another JsonStore.
As there are more than 1000 records its taking sometime to update 2 colums data. Now I am trying to mask the Grid after combo change and unmsak() after all records set.
How to unmask the grid after all records value set?
Thanks in advance!!!!
You can use setLoading() method for that:
grid.setLoading(true); // <-- show default load mask to grid
grid.setLoading('some text'); // <-- show load mask with your text
grid.setLoading(false); // <-- hide load mask
I'm developping with extjs4.
I have two grids as shown in the image, I want when I click on the line of Grid Panel 1 that contanis Number 1, the Grid Panel 2 will show only lines that contains Number 1.
That is pretty much straightforward; subscribe to the select event of the first grid and within that handler filter the store of the second grid. That's it.
grid1.on('select', function(grid,record) {
grid2.store.clearFilter(true); // see http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.Store-method-clearFilter
grid2.store.filter('Number', record.get('Number');
},this);