static filter data is cleared after a search is performed - yadcf plugin - yadcf

i am trying to setup a true/false filter with the yadcf plugin. As far as i can tell, it works fine and the filtering works fine, until after you have performed a search. At which point the select list is no longer rendered (Even clearing the filter doesn't bring it back) and a page refresh is needed to bring it back.
Here are some screenshots that should help demonstrate the problem.
This is before a search has been performed
This is after a search has been performed
Here is the datatable/yadcf init (I've removed some code for brevity).
_grid.init({
loadingMessage: 'Loading...',
src: _connectionsTable,
dataTable: {
ajax: {
url: _connectionsTable.data('url')
},
columns: [
{
data: 'IsAssigned',
sortable: false,
"render": function (data, type, full, meta) {
return (data === false
? '<span class="label label-sm label-danger"> No </span>'
: '<span class="label label-sm label-success"> Yes </span>');
}
}
],
dom:
"<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'<'table-group-actions pull-right'>>r>t<'row'<'col-md-8 col-sm-12'pli><'col-md-4 col-sm-12'>>",
initComplete: function (settings, json) {
var _table = new $.fn.dataTable.Api(settings);
// search options
yadcf.init(_table, [
{
column_number: 11,
data: [{ value: 'true', label: 'Yes' }, { value: 'false', label: 'No' }],
filter_container_id: 'IsAssignedFilter',
filter_reset_button_text: false,
style_class: 'form-control form-filter input-sm'
}
]);
},
order: [
[1, 'desc']
],
responsive: true,
stateSave: true
}
});
The other types of searches seem to be working ok, but this is the first one i have provided static data for. Also Chrome dev tools doesn't show any errors when this happens.
Any help is appreciated!

You should not init yadcf in initComplete , instead do it after you init datatables, like this:
var oTable = $('#example').DataTable({...});
yadcf.init(oTable, [{column_number: 0}]);

Related

VueJS - How to have a custom headerName of columnDefs in ag-grid-vue

I am trying to display my header name in a new line, but i am unable to do it.
Version of ag-grid-vue: 6.12.0
Here is what i tried but it did not work out:
defaultColDef: {
sortable: true,
editable: true,
resizable: true,
suppressMenu: true
},
columnDefs: [
{
headerName: 'Average low ', // This value is displayed in a single line
field: 'average_low',
width: 200,
},
{
headerName: 'Average high ', // Even this value is displayed in a single line
field: 'average_high',
width: 200,
},
...
}
I tried something like this to display the headerName in new line:
{
headerName: 'Avg. \n low ', // This value is displayed in a single line
field: 'average_low',
width: 200,
},
{
headerName: 'Avg. </br> high ', // Even this value is displayed in a single line
field: 'average_high',
width: 200,
},
I want to display something like this:
Please tell me how i can do this. Here is the officially documentation:
https://www.ag-grid.com/documentation/vue/component-header/
and here is the plunker which shows the example and can be used to workout:
https://plnkr.co/edit/QGopxrvIoTPu2vkZ
EDIT: here is a working solution >> https://plnkr.co/edit/Lr6cneCFiT91lCOD
Adapt it to your liking with the according theme (alpine, balham and so on) and the height that you wish or any other CSS structure that you have.
As told below, this inspired by this guy's work.
A working solution can be done with the script below
const MIN_HEIGHT = 80; // this line is the one you're looking for !
function autosizeHeaders(event) {
if (event.finished !== false) {
event.api.setHeaderHeight(MIN_HEIGHT);
const headerCells = document.querySelectorAll('#myGrid .ag-header-cell-label');
let minHeight = MIN_HEIGHT;
headerCells.forEach(cell => {
minHeight = Math.max(minHeight, cell.scrollHeight);
});
event.api.setHeaderHeight(minHeight);
}
}
(function() {
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
var gridOptions = {
enableColResize: true,
enableSorting: true,
onColumnResized: autosizeHeaders,
onGridReady: autosizeHeaders,
columnDefs: [
{
headerName: 'Header with a very long description',
field: 'name',
headerClass: 'multiline'
},
{
headerName: 'Another long header title',
field: 'role',
headerClass: 'multiline'
}
],
rowData: [
{name: 'Niall', role: 'Developer'},
{name: 'Eamon', role: 'Manager'},
{name: 'Brian', role: 'Musician'},
{name: 'Kevin', role: 'Manager'}
]
};
new agGrid.Grid(gridDiv, gridOptions);
});
})();
There is a github issue here with a Stackoverflow thread with a lot of hacky (but working) solutions. It looks like there is no official support for this, so your best bet would be to check there and try out the various CSS solutions.
If you have a hosted example that we can play with, I may help more but right now, I can only recommend reading the various comments and try to tinker the CSS with your dev tools ! :)

YADCF custom_func not calling custom function

I have a database field that contains either integer 1 (representing the value 'document') or integer 2 (representing the value 'email') and I use datatables to format/display these integers as the words 'document' or 'email' within the table column. I would therefore like to use YADCF to be able to select 'document' or 'email' and have datatables filter the resultset accordingly.
Link to screen shot of table column.
I have used the custom_func feature as follows (code stripped down for brevity), but regardless of all other aspects of the datatable looking and working correctly, with a filter selector looking as expected and holding the selected value, and no console errors, my custom function is not being called. I have tried manually calling the custom function immediately before initialising YADCF, to check the scope, and it is being called just fine. Can anyone see anything obviously wrong please?
$(document).ready(function() {
function customFilterDocEmail(filterVal, columnVal) {
alert('customFilterDocEmail called');
var found;
if (columnVal === '') {
return true;
}
switch (filterVal) {
case 'doc':
found = columnVal === '1';
break;
case 'email':
found = columnVal === '2';
break;
default:
found = 1;
break;
}
if (found !== -1) {
return true;
}
return false;
}
})
var table = $('#table').DataTable({
serverSide: true,
processing: true,
ajax: {
url: '/api/datatables/getJson/doctext/doctexts',
type: 'POST',
data: function(d) {d.CSRFToken = '****';}
},
stateSave: true,
responsive: true,
pageLength: 25,
order: [[0, 'asc']],
columns: [
{ data: 'txt_type', width: '10%' },
{ data: 'txt_title' },
{ data: 'txt_name', width: '20%' },
{ data: 'link', orderable: false, width: '5%' },
],
}
});
yadcf.init(table, [
{ column_number: 0, filter_type: 'custom_func', custom_func: customFilterDocEmail,
data: [{ value: 'doc', label: 'Document' }, { value: 'email', label: 'Email' }] },
{ column_number: 1, column_data_type: 'text', filter_type: 'text', filter_delay: 500, filter_default_label: '', },
{ column_number: 2, column_data_type: 'text', filter_type: 'text', filter_delay: 500, filter_default_label: '', },
], 'footer');
YADCF Version: 0.9.3.beta.11
DataTables Version: 1.10.16
UPDATE: I haven't a clue what I'm doing wrong above, but I have come up with a little hack that saves having to use 'custom_func' and a custom filter. I've used the standard 'select' filter type but intercepted the filter string within the filter() method of my DatatablesSSP script thus:
$str = $requestColumn['search']['value'];
// returned search values for doctext 'txt_type' are Document/Email, so we need to map these to 1/2.
if ($column['db'] == 'txt_type') {
if ($str == 'Document') { $str = '1'; }
if ($str == 'Email') { $str = '2'; }
}
This works a treat :)
You have to place the customFilterDocEmail function outside of the $(document).ready block so it will be global and yadcf will see it

jQuery Datatables: Custom copy-to-clipboard function

The built-in copy-to-clipboard function in Datatables can copy the table head with the selected rows, so it pastes like this (Title, Number and Comment being columns):
Title Number Comment
Test 102 "nice"
Test2 103 "ok"
I need it like this:
Title: Test Number: 102 Comment: "nice"
Title: Test2 Number: 103 Comment: "ok"
My Datatables setup for the copy-button is currently like this:
dom: 'Bfrtip',
buttons: {
buttons: [
{
extend: 'copyHtml5',
text: 'Copy Selected Rows',
header: false,
exportOptions: {
modifier: {
selected: true
}
}
}
]
}
Is there a function to archive this? Or how can I modify the copying process?
SOLUTION
You can use orthogonal option to specify data type copy requested for copy operations and columns.render to render appropriate content when data type copy is requested.
$('#example').DataTable({
dom: 'Bfrtip',
columnDefs: [{
targets: "_all",
render: function (data, type, full, meta) {
if (type === 'copy') {
var api = new $.fn.dataTable.Api(meta.settings);
data = $(api.column(meta.col).header()).text() + ": " + data;
}
return data;
}
}],
buttons: [{
extend: 'copyHtml5',
text: 'Copy Selected Rows',
header: false,
exportOptions: {
modifier: {
selected: true
},
orthogonal: 'copy'
}
}]
});
DEMO
See this jsFiddle for code and demonstration.

jqgrid paging issue - Not loaded data with page

I am using Jqgrid with customized Edit, Delete buttons. Also , I am using external search to search in grid. I am fustrating with one problem since two days.
Please check my code below of binding jqgrid
jQuery(document).ready(function () {
var myGrid = $('#list');
myGrid.jqGrid({
url: '/Site/GetData/',
datatype: "json",
contentType: "application/json; charset-utf-8",
mtype: 'POST',
loadonce: true,
colNames: ['Site ID', 'Site Name', 'Email Address', 'Website', 'Contact Person', 'Phone number', 'Mobile number', "Edit", "Delete"],
colModel:
[
{ name: 'SiteID', hidden: true },
{ name: 'SiteName' },
{ name: 'EmailID' },
{ name: 'Website' },
{ name: 'ContactPerson' },
{ name: 'PhoneNo' },
{ name: 'MobileNo' },
{ name: 'Edit', width: 50, sortable: false, formatter: ColumnFormatter },
{ name: 'Delete', width: 60, sortable: false, formatter: ColumnFormatter },
],
autowidth: true,
rowNum: 5,
rowList: [5, 10, 20, 50],
pager: jQuery('#pager'),
sortorder: "desc",
viewrecords: true,
gridview: true,
ignoreCase: true,
}).navGrid('#pager',
{
rowNum: 5, edit: false, add: false, del: false, search: false, refresh: true
}
);
});
Using Above code I am binding Jqgrid.
Now, I need to delete a row from the grid, after deleting I need to refresh whole the grid. But it does not kept data according to page. Please check my delete function below :
function deleteRow(imageElement, UserId) {
var data = new Object();
data.id = UserId;
var _data = JSON.stringify(data);
$("#list").setGridParam({ datatype: 'json' });
$.ajax({
url: '#Url.Action("Delete", "Site")',
type: "POST",
contentType: "application/json; charset=utf-8",
data: _data,
success: function (result) {
var currentPage = $('#gridData').getGridParam('page');
$('#list').trigger('reloadGrid');
$("#list").setGridParam({ page: currentPage })
},
error: function (result) {
alert("This data can not be deleted");
}
});
}
Okay , using above code , I am deleting row, and if response is Success than need to reload whole the grid.
Now if I am at 2nd page and deleting any row, than it will reloads the grid , it shows me Page number is set as 2. But records shows me from 1st page of grid.
Please help me for that
I' m not sure that I correctly understand the behavior which you need to implement. If you want to reload the whole grid from the server then you should reset the value of datatype before reloading. The reason: you use loadonce: true which loads the data from the server once, save it in internal jqGrid parameters data and _index and then the datatype will be changed to "local". So if you want to reload the data from the server you should execute
$('#list').jqGrid('setGridParam', {datatype: 'json'});
before reloadGrid.
Additionally if you need to reload grid with specific page you can use page parameter of jqGrid (see the answer for details). In the most cases the usage of current:true option is what one need. So the code should be something like below
...
success: function (result) {
$("#list").setGridParam({ datatype: 'json' })
.trigger('reloadGrid', [{ current: true }]);
}

how to use search in EnhancedGrid plugin in dojo?

i am searching some data in the rows dynamically....so for this i hav used "dojox/grid/enhanced/plugins/Search .... but i am not getting any icon of search and i don't know how to use this plz suggest here is my code
grid = new EnhancedGrid({
id:'grid',
store : yourStore,
structure : layout,
rowSelector: '20px',
plugins: {
search:true,
pagination: {
pageSizes: ["50","100"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
maxPageStep: 2,
position: "bottom"
},
filter: {
closeFilterbarButton: true,
ruleCount: 5,
itemsName: "rows"
}
}
});
grid.placeAt("myGrid");
grid.startup();
It's shown here. Just look at the source.