Trying to remove column header menu containing sort dynamically.
Set menuDisabled = false on afterrender event in every column.
Ext.each(view.getColumns(), function (item) {
item.menuDisabled = true;
// item.sortable = false; //this works perfectly
});
If instead of menuDisabled I try to put sortable as false, that works perfectly.
That's because on afterrender the menu is already created, and setting the property will not disable it to appear, you should try it on init, or instead like you already did disable the sorting of the column.
Yes, menuDisabled is a config taken into account at column rendering, and changing it after that worthless. But there is a tricky way for toggling the column menu that will only work if the column was rendered with menuDisabled set to false.
So if dive into the column class source code, we will see that in the renderTpl config there is the following piece of code:
'<tpl if="!menuDisabled">',
'<div id="{id}-triggerEl" data-ref="triggerEl" role="presentation" unselectable="on" class="',
Ext.baseCSSPrefix, 'column-header-trigger', '{childElCls}" style="{triggerStyle}"></div>',
'</tpl>',
It will render a div el that will toggle the menu. So by toggling the visibility of this div, you will toggle the menuDisabled "state".
column.triggerEl.show();
column.triggerEl.hide();
In your case, you can disable the menu showing for all columns like so:
Ext.each(view.getColumns(), function(item) {
item.triggerEl.hide();
});
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1r2h.
Related
(This post has been updated for clarity and more of my findings.)
I'm currently using the tablesorter functions toggle and tablesorter-childRow to make a table that has a child row that can be hidden and expanded by clicking 'toggle' on the primary row like this example. However, the child row contains a nested table where the first row also contains a toggle function that can hide or expand all the remaining rows of that nested table. Here is my table in action.
Currently, the toggle functions all work fine in the sense that they are able to hide and expand the rows that I want to. However, if I click on the primary row's toggle function (the row with Category I), the function expands the entire nested table. I would like the toggle function on the primary role to only expand the first row of the nested table only (the row with Category II).
For my script, I used the default script found on the cssChildRow configuration here. What I tried to do is to give the rows that I want expanded its own html class (in the fiddle they are marked with <td class="show">). Then I edited the to script function to .find('.show') instead of the default .find('td'), but this did not work. Does anyone have a solution?
Thanks for everyone's help! 😊
<script>
$(function() {
$('.tablesorter-childRow td').hide();
$(".tablesorter")
.tablesorter({
cssChildRow: "tablesorter-childRow"
})
$('.tablesorter').delegate('.toggle', 'click', function() {
$(this).closest('tr').nextUntil('tr:not(.tablesorter-childRow)').find('.show').toggle();
return false;
});
});
</script>
After a lot of search in SO without any particular solution, I am compelled to ask this question.
In Simple words - I want to collapse or hide a specific row using Javascript in ag-grid. I have tried several methods explained in ag-grid documentation and also in SO, but none has worked till now.
All the following methods have been tried and none of the codes worked.
Let rowNode = gridOptions.api.getRowNode(params.value);
Method #1. params.api.getDisplayedRowAtIndex(2).setExpanded(false);
Method #2. params.api.getRowNode(params.value).setExpanded(false);
Method #3. gridOptions.api.setRowNodeExpanded(rowNode,false);
Method #4. gridOptions.api.getRowNode(rowId).style.visibility = "collapse";
I have also tried using plain CSS, like this - Data has disappeared but the white blank row is visible
rowNode.setDataValue('class', 'hidden'); //Where “class” is a field
const gridOptions = {
//Other grid options...
getRowClass: params => {
if (params.data.class === "hidden") {
return 'hidden';
}
},
https://stackblitz.com/edit/js-nvtqhz?file=infoCellRenderer.js
setExpand / setRowNode Expanded only works on collapsible rows, i.e it will collapse an expanded row. it will not hide it.
I edited your stackblitz,
I made a couple of changes to make it work.
Selectable Rows
So, when you click a row, I'm marking it as selected. There is a property on ag-grid rowSelection: 'single' | 'multiple. If you want to hide only one row at a time, use 'single' if you can hide multiple rows use 'multiple'
External filtering
So, ag grid can filters rows if we provide a criteria.It can be a check on any of data property as well. For your problem, I have added a filter that says if any row is selected, remove it from the grid.
Following are the changes
/// method called on clicking the button
function hideRow(params) {
let rowNode = gridOptions.api.getRowNode(params.value); // get the clicked row
rowNode.setSelected(true); //mark as selected
gridOptions.api.onFilterChanged(); // trigger filter change
}
Triggering the filter change will call this method for each row
function doesExternalFilterPass(node) {
return !node.selected; // if row node is selected dont show it on grid.
}
You can access the rows hidden any time using
gridOptions.api.getSelectedRows() //Returns an array of data from the selected rows. OR
gridOptions.api.getSelectedNodes() //Returns an array of the selected nodes.
And, if you want to show a row again, just filter from this above mentioned method and do these steps
rowNode.setSelected(false); //mark as unselected
gridOptions.api.onFilterChanged(); // trigger filter change
This will automatically show the row on grid.
Hope this helps! :)
I've a datable with responsive active.
Inside a column i've a input field PRICE. When i change it, it update automatically 1 or more input fields inside others column.
Now if i've a large screen and responsive is not active. All works ok.
But if i've a small screen and responsive active itself, i've problem: input field OUTSIDE the screen are not update.
See the fiddle example trying change PRICE input: http://jsfiddle.net/ebRXw/5349/
$(document).ready(function() {
$('#example').DataTable( {
responsive: true
} );
$(".price").on("change", function(e) {
e.preventDefault();
var tr = $(this).closest("tr");
var total = $(this).val() * ( 1 + tr.find(".vat").val() / 100 );
tr.find(".txt_no_responsive_column").val(total);
tr.find(".txt_responsive_column").val(total);
});
} );
I think i've to modify this logic: var tr = $(this).closest("tr"); .Now i've disabled responsive in all my tables and activated scrollX to get it working. But i'd like to activate responsive in all my tables without pain and without doing deep update to javascript! Any solution valid for responsive triggered and responsive not triggered using unique code?
UPDATE: I tried solution provided by #Yash Shukla: jsfiddle.net/ebRXw/5361 but i get problem if I resize windows. Value inside new TR back to original value. See pic
I checked you jsfiddle in both cases if responsive is true or false the value in txt_responsive_column input is getting updated.
What is your main issue? If responsive is false then there is no x scroll bar and you are not able to see the input is this the issue?
Edited :
When you click on + sign it creates a new row with child class, so I have updated the jsfiddle with updated code. You just need to pick that new row also and update input values accordingly.
//code here
http://jsfiddle.net/ebRXw/5361/
I'm using ag-grid which has the ability to add a groupedHeader, so a header which can expand and collapse a selection of sub-headers. On the grid's API is a boolean gridAPI.expanded which returns true if expanded and false if not.
I'm trying to adjust the width of the div holding the grid based on this boolean.
I've tried using ng-style with ng-if in my div but it doesn't pick up on the boolean (which I've put on the scope):
<div ng-if ='gridAPI.expanded === true' ng-style="{width:1720px}"></div>
The only way to know if the grid has been expanded is with this boolean.
Any ideas on how to get this working?
Something like this should work:
<div ng-style="gridAPI.expanded ? {width: '1720px'} : {}"></div>
I want to remove the paging buttons on the grid, but I want to keep the add, edit, refresh, etc buttons on the bottom left. I don't want the pager there because I will be displaying all records in this particular grid implementation.
I want to keep what is in GREEN but remove what is in RED:
Currently, my solution is to empty out the center of the grid's navigation
$('#pager_center').empty();
But this means that the pager renders to the page, and then gets emptied, I'm wondering if I can just prevent it from even being rendered in the first place.
You can use my following JqGrid option to disable RED zone from JqGrid. It should be the best way to solve this question because you don't need to hack JqGrid rendering via CSS style sheet that be caused of problem if JqGrid change pattern for generating pager or you change pager id.
$('#grid').jqGrid
({
rowList: [], // disable page size dropdown
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: false // disable current view record text like 'View 1-10 of 100'
});
You could apply a CSS style to hide it...?
#pager1_center {
visibility: hidden;
}
There are also options like pgbuttons and recordtext that settings in the init might cause that part not to render any HTML.
jQuery("#grid_id").jqGrid({pgbuttons:false, recordtext: ''});
Using this will remove the paging/view records area with buttons and everything.
jQuery("#WebsitesGrid").jqGrid({
...
pginput: false,
pgbuttons: false,
viewrecords: false,
....
Or if you would like to have more space in the footer of your jqGrid, you can simply hide desired part of
navigation.
gridComplete: function()
{
$( '#' + gridId + 'Pager_center' ).hide();
$( '#' + gridId + 'Pager_left' ).hide();
},
where gridId is id of your jqGrid.
$('#grid').jqGrid({pgbuttons:false, recordtext:'', pgtext:'')}
If you're looking for a solution to avoid Pager in jqGrid then just add following code in loadcomplete callback or as a statement after your jqgrid call, with or without #Soul_Master's solution,
$("#divPager").css({ "height": "0px", "border": "0px" });
It worked for me.
even you can set align property of pager details like no of records dropdown, pager text, record text. to acheive this need to change pagerpos and recordpos to right or left or center as we required. Details has to be updated in jquery.jqGrid.min.js or just do search for these keywords in your js files and do the update.