I am using jqgrid .
My aim is to view hide columns .I used columnChoser like mentioned below .
$('#Table').jqGrid('columnChooser', {
done: function (perm) {
if (perm) {
this.jqGrid('remapColumns', perm, true);
}
}
});
Problem : The trouble here is the colums are adding to end of table while restoring. Is there any way to restrore them to same place .
Can someone explain me what is perm ? Is there a way to show only specific colums in the columChoser based on column index like ex: [ 3,4,7]
Any help would be appreciated.
If I understand correct the problem, I'm not sure that the problem can be solved with the current implementation of ColumnChooser. When you try to add visible column (from right to left list), the ColumnChooser add it to the end of list without to care of the original position. I will need to see if this will possible. I will replay to this post. In order to get better support if you use Gurrido jqGrid, I recommend you to write your questions in our public forum here
Related
I want to create a draggable mui table with the help of the react-beautiful-dnd. But there is no examples with datas that are like tree. Only one level examples are there over the internet. Can you explain or give a sandbox code example?
I tried to do that with the help of TableBody(MUI), TableRow(MUI), TableCell(MUI), DragDropContext(beautiful-dnd) , Droppable(beautiful-dnd) , Draggable(beautiful-dnd). onDragEnd={(result) => {
handleEndDrag && result.destination && handleEndDrag(result.destination?.droppableId, result.draggableId); The result values doesnt come truely. Always the result.destination?.droppableId comes one after or one behind.
I have a problem with Tabulator.js library. I am usig version 4.8, I would like to use context menu feature, but I am unable to make it work. When I use code from documentation (see bellow) browser default context menu is replaced by nothing (nothing shows up). I was not able to find answer to this. Is here someone with similar experience? I have tried three different browsers,but behavior appears to be same in every one of them.
rowContextMenu: [
{
label:"Hide Column",
action:function(e, column){
column.hide();
}
},
{
separator:true,
},
{
disabled:true,
label:"Move Column",
action:function(e, column){
column.move("col");
}
}
]
Unfortunately the example is in error. The rowContextMenu action function does not provide a Column component. It provides a Row component.
If you want to manipulate a column you will need to setup Column Menus. Start by looking here and scroll down to see the other options - http://tabulator.info/docs/4.8/menu#header-menu.
For Rows look at Row Context Menus - http://tabulator.info/docs/4.8/menu#row-context
Unfourtunately, it was all my mistake, I surely did update tabulator js version but forgot to change CSS file, so menu was working right but was shown as div without styling on the bottom.
When using SlickGrids selection and sorting together I found that the selection is storing the index of the selected rows rather than storing the selection for the data you selected.
How can I fix this so that the selected data is remembered instead of just an index?
A demo of the issue can be found here:
http://jsfiddle.net/blowsie/LKf6j/
To reproduce the issue take the following steps;
Select the first item in the grid
Sort on name
You need to call dataView.syncGridSelection(grid, true).
See
https://github.com/mleibman/SlickGrid/wiki/DataView#synchronizing-selection--cell-css-styles
After digging through a few more of the examples I found this example.
I soon realised to do what I want to achieve I needed to use the Slick.Data.DataView APi with the following code.
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
// initialize the model after all the events have been hooked up
dataView.beginUpdate();
dataView.setItems(files);
dataView.endUpdate();
dataView.syncGridSelection(grid, true);
I'm using the jqGrid and have 3 columns that can NOT be sorted. At this point the cursor changes to a hand when the user hovers over the headers regardless of sorting set to true or false. I'd like that cursor to be something other than a hand (text or pointer) on those column heads. It's confusing to the users this way. Is this something that can be set?
Thanks,
Mark
I find the question very good. So +1 from me.
You are not the first person (and not the last one) who wish to have another cursor on non-sortable columns. It's pity, but jqGrid gives you not classes or some other simple attributes which can be used to find the elements at which one can set CSS "cursor:default".
So I suggest to do this with the following code:
var myGrid = $("#list");
// create the grid
myGrid.jqGrid({
// all jqGrid parameters
});
// fix cursor on non-sortable columns
var cm = myGrid[0].p.colModel;
$.each(myGrid[0].grid.headers, function(index, value) {
var cmi = cm[index], colName = cmi.name;
if(!cmi.sortable && colName!=='rn' && colName!=='cb' && colName!=='subgrid') {
$('div.ui-jqgrid-sortable',value.el).css({cursor:"default"});
}
});
You can see on the demo live that the method work. In the demo the last column 'Notes' is non-sortable.
It would be nice if such behavior would be standard in the next version of jqGrid. I will try to find time and to write suggestion what from the code of jqGrid should be changed to make the behavior out-of-the-box.
UPDATED: The problem with the cursor on non-sortable columns is not exist more in free jqGrid 4.8.
Welcome to SO.
Absolutely. CSS:
th.unsortableclass {
cursor: default;
}
Now apply that class to your column headers that aren't sortable.
Oleg's example worked great but I had a request to always show the arrows if the column was sortable. I know I'm commenting but thought some one might have the same requirement.
So I added this to his loop:
jQuery('span.s-ico',value.el).remove();
Then after his code runs:
jQuery(".s-ico").show();
And then added this to my grid create:
onSortCol:function(index, iCol, sortorder){
// redisplay all arrows
jQuery(".s-ico").show();
}
$("jquery selector to pick only non-sorted columns").css("cursor", "default");
I am exploring dojo grid, and could not find a good example of how to handle navigation by clicking on the row.
There is a simple grid example here
How to extend the code with the following requirement
handle doubleclick event on row items
read the identifier and extract the value corresponding to the selected row ( 12 for first row)
redirect to {current domain}/view/{identifier} (like www.example.com/view/12)
any help would be a great time saver...
thanks.
EDIT: added javascript tag so that more user may see this post (only 9 so far with dojo alone)
I had to solve problems 1 and 2 above.
You can use dojo.connect to connect the grid to the onRowClick event. For example, if you have a grid of the form:
<div dojoType="dojox.grid.DataGrid" jsId="grid" id="myGrid" structure="layout" selectionMode="single"></div>
You can then call in JavaScript:
dojo.connect(grid, "onRowClick", clickMethod);
clickMethod can then access the data from the row as follows:
function clickMethod(event) {
...
selected_index = grid.focus.rowIndex;
selected_item = grid.getItem(selectedIndex);
//Not sure if this is the most efficient way but it worked for me
selected_id = grid.store.getValue(selectedItem, "field_name_from_store");
...
}
I imagine you can do a location.href or similar after that.