I have a grid with few columns which are sortable. Currently if user clicks on any column, it gets sorted, and at the same time grid clears existing sort. I want grid to retain the sort of existing column as well.
Here is the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/3mg5
You can use multiColumnSort config on your grid. By doing it this way your grid will not clear the existing column sort option. However, you should also give option to user to clear the sort state.
Here is the working solution - https://fiddle.sencha.com/#view/editor&fiddle/3mg6
Related
So I have been struggling with a problem involving a ui-grid that I have implemented. We have a complicated search for a table where a user can search for IDs for employees and they can also search IDs for companies. There are textboxes corresponding to employee/company ID so the user knows where to start typing. Right now, I am conditionally swapping the column visibility based on where the user begins typing (employee ID hides company columns as an example). However, I need a way to also hide the company/employee rows because the columns are showing empty values and are displaying when the user has nothing in the search box.
Research: I am toggling the columns based on an answer I found where I am just changing column visibility, but it seems there is no row visibility option. However, the only row hiding functionality seems to be checking against a static value and in this case it needs to be dynamic.
I am considering just using two different grids and toggling visibility based on the search boxes typed in, but I was trying to see if I could use just one grid.
Any help would definitely be appreciated.
This is a bit of a general question into the possibilities of ui grid. I have had tremendous success with ui grid thus far. Now I have a use case where I want to switch the rows and columns of the grid.
Basically, I would like the headers to be displayed 'vertically' in the first column and to have the rows become columns.
Is this possible with ui grid?
As far as i know UI-grid doesn't support this. I doubt if you can do that. May be try building ColumnsDef and Data dynamically and pass it to gridOptions. Or else add extra column and this should be the first column where you will pass all the header values. Change the background of the cells to look like header cells. Now add second column where you pass the entire first row values. Hide the original header row completely. see now u got your required grid........ :)
I have a grid that doesn't have header. The requirement is to sort the grid manually. I have a list of columns in a combobox and radio buttons to specify column name and sort direction respectively. How can I sort that grid on a button's click? Similarly how can I hide/show columns in the same grid using the same approach(selecting columns from a list and clicking a button)?
There are API methods you can call for both your tasks.
For sorting, mind that sorting is done by store, not by grid. You can find relevant methods in Ext.data.Store documentation - search for keyword 'sort'.
For columns manipulation, you would get the column from items collection of Ext.grid.header.Container.items and then you would call show or hide method on that column.
Folks,
I am using ng-grid to display a list of items.
I want to give my users ability to rearrange the rows in the list.
i.e move the rows up and down as they please.
Now,
However when I update the grid data in the backend i.e say change the index of a particular row, that row does not automatically change locations in the front-end.
What am i missing here ?
I have created a plunker to describe the problem
http://plnkr.co/edit/s1hrTSqF2zeZo3Btaln0
The grid doesn't use the index of the array to order it, so even if you are changing it, because the data is still there nothing happens.
What you could do is define an order field and update the value then changing the values as shown in this plukr. The order field you can hide it from the grid if required using columnDefs to explicitly defined which column should be shown.
Regards
I have ExtJS Grid In which I have Columns called "Mobile Number".
I have made simple thing here When I edit more than 2 rows and If I Modify the Column "Mobile Number" It will be checked whether is it Exist in Grid or Not.
If Duplicate Number found, I will give Message that the Input Mobile Number is already Exist and
reloading the whole grid so all edited data will be gone.
But, I want the non-duplicate data back was edited.
So, How can I keep my non-duplicate data as it is after reload the whole Grid.
I just want to remove duplicate row where found duplication and other edited rows keep as it is.
Can I use this RowEditor plugin for ExtJS 2.x compatible.
http://dev.sencha.com/deploy/ext-3.4.0/examples/grid/row-editor.html
My E-mail: ashwin.parmar2020#gmail.com
To find duplicate data use afteredit event of Ext.grid.EditorGridPanel on that event you will get current record, so just display message and add empty value in that field
You should use a validator for the mobile number field that detects duplicates and refuse the duplicate number. So you don't have to reload the grid.
If you want to reload the grid anyways, you could get the dirty rows before doing so and store/reapply them afterwards.
To get the dirty records you can use the getModifiedRecords() function of the grids store. Use the commitChangesfunction of the store to apply them after validation/processing.