am using yadcf with Datatable
javaScript:code
$(document).ready(function () {
$.ajax({
url: 'data.asmx/getData',
method: 'post',
dataType: 'json',
success: function (data) {
$("#tableDiv").show();
var t = $('#studentDataTable').DataTable({
data: data,
'columns': [
{
data: null
render: function (data, type, row)
{
return data['fname']+' '+data['mname']+' '+ data['lname'];
}
},
],
});
yadcf.init(t,
[
{
column_number: 0,
filter_type: "auto_complete",
}
'footer',
{
cumulative_filtering: true,
}
);
t.draw();
}
});
});
but When i type any data in the text box its not searching it.
I also tried Select filtering type that also not working,select box stays empty apart from default label.
anyone knows whats the Problem ?
Grab the 0.9.0.beta.12 and use column_data_type: rendered_html for the filter, see docs
{
column_number: 0,
column_data_type: rendered_html,
filter_type: "auto_complete",
}
As to your range slider - the following setup should be used (notice the ignore_char / filter_plugin_options
{
column_number: 2,
filter_type: "range_number_slider",
ignore_char: "%",
filter_plugin_options: {step:0.01}
}
see working jsfiddle
If that won't help, provide a jsbin sample with your issue
Related
I have a datatable that has an edit button on each row. When I click the edit button, a function opens a modal to display the data of the selected record.
Initially, I just want to get the id(which I referred to as PID) of the selected record. However according to my code, I am not sure how to extract the value passed. I kept on getting undefined response.
Please advise on any errors in my code or is there a better way to do this.
Thanks
select: true,
ajax: {
url: "people-grid-data.php",
type: "POST",
},
columnDefs: [{
"targets": [3, 4, 6, 7, 8, 9],
"visible": false,
"searchable": true
},
],
columns: [
{
"width":"2%",
"render": function (data, type, full, meta) {
return "<button type='button' class='btn btn-xs' data-toggle='modal' data-target='#editPersonModal'>Edit </button>";
},
},
{
"data": "PID",
render: getImg
},
{
"data": "PID"
},
{
"data": "personName"
},
{
"data": "PeopleRemarks"
}
],
"order": [
[2, 'asc']
]
});
$('#editPersonModal').on('show.bs.modal', function (data, type, full, meta) {
console.log("Data ID---"+data['PID']);
});
i have a button in my grid , you open your modal with this, using data atributes
render: function (data, type, row) {<a data-info="' + row.IdUser + '" data-toggle="modal" data-target="#modalGridTable" ...
in row.IdUser i have my id. now when i click in $('#modalGridTable').on('show.bs.modal', function (event)...
var button = $(event.relatedTarget);
var id = button.data('info');
var data = Grid.ajax.json().data;
function getDataJson(IdUsuario) {
return data.filter(
function (data) {
return data.IdUser === IdUser;
}
);
}
var result = getDataJson(id);
so you can read this example:
result[0].Phone
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
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}]);
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 }]);
}
I am trying to load a json store when I click on a particular row in another grid. Can anyone see what I am doing wrong here? In the ext-all.js the error comes back as data is undefined (from debugger).
Ext.define('Documents', {
extend: 'Ext.data.Model',
fields: [
{ name: 'index', type: 'int' },
{ name: 'path', type: 'string' }
]
});
var documents = new Ext.data.JsonStore({
model: 'Documents',
root: 'groupdocuments',
autoLoad: false
});
// in the Ext.grid.Panel
listeners: {
itemclick: function () {
var itemgroupid = rec.get('groupid');
Ext.Ajax.request({
url: '/GetDocuments',
params: { groupId: itemgroupid },
success: function (result) {
var jsondata = Ext.decode(result.responseText);
documents.loadData(jsondata);
}
});
}
}
// the sample json returned from url
// { "groupdocuments": [{ "index": 1, "path": "1.doc" }, { "index": 2, "path": "2.doc" }, { "index": 3, "path": "3.doc" }] }
it looks like you need to escape the path data. should be { path: "C:\\something\\" }
Also why not use the grid Grouping feature?
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.feature.Grouping
In looking further it looks like the loaddata function is expecting an array. Not a json object with a rootdata object like you are giving it. change the listener to the following:
var jsondata = Ext.decode(result.responseText);
documents.loadData(jsondata.groupdocuments);
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-loadData
alternatively you should be able to use loadRawData with the full json object.
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-loadRawData