I am new to backgrid (and stackoverflow) and I am curious if there is any column chooser for backgrid so that user can choose what columns are to be visible in my grid.
I know there is one for jqgrid which can be seen in action here:
http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWithColumnChooser5.htm
If there isn't any for backgrid, any ideas on how to implement this without reloading the grid again?
One way it could be done but it requires a reload of grid like so,
make the columns :renderable option as false , and not show the columns on initial load.
User selects the columns which he wants to see , then reload the Grid with new column attributes for the selected columns with renderable:true like so:
var grid = new Backgrid.Grid(columns: new Columns([{..renderable:true}, {...}], {
}));
But as you can see , I will be reloading the entire grid with the new columns though we already have this data in the DOM. I am looking forward to any ideas where in we can implement this without new Grid call
If anyone is looking for the similar sort of implementation - they can look at https://github.com/WRidder/Backgrid.ColumnManager
DEMO
Related
I have an ExtJS grid which has 15 items on each page. Individual items can be searched using Ext.getCmp('id').store.data.items[0];
But I want a generic functions which can search for a particular record on any page based on number of columns value which I supply.
Also when it has found the record I need to click on the checkbox(in the first column) of the corresponding row
I am new bee to ExtJS
View ScreenShot 1
View Screenshot 2
I guess you are loking for Ext.data.Store find() and findBy() methods.
This fiddle illustrate how you can use it.
I have the Kendo grid which is filled by few columns. I would like to after button click update visibility some of these columns, add some new and push it back to display new columns.
I tried to do by this way:
// GET COLUMNS FROM GRID
var actualGridColumns = grid.columns;
// MAKE SOME CHANGES LIKE hidden true/false on columns in loop
for loop
// SET NEW COLUMNS TO GRID
$("#orders_grid").data('kendoGrid').fields(actualGridColumns);
// FILL BY THE FRESH DATA FROM SERVER
$("#orders_grid").data('kendoGrid').dataSource.read();
// REFRESH GRID
$("#orders_grid").data('kendoGrid').refresh();
But following code crashes on:
$("#orders_grid").data('kendoGrid').fields(actualGridColumns);
How can i do it in the right way please?
There is no such fields method part of the Grid. You have two options:
First is to define all the columns that you need at initialization time and just make some of them hidden and later on show/hide some of them based on your requirements.
Another option is if you do not know the columns at the time of initialization, you can provide new set of columns options and pass them to the setOptions method of the Grid.
There is no such fields method for grid.. To handle show/hide column, kendo provide method showColumn and hideColumn, you should check Kendo Grid API Documentation
----------------------------EDIT------------------------------
Regarding to your case having new columns with new dataset you should re-define the entire grid column schema.
I make a simple example, you could develop it more complex to meet your expectation.
And here is kendo grid columns documentation to help you define your column schema properly.
Hope this helps
I'm trying to select rows dynamically on a datagrid using the grid.selection.setSeleted() and grid.selection.getSeleted() methods.
I can select rows that are currently undrawn (i.e you must use the horizontal scroll bar to see them). But when I try to get the row contents using grid.selection.getSeleted(), the array returns nulls instead of the row data.
Is there any way to get the selected row data even if it is not currently drawn? Although it's slower can I force dojo to draw the entire grid, even if some of it is not displayed?
Have al look : http://dojotoolkit.org/reference-guide/1.8/dojox/grid/DataGrid.html#working-with-selections
It's a good example how to use getSelected()
and this is a Post from the dojo Forum. It discribes an error that's maybe familiar to yours.
http://dojo-toolkit.33424.n3.nabble.com/dojox-grid-DataGrid-selection-getSelected-odd-behaivour-td3941395.html
Regards
I'm trying to reload a jqGrid with new rows, colNames and colModel. The row data seems to load fine but the columns don't seem to be refreshed. I've tried using GridUnload and GridDestroy but I end up losing the jQuery DOM instance entirely and no longer loads any data as well.
var grid = $('#my-grid');
if(grid[0].grid == undefined) {
grid.jqGrid(options);
} else {
grid.setGridParam(options);
grid.trigger('reloadGrid');
}
The grid instance is important because it will be passed to other objects as a param. These objects may attach listeners or trigger events.
I'm using version 4.4.2
reloadGrid reload only the body of the grid and not changes the column headers which will be created when the grid was created.
If you need to change number of columns or to use colNames and colModel on place of old grid you have or recreate grid. You can use GridUnload method first and then create new grid (call grid.jqGrid(data) in your case). It's important that if you cached jQuery selector to grid in a variable like grid in your code you have to assign grid one more time after call of GridUnload, so you should do something like grid = $("#grid"); directly after call of GridUnload.
See the answer for more details and the code example.
It seems that jqGrid removes the initial <table></table> from the DOM and replaces it or forgets the reference (I haven't looked that hard into it).
So you have to reselect the new table everytime you want to create a new grid ie. $('table#my-grid'). This makes it tricky if you want to pass a reference of the grid's table about to other parts of your app as a parameter.
My work around involves deleting the grid reference and replacing the grid's wrapped div with the original table. then creating a jqGrid in the normal way with the new colModel and colNames.
grid.empty();
delete grid[0].grid;
$('#gbox_my-grid').replaceWith(grid);
grid.jqGrid(options);
It isn't the tidiest of solutions but it does allow me to keep a permanent reference to the original <table>. I'm uncertain how other jqGrid plugins will be affect by this though.
Edit
it turns out jQuery DataTables is better suited for customisation and we have adopted this instead of using jqGrid.
I have combined both answers and made some modification in order to have it to work.
var grid = $('#tableID');
if(grid[0].grid == undefined) {
grid.jqGrid(options);
} else {
delete grid;
$('#tableID').GridUnload('#tableID');
$('#tableID').jqGrid(options);
}
I am using jqGrid for a scheduling process. In the grid, I am displaying the working hours and other details of employees under a department. On clicking a row in the grid, another grid has to pop-up which gives details of the corresponding row in the master grid. For example you can refer to http://trirand.com/blog/jqgrid/jqgrid.html (adanced>masterdetails). This shows an example of two grids where on clicking a row in the master grid you get the invoice details in the below grid. I too need the same functionality and added to it, I have to add/edit the rows in the second grid. Both the grid datatype are local. On clicking submit button in the add/edit dialog I want to override the default action which submits the data to the server, and write my own function. The function is to store the added details/edited details into an object and bind it as a data block to a div.
I tried onclickSubmit, but it was still invoking the default method.
Added to this, i would like to reload the grid with the new row.
for your first problem, what you can do...onSelectRow property of jqgrid you can send the data of that row as local data and load a new grid just below to previous grid
for example, this you can write with first grid
onSelectRow: function(){
var sel_id = jQuery("#grid").jqGrid('getGridParam', 'selrow');
//this will give you id of the selected row
now to get values of the column for this row, there are several methods
i'll go with this one, lets say i have date as a column in this row
so,
var date=getCellValue(sel_id,'date');
and now you can load a new grid in this same function and send this data to that grid
and now your second problem, for the custom functionality of add/edit dialogue you can make use of this event and over ride it
beforeSubmit
check this
http://www.trirand.com/jqgridwiki/doku.php?id=wiki:form_editing#editgridrow