I'm trying to create custom table length dropdown which is not in the table header, I overwrite the header with
templates: {
header: ""
},
so I would like to replicate it in some other place. How can I do that is it possible? Thanks in advance.
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 have a project that sells products.
A product can have a price and optional: new_price. I would like to be able to sort them by price/new_price combined, meaning that I would need an additional entry in the DB like "final_price". I got an idea to create a non-editable field "new_price" in Content-Type Builder/schema.json and then update that with the final price for the product on "beforeCreate" in the lifecycles.js. However, I am not sure Strapi allows that, as I haven't been able to find a resource pointing in the documentation that it can. If there is a hacky way to do it, please advise. I am open to all kinds of other suggestions on how to do this Business logic as well.
Thank you in advance.
There is a way in strapi to make the field non editable on UI. You can go to Content-type-builder-> Your component-> Configure the view. And click on the text field. You can just make editable field as false.
I see two options:
(a) Add the field and forget about it being non-editable. You can calculate the final_price on insertion of an entry in your collection with Lifecycle hooks: https://docs.strapi.io/developer-docs/latest/development/backend-customization/models.html#lifecycle-hooks.
(b) Don't add a new field, but override the controller to return an additional field: https://docs.strapi.io/developer-docs/latest/development/backend-customization/controllers.html#extending-core-controllers.
Ok, so I found a "hacky" way to do this. I don't like it, as it is not that beautiful and sophisticated, but it does the job.
In product schema.json I added a
"final_price": {
"type": "decimal"
}
In lifecycles.js, I created a new function that will calculate my final price and write it in "final_price" attribute:
module.exports = {
beforeCreate(event) {
priceCalc(event);
},
beforeUpdate(event) {
priceCalc(event);
},
};
const priceCalc = (event) => {
const { data } = event.params;
data.final_price = data.new_price ? data.new_price : data.price;
};
In the admin panel, in Content-Type Builder in Product, I clicked "Configure the view" and deleted the Final Price field from Displayed Fields section. This made the field hidden, lol.
Now I am sorting all products with sort: ['final_price:asc']
That is it.Hope it helps anyone!
Im working in Ext Js.When i click column header for sorting alphabetically.some local character doesnt working properly.
ForExample :
Emma-Sarah-Tom-Şehmus
'Ş' is local charecter.
And i try to trigger 'headerclick' event as below
listeners: {
headerclick : function(grid,col,e){
this.store.setSorterFn(function (record1, record2) {
var productLine1 = record1.get(col.formName),
productLine2 = record2.get(col.formName);
return productLine1.localeCompare(productLine2);
});
}
but i cant manage sorting when i click header of column
You need not handle the headerclick you can handle the custom sorting using the sorter config of the column .
Reference :- https://docs.sencha.com/extjs/6.7.0/classic/Ext.grid.column.Column.html#cfg-sorter
Hope this would help You
I have a form which is built as a directive. I am providing the data for layout in my controller.
MyController.js
[{
"type":"selectbox",
"name":"name_one",
"label":"Name One"
}]
This data is then passed to my form_directive which then loads the template.
Then I am getting the actual data to be populated from an ajax call, inside MyController.js
eg:
$http.get('url/location').success(function(data) {
}).error(function(data) {
});
The data that is coming from the ajax will be like this:
[{
"id":"090986735",
"name":"option_1"
},{
"id":"78645679",
"name":"option_2"
}]
Now my question is how to bind this data to the selectbox?
Please note that there will be many such controls. But I have shown only one select box
Try to change the model of select.
https://docs.angularjs.org/api/ng/directive/select - the example with colors should be useful for you.
http://jsfiddle.net/valchev/s7ZCV/15/,
the above link is the simple example of Kendo grid with row template.All I wanted to do is make a specific column non-editable. the usual way is just define a model and further inside fields add editable False to the required field. i just wanted to know is there any other way to make a column editable as false because i dont want to add one more model in kendo as I am using models in entity level and Jay-data Level.
var dataSource = new kendo.data.DataSource({
data: records,
schema: {
model: {
id: "foo",
fields: {
foo: {type: "number"},
CostCategoryAbv: {type: "string",editable:false}, // i dont want this
VendorName: {type: "string"}
}
}
}
});
I've been doing a lot of work with the Kendo Grid using MVC. I've been getting around this by using a custom popup editor. The editor only allows the user to modify the fields that I want them to. Another way of getting around this is by changing the controller so that any user edit does not modify the field when the data source is updated. I know that the code provided is not using C# or MVC, but I hope this helps. I think you may be able to modify the save method so that it only saves select fields.