I had setup datatables to display a users, each user has more images.
Datatables column that displays the images is like this:
{data: 'images', render: function ( data, type, row ) {
var out='';
if (type === 'display') {
row.images.forEach(function(item){
out+=''+item.file_name+' ';
});}
if (type === 'search') {
row.images.forEach(function(item){
out+=item.file_name+' ';
});}
return out;}
},
All other fields come to the datatables as key:value, while images comes for each user as an array of objects.
All Image File names are displayed correctly in datatables, and links works good also, however general search does not work
I want general search to work with or without search for image file name.
I also specified searchable: false, but still search didn't work, like this:
{data: 'images', render: function ( data, type, row ) {..},searchable: false}
Search works ok without image column!
Any ideas?
Related
I want to export my datatable as CSV file. Unfortunately the Order History returns [object Object] value in CSV File. I have tried by looking this forum https://datatables.net/forums/discussion/50304/datatable-is-showing-object-object-in-columns#Comment_133450 but I'm not sure how should apply on my code.
Below the csv file, that give output [object Object] for Order History.
As for the datatables, it return the value that I wanted.
Here's my code: LIVE JS BIN DEMO
The Server_Processing.php JSON
{
"draw": 1,
"recordsTotal": 238633,
"recordsFiltered": 183514,
"data": [
[
"6789",
"North City"
],
[
"5325",
"South City"
]
]
}
Output console.log(result) for fetch_total.php ajax call
{"data":[[6]]}
{"data":[[1]]}
Basically I've pass the ID_No value to ajax call, and it will return the readable value to the cell.
I've tried by using JSON.stringify to the additionalData, it still return [object Object] value when I export as CSV file.
Any help would be greatly appreciated
Solution
The simplest way to fix this is to add an exportOptions section to your DataTable buttons option.
So, instead of this:
buttons: [ 'csv' ],
you can use this:
buttons: [
{
extend: 'csv',
exportOptions: {
format: {
body: function ( inner, rowidx, colidx, node ) {
return node.innerText;
}
}
}
}
],
And you can repeat the { extend: ... } section for additional buttons (e.g. Excel).
This logic ensures you take the value loaded into the DOM node (the HTML table cell) instead of the value stored in the DataTable (an object).
Explanation
In your logic, you are using this:
"createdCell": function(cell, cellData, rowData, rowIndex, colIndex) { ... }
This is documented here.
The key point is:
cell: The TD node that has been created.
In other words, this <td> element is what you see displayed in the web page - the HTML. It is not what is stored in the underlying DataTable (which is the createdCell function used to create the contents of that <td> element).
So, when you try to export your data, DataTables will use the data it has stored in its internal data structures. It does not use the data you added to the HTML table.
My exportOptions function solves that by telling DataTables to look at the data in the HTML table directly (node.innerText) instead of using its internal data.
This is a very basic solution. It looks in every <td> cell in the HTML table, not just the third column. In your case, this is probably fine. But you may need to refine this, if there are other cases where you do not want to use the cell contents.
Also, I agree with the comments made in the question by #mark_b:
You're making a separate Ajax call for each row of your data in order to populate the Order History column? Surely there is a more efficient way to get all the data you need in a single request?
I am new to kendo ui grid development.
I have a requirement where I want to display data in kendo ui grid.
I am able to bind the data to kendo grid using java-script.
This is how I did it.
(document.getElementById(divId)).kendoGrid({
columns: cols,
dataSource: data,
change: onChange,
selectable: "multiple",
//selectable: "multiple cell",
schema: {
model: {
id: "ID"
}
}
}).data("kendoGrid");
The data is displayed in the grid.
Now, I want to create a blank first column in the grid that will display a image. How can I do this. The grid is bound to data dynamically. I have not specified any hard coded columns. All columns are created dynamically.
Please anyone can tell me on this.
You will have to explicitly define the columns because:
You want to add a columns that is not in the model.
The content of the column is an image that is not a KendoUI basic type that can be inferred from the model definition.
Said so, you have to add a column that is something like:
var cols = [
// Your other columns
...
{
title :"Image",
template: "<img src='my_image.gif'/>"
},
// More columns
...
];
In addition you might need to use an image that is not a constant but depending on the content of a column. Then you might do:
var cols = [
// Your other columns
...
{
title: "Status",
template: "# if (status) { # <img src='ok.gif'/> # } else { # <img src='nak.gif'/> # } #"
},
{
title : "Photo",
template: "<img src='#= image #'/>"
}
// More columns
...
];
Where depending on the value of field in your model called status I display the image ok.gif or nak.gif. Or directly use the content of the field image for generating the URL to the image being displayed.
Check here for an overview on KendoUI templates.
I've been working on a project using the JQuery plugin datatables and .NET MVC3 framework. I'm using an AJAX controller to do server side processing. I have also been using the "columnfiltering" datatables plugin to do individual column filtering. It works great with text inputs and number ranges. I am having a problem with the select though. I can get a select field to show up and I even know how to give it specific options in this manner
$('#example').dataTable()
.columnFilter({
aoColumns: [ { type: "select", values: [ 'Gecko', 'Trident', 'KHTML', 'Misc', 'Presto', 'Webkit', 'Tasman'] }
});
But I want to have the select auto-populate from the data in the table. Is there any way to do this, I know I could just create another ajax controller and use JQuery to hit that controller to give me the data I want, but I would much rather wrap it into the table controller I already have. Thanks!
You can use fnServerParams if you return json from the MVC controller like this:
return Json(new
{
param.sEcho,
iTotalRecords = baseqry.TotalRecordCount,
iTotalDisplayRecords = baseqry.TotalRecordCount,
aaData = result,
selectListData = MySelectlistData
}, JsonRequestBehavior.AllowGet);
Where aaData is the data to populate the datatable, and selectListData is the data for the selectlist.
In the datatable init code, you get the selectListData value like this:
"fnServerData": function (sSource, aoData, fnCallback) {
$.getJSON(sSource, aoData, function (json) {
var selectlist = json.selectListData;
}
fnCallback(json); // this call populates the datatable
});
In a column a of a grid panel I use a combobox as editor and a renderer to display values :
editor: {
xtype: 'combobox',
alias: 'bienTypeCombobox',
store: 'BienTypesStore',
valueField: 'id_bien_type',
displayField: 'nom',
autoHeight: true,
editable: false,
autoSelect: true,
allowBlank: false
},
renderer: function (value, metaData, record, rowIndex, colIndex, store, view) {
var display = '';
Ext.data.StoreManager.get("BienTypesStore").each(
function (rec) {
if (rec.get('id_bien_type') === value) {
display = rec.get('nom');
return false;
}
});
return display;
}
So, when the cells are edited the combo box is displayed and when the cells are not edited the displayField of this combo box is displayed.
My problem is that for now,, when I click on the header of this column, the rows are sorted by the valueField of the combo box.
I would like to make the user able to sort this column by the displayedField of the combo box.
Please help, thanks
I don't think there is easy solution for this. The only one way I can think of is the following:
Create a virtual field in your model (with display field basically). Create convert function for this virtual field, so when it's set real value field is get updated.
Use this virtual field in the grid without additional rendered
Use editor for this field with both valueField and displayField pointing to this field.
I'm using jqGrid 4.2 with the filterToolbar, which works great. I'd like to add some type of custom search to query (server-side) fields that are not part of the colModel.
Prior to 4.0 I would have used filterGrid along the lines of this:
$('#keyword').jqGrid('filterGrid', '#ticket-grid',
{
gridModel: false,
filterModel: [
{ label: 'Keyword', name: 'keyword', stype: 'text'},
{ label: 'Inclued Closed?',name : 'includeClosed', stype: 'checkbox'}
]
});
I understand that this is no longer supported, and an stype: 'checkbox' doesn't work anyway.
How do I do this with the new search module/mechanism?
If I understand you correct you have already on the page, for example above the grid, some controls (text input, selects, chechboxes) which allow the user to define additional criteria of the results which the user want see in the grid. In the case you can use postData with methods (functions) in the way described in the old answer.
If any kind of grid refreshing: request to filter the data from the searching toolbar, changing of the page or the page size, changing of sorting and so on will always follow to the Ajax request to the server. In the case the properties from postData option of jqGrid will be added like other standard parameters (sidx, sord, page, ...). If one from the properties of the postData is defined as function (if a method of postData) then the function will be called to construct the parameter which will be sent to the server. So the current information from you custom searching controls (text input, selects, chechboxes) will be send to the server. In the way you need only use the parameters on the backend to filter the results.
So you have to define fields yourself. For example the text input with id="keyword-input" and checkbos with id="includeClosed" and then use postData in about the following form:
$('#keyword').jqGrid(
// ... other jqGrid options
postData: {
keyword: function () { return $('#keyword-input').val(); },
includeClosed: function () { return $('#includeClosed')is(':checked'); },
}
});