jqueryjqgridtoolbar
Disable column from header filtering but leave in toolbar
I got next jqGrid table.
I want to disable filter ability from header column, but leave it in filter toolbar.
Is there any way to disable ui-search-input but leave it in total column list? In this case for Notes column for example.
How to do it in the most convenient way?
UPD I need to remove field marked with red arrow and leave green arrow field
$(function () {
var grid_selector = "#grid-table",
pager_selector = "#grid-pager",
$jqGridReport = $(grid_selector),
grid_data =
[
{id: "1", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
{id: "2", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
{id: "3", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
{id: "4", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"},
{id: "5", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
{id: "6", name: "Play Station", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
{
id: "7",
name: "Mobile Telephone",
note: "note",
stock: "Yes",
ship: "ARAMEX",
sdate: "2007-12-03"
},
{id: "8", name: "Server", note: "note2", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
{id: "9", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
{
id: "10",
name: "Desktop Computer",
note: "note",
stock: "Yes",
ship: "FedEx",
sdate: "2007-12-03"
},
{id: "11", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
{id: "12", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
{id: "13", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"},
{id: "14", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
{id: "15", name: "Play Station", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
{
id: "16",
name: "Mobile Telephone",
note: "note",
stock: "Yes",
ship: "ARAMEX",
sdate: "2007-12-03"
},
{id: "17", name: "Server", note: "note2", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
{id: "18", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
{id: "19", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
{
id: "20",
name: "Desktop Computer",
note: "note",
stock: "Yes",
ship: "FedEx",
sdate: "2007-12-03"
},
{id: "21", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
{id: "22", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
{id: "23", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"}
];
//resize to fit page size
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
})
//resize on sidebar collapse/expand
var parent_column = $(grid_selector).closest('[class*="col-"]');
$(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
setTimeout(function () {
$(grid_selector).jqGrid('setGridWidth', parent_column.width());
}, 0);
}
})
$jqGridReport.jqGrid({
subGrid: false,
data: grid_data,
datatype: "local",
height: 'auto',
colNames: ['ID', 'Name', 'Ship via', 'Notes'],
colModel: [
{name: 'id', index: 'id', width: 60, search: true, sorttype: "int", editable: true},
{name: 'name', index: 'name', width: 150, editable: true, editoptions: {size: "20", maxlength: "30"}},
{
name: 'ship',
index: 'ship',
width: 90,
editable: true,
edittype: "select",
editoptions: {value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}
},
{
name: 'note',
index: 'note',
width: 150,
sortable: false,
editable: true,
edittype: "textarea",
editoptions: {rows: "2", cols: "10"}
}
],
viewrecords: true,
rowNum: 10,
rowList: [10, 25, 50, 100],
pager: pager_selector,
altRows: true,
multiselect: false,
multiboxonly: true,
editurl: "/dummy.html",//nothing is saved
caption: "jgGrid Example"
});
$(grid_selector).jqGrid('navGrid', pager_selector,
{ //navbar options
edit: false,
editicon: 'ace-icon fa fa-pencil blue',
add: false,
addicon: 'ace-icon fa fa-plus-circle purple',
del: false,
delicon: 'ace-icon fa fa-trash-o red',
search: true,
searchicon: 'ace-icon fa fa-search green',
refresh: false,
refreshicon: 'ace-icon fa fa-refresh green',
view: false,
viewicon: 'ace-icon fa fa-search-plus grey',
},
{},
{},
{},
{
//search form
recreateForm: true,
afterShowSearch: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
style_search_form(form);
},
afterRedraw: function () {
style_search_filters($(this));
}
,
multipleSearch: true,
/**
multipleGroup:true,
showQuery: true
*/
},
{}
);
function style_search_filters(form) {
form.find('.delete-rule').val('X');
form.find('.add-rule').addClass('btn btn-xs btn-primary');
form.find('.add-group').addClass('btn btn-xs btn-success');
form.find('.delete-group').addClass('btn btn-xs btn-danger');
}
function style_search_form(form) {
var dialog = form.closest('.ui-jqdialog');
var buttons = dialog.find('.EditTable')
buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
}
$jqGridReport.jqGrid('filterToolbar', {autosearch: true, stringResult: false});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/searchFilter.css">
<table id="grid-table"></table>
<div id="grid-pager"></div>Expected result
$(function () {
var grid_selector = "#grid-table",
pager_selector = "#grid-pager",
$jqGridReport = $(grid_selector),
grid_data =
[
{id: "1", name: "Desktop Computer", note: "note", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
{id: "2", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
{id: "3", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
{id: "4", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"},
{id: "5", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
{id: "6", name: "Play Station", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
{
id: "7",
name: "Mobile Telephone",
note: "note",
stock: "Yes",
ship: "ARAMEX",
sdate: "2007-12-03"
},
{id: "8", name: "Server", note: "note2", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
{id: "9", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
{
id: "10",
name: "Desktop Computer",
note: "note",
stock: "Yes",
ship: "FedEx",
sdate: "2007-12-03"
},
{id: "11", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
{id: "12", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
{id: "13", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"},
{id: "14", name: "Laser Printer", note: "note2", stock: "Yes", ship: "FedEx", sdate: "2007-12-03"},
{id: "15", name: "Play Station", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
{
id: "16",
name: "Mobile Telephone",
note: "note",
stock: "Yes",
ship: "ARAMEX",
sdate: "2007-12-03"
},
{id: "17", name: "Server", note: "note2", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
{id: "18", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
{id: "19", name: "Matrix Printer", note: "note3", stock: "No", ship: "FedEx", sdate: "2007-12-03"},
{
id: "20",
name: "Desktop Computer",
note: "note",
stock: "Yes",
ship: "FedEx",
sdate: "2007-12-03"
},
{id: "21", name: "Laptop", note: "Long text ", stock: "Yes", ship: "InTime", sdate: "2007-12-03"},
{id: "22", name: "LCD Monitor", note: "note3", stock: "Yes", ship: "TNT", sdate: "2007-12-03"},
{id: "23", name: "Speakers", note: "note", stock: "No", ship: "ARAMEX", sdate: "2007-12-03"}
];
//resize to fit page size
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid('setGridWidth', $(".page-content").width());
})
//resize on sidebar collapse/expand
var parent_column = $(grid_selector).closest('[class*="col-"]');
$(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
setTimeout(function () {
$(grid_selector).jqGrid('setGridWidth', parent_column.width());
}, 0);
}
})
$jqGridReport.jqGrid({
subGrid: false,
data: grid_data,
datatype: "local",
height: 'auto',
colNames: ['ID', 'Name', 'Ship via', 'Notes'],
colModel: [
{name: 'id', index: 'id', width: 60, search: true, sorttype: "int", editable: true},
{name: 'name', index: 'name', width: 150, editable: true, editoptions: {size: "20", maxlength: "30"}},
{
name: 'ship',
index: 'ship',
width: 90,
editable: true,
edittype: "select",
editoptions: {value: "FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}
},
{
name: 'note',
index: 'note',
width: 150,
search: false,
sortable: false,
editable: true,
edittype: "textarea",
editoptions: {rows: "2", cols: "10"}
}
],
viewrecords: true,
rowNum: 10,
rowList: [10, 25, 50, 100],
pager: pager_selector,
altRows: true,
multiselect: false,
multiboxonly: true,
editurl: "/dummy.html",//nothing is saved
caption: "jgGrid Example"
});
$(grid_selector).jqGrid('navGrid', pager_selector,
{ //navbar options
edit: false,
editicon: 'ace-icon fa fa-pencil blue',
add: false,
addicon: 'ace-icon fa fa-plus-circle purple',
del: false,
delicon: 'ace-icon fa fa-trash-o red',
search: true,
searchicon: 'ace-icon fa fa-search green',
refresh: false,
refreshicon: 'ace-icon fa fa-refresh green',
view: false,
viewicon: 'ace-icon fa fa-search-plus grey',
},
{},
{},
{},
{
//search form
recreateForm: true,
afterShowSearch: function (e) {
var form = $(e[0]);
form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
style_search_form(form);
},
afterRedraw: function () {
style_search_filters($(this));
}
,
multipleSearch: true,
columns: [{name: "id", sorttype: "int"}, {name: "name"}, {name: "ship"}, {name: "note"}]
/**
multipleGroup:true,
showQuery: true
*/
},
{}
);
function style_search_filters(form) {
form.find('.delete-rule').val('X');
form.find('.add-rule').addClass('btn btn-xs btn-primary');
form.find('.add-group').addClass('btn btn-xs btn-success');
form.find('.delete-group').addClass('btn btn-xs btn-danger');
}
function style_search_form(form) {
var dialog = form.closest('.ui-jqdialog');
var buttons = dialog.find('.EditTable')
buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
}
$jqGridReport.jqGrid('filterToolbar', {autosearch: true, stringResult: false});
});<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/searchFilter.css">
<table id="grid-table"></table>
<div id="grid-pager"></div>Solution
If I correctly understand the problem, then you can do the following:
- add
search: falseto the columnnote, which you want not have in the filter toolbar. - add
columnsoption to searching options ofnavGrid. For example, you can usecolumns: [{name: "id", sorttype: "int"}, {name: "name"}, {name: "ship"}, {name: "note"}]
Clarifying the above steps: searching dialog use by default the same columns like the filter toolbar. The property search: false in the column note force removing searching functionality for the column note. Adding columns option allows to include some columns independent on the value of search property. Additionally you specify the order of columns displayed in searching dialog.
- Keep numbers which appear in both columns, in J lang
- Differentiation in J
- How to reshape an array with an arbitrary size in one dimension?
- Why is Insert (fold) right associative
- Write 4 : 'x&{.&.;: y' tacitly
- Alignment issue when printing formatted prime numbers in J language
- How can I define a verb in J that applies a different verb alternately to each atom in a list?
- How to get user input in the J programming language
- How to unbox a list of boxed lists of differing lengths in J?
- How can I fix 'noun result was required' error in J?
- In j, how can I define a verb locally in one scope and pass it to a defined adverb?
- Convert boxed array to normal array?
- Read column of CSV file as array
- Replace atom in array of strings
- What does the dyad `=` do to boxed strings?
- Index of minimum element using J
- How can I take the outer product of string vectors in J?
- Building an array of verbs in J
- Reading in multidigit command line parameter
- Amend with bond to new data shows unexpected behaviour
- How to turn a table or matrix into a (flat) list in J
- How to run dissect in J?
- How to define selection using index function in J
- How to exit the J console?
- Find 4-neighbors using J
- Writing custom verbs in J
- How do I negate a selector in J lang?
- How to use arbitrary selector in interchange in J lang?
- different result once square root is added inside tacit
- Sum of arrays with repeated indices