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.
Related
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 ! :)
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}]);
Currently I'm using DataTables in each page initializing them individually like this.
var table = $('#' + '<%= gvReports.ClientID %>').DataTable({
"responsive": true,
"bAutoWidth": true,
"oLanguage": {
"sSearch": "Search Table: ",
"sSearchPlaceholder": "Search records",
"sEmptyTable": "No data available to display"
},
"columnDefs": [
{
"targets": [0],
type: 'natural-nohtml'
}
],
"sScrollY": "55vh",
"scrollCollapse": false,
"pagingType": "full_numbers",
"lengthMenu": [[25, 50, 100, 150, 200], [25, 50, 100, 150, 200]]
});
When I tried to create a generic JQuery method to use in multiple places the type attribute in columnDef is not working properly
"columnDefs": [
{
"targets": [0],
type: 'natural-nohtml'
}
],
Im using NatualSort plugin to sort the data as the column '0' contains alphanumeric data.
Is there a way i can set the columnDefs dynamically? or to set the ColumnDef Type for Column(0) after I initialize the table?
Something Like
table.column("0:visible").Type('natural-nohtml');
Any help is appreciated? I want to know if I'm thinking in right way?
There is no way that you can manipulate columnDefs after the dataTable is initialised. However, when you basically just want to set natural-nohtml as type for the first column for any dataTable, then you could simply extend $.fn.dataTable.defaults. Declare this before you initialise any dataTable :
$.extend( true, $.fn.dataTable.defaults, {
columnDefs: [
{ targets: [0], type: 'natural-nohtml' }
]
} );
This will set any dataTables' first column to type natural-nohtml.
In My website I am using data tables for display data. Now The issue is If there are 10 records than the default pagination is not display but when there are more than 10 records the pagination of data table should display.
This is how I initialize datatable
$(document).ready(function(){
$('#tbl_member').dataTable({
"iDisplayLength": 10,
"bAutoWidth": false,
"aoColumnDefs": [
{"bSortable": true, "aTargets": [0,2]}
]
});
});
This datatable code is when I done server side processing:-
var save_method;
var table;
$(document).ready(function() {
table = $('#table').DataTable({
oLanguage: {
sProcessing: "<img src='<?php echo base_url();?>assets/img/loader.gif'>"
},
"processing": true,
"serverSide": true,
// Load data for the table's content from an Ajax source
"ajax": {
"url": "<?php echo base_url();?>Technology/technology_list",
"type": "POST"
},
"columnDefs": [
{
"targets": [ -1 ],
"orderable": false,
},
],
});
});
Use bPaginate (old hungarian notation style) or paginate to turn pagination on or off. You can use expressions to determine the options :
$('#tbl_member').dataTable({
"bPaginate" : $('#tbl_member tbody tr').length>10,
"iDisplayLength": 10,
"bAutoWidth": false,
"aoColumnDefs": [
{"bSortable": true, "aTargets": [0,2]}
]
});
This works in both 1.9.x and 1.10.x versions of dataTables. Demo showing two tables with the one having less than 10 records, the other a lot more -> http://jsfiddle.net/t2xcfLap/3/
Hide pagination controls after an AJAX update. Assuming the JSON reponse is on the form
{
"draw": 1,
"recordsTotal": 3,
"recordsFiltered": 3,
"data": [
[...],
]
}
then
table.on('xhr', function(e, settings, json, xhr) {
if (json.recordsTotal<10) {
$("#example_paginate").hide();
$("#example_length").hide();
} else {
$("#example_paginate").show();
$("#example_length").show();
}
})
demo -> http://jsfiddle.net/yyo5231z/
The injected controls is named on the form <tableId>_length, <tableId>_paginate. So if your table have the id table, then the above should be $("#table_paginate").hide(); and so on.
The reason for the different approach compared to the first answer with a static table is, that you cannot change pagination on the fly without re-initialising the table.
I use a simple treepanel for my application, and sometimes it stops expanding and unexpanding nodes with the next error:
records[i] is undefined
http://localhost:8080/extjs/ext-all-debug.js
Line 58763
My code is quite simple:
var tree_store = Ext.create('Ext.data.TreeStore', {
id: 'tree_store_id',
proxy: {
type: 'ajax',
url: 'tree_data.json?object_id=' + Ext.getCmp('object_id').value
},
root: {
text: 'Парки',
id: 'objectId',
expanded: true,
iconCls: 'tree-cls-root'
}
});
var tree = Ext.create('Ext.tree.Panel', {
id: 'stock_tree_id',
store: tree_store,
autoWidth: true,
height: 600,
autoScroll: true,
renderTo: document.getElementById('stock_tree_div'),
useArrows: true,
border: false,
rootVisible: true,
listeners: {
itemclick: function (view, rec, item, index, eventObj) {
document.getElementById("stock_div").innerHTML = rec.data.text;
}
}
});
Has anyone faced this problem?
May be it's problem at your JSON. Is it include something like:
"leaf" : "true",
"expanded" : "true"
?
In my case this was caused by the fact that server response json contained parent node as a first element.
So when I was expanding node 123, server was returning node 123 itself and then all of it's children.