Hi have a json object which is of type
{
"alpha": [
{
"t1": {},
"t2": {},
"t3": [
{
"type": "a",
"width": "b"
}
]
}
]
}
In my dev extreme I have given the following code:
<dx-data-grid id="gridContainer"
[dataSource]="alpha"
[masterDetail]="{ enabled: true, template: 'detail' }"
keyExpr="ID"
[showBorders]="true">
<dxi-column dataField="t1" caption="Type1"></dxi-column>
<dxi-column dataField="t2" caption="Type2"></dxi-column>
<div *dxTemplate="let al of 'detail'">
<dx-data-grid
------------------------------
[dataSource]="alpha.t3"
[showBorders]="true"
[columnAutoWidth]="true">
<dxi-column dataField="type"></dxi-column>
<dxi-column dataField="width" dataType="date"></dxi-column>
------------------------
[dataSource]="alpha"
[showBorders]="true"
[columnAutoWidth]="true">
<dxi-column dataField="t3.type"></dxi-column>
<dxi-column dataField="t3.width" dataType="date"></dxi-column>
------------------------
</dx-data-grid>
</div>
</dx-data-grid>
Here from the alpha object, I am displaying t1 and t2 as table rows while t3 is shown only when the row is expanded. Once the row expands, it will show type = a and width = b.
I have tried two ways to solve the situation separated by --------------- but both are not working.
I am able to display the t1 and t2 in the outside rows but t3 table only shows type and width, the values are coming as empty.
I think the first solution is very close , you did a loop of template but you've never used.
Try this one:
[dataSource]="al"
[showBorders]="true"
[columnAutoWidth]="true">
<dxi-column dataField="type"></dxi-column>
<dxi-column dataField="width" dataType="date"></dxi-column>
What's more, i think there's maybe a problem with the original dataSource cause it's sometime an array, sometimes an object, maybe it's better to be changed as one choice between these two.
Related
I am using this vue select https://vue-select.org/guide/values.html#getting-and-setting for the dropdown countries. Here is the code:
<v-select
v-model="project_data.country"
:options="project_data.countries"
:reduce="country => country.value"
label="label"
:state="errors.length > 0 ? false : null"
/>
This project_data.country value is : 5
This project_data.countries value is array of object. Something like :
[
{ value : 1, label : Dhaka },
{ value : 2, label : India },
and so on ......
]
Now on my local, I can see the label on the dropdown BUT when I complied the code using :
npm run prod
and compressed the whole project and upload to live server then I can see the ID instead of the label. Something like this:
Does anyone know why? I am spending tooooo many hours to figure it out :( :( :(
My goal is to get the single ID value from the dropdown ( I can ) and save it to the database and then again show the label ( I can't ) based on the single ID value.
A common issue with that select and its in the Docs, its that you need to make sure that the value for v-model:
If options has by example only these 2:
[
{ value : 1, label : Dhaka },
{ value : 2, label : India }
]
and project_data.country is 3 the select will show the value 3 since the Vue Select searched for it and didnt find it.
So make sure in prod you have 5 in the list of countries.
I have existing data objects and a function which is looping through by employee and doing some light math (all of this is currently working as it needs to)
The thing that I need to add into this is allow my loop to do another check as it moves through. As I'm moving through my data_record object, I need to check the ID in my Data_record object against the ID in the boxes. If they match, I need to check stock_numbers against box_numbers. If stock_numbers is greater than box_numbers then I want to put "Not Available" as a string into my computed object so that I can show that in my template instead of the data.
I have a sandbox linked below where one file is doing this code shown below, but the file main.js is trying to match up the entries so that I can then compare data on the matches, however, it is currently only returning the entries of the first one that don't have a match
How can I properly match entries between objects and compare data of those matches while still performing this current reduce function?
<tr v-for="(labels, employee) in numbersByEmployee" :key="employee">
<td>#{{ employee }}</td>
<td v-for="date in dates" :key="date">#{{ labels[date] && labels[date].qty * labels[date].labels }}</td>
<td>#{{ labels.total }}</td>
</tr>
new Vue({
el: "#app",
data: {
data_record: [
{
employee: "Adam",
ID: "Ac1874/12-15",
Shelf_Date: "2021-07-14",
stock_numbers: 100,
labels: 25
}
],
boxes: [
{
ID: "Ac1874/12-15",
box_numbers: 50,
reception_date: "2021-07-20"
}
],
dates: ["2021-07-14", "2021-07-15"]
},
computed: {
numbersByEmployee() {
return this.data_record.reduce((r, o) => {
r[o.employee] ??= {};
r[o.employee][o.Shelf_Date] ??= {
stock_numbers: 0,
labels: 0,
total: 0
};
r[o.employee][o.Shelf_Date].stock_numbers += +o.stock_numbers;
r[o.employee][o.Shelf_Date].labels += +o.labels;
r[o.employee].total ??= 0;
r[o.employee].total += +o.stock_numbers * +o.labels;
return r;
}, {});
}
}
});
Code sandbox with this portion of code, as well as a work in progress for the matching (the main.js file is where I'm just trying to match up the two objects but it's currently showing the entries that don't match)
https://codesandbox.io/s/charming-glitter-83nzg?file=/src/main.js
EDIT (output for reduce function)
Currently, numbersByEmployees dumps
"Adam": { "2021-07-14": { "labels": 5, "stock_numbers": 40, "total": 0 }, "total": 200 }
You can use array.prototype.find to look in the box array for the id of the current item in record_data
I've forked your examaple to demonstrate this. I renamed some of the variables to match your code on stackoverflow.
https://codesandbox.io/s/agitated-diffie-ntmru
Let me know if I can edit this to better fit your need.
I need to create a filter on a tipical columns created with images: each field is an image with this format:
<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>
I've created a fiddle example here: fiddle
An explication:
there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).
Thanks in advance.
PD:
I'm getting data from a json, so I can't put:
<td data-search="notassigned">
directly on HTML code. As a solution, I've used createdCell (columnDefs option) as you could see on the next updated to create data-search attribute on td element fiddle.
In this one, as you could test, your previously created filter doesn't work. I've tried some solutions, but no one has worked.
Please help me again on this one. Thanks in advance.
You can make use of the datatables HTML5 data-* attributes, and then tell yadcf to rely on this dt feature with the use of html5_data
So your td will look something like
<td data-search="assigned"><img src='http://lab.onclud.com/psm/redcircle.png' class='asgn'></td>
and yadcf init will look like
var oTable = $('#example').DataTable();
yadcf.init(oTable, [
{
column_number: 0,
html5_data: 'data-search',
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}]);
Notice that I used filter_match_mode: 'exact', because I used data-search="notassigned" and data-search="assigned", and since the assigned word included inside notassigned I had to tell yadcf to perform an exact search, this can be avoided if you will use unique search term in your data-search= attribute,
See working jsfiddle
Another solution as introduced by kthorngren from datatables forum is to use the following dt init code
var oTable = $('#example').DataTable({
columnDefs: [{
targets: 0,
render: function(data, type, full, meta) {
if (type === 'filter') {
return full[0].search('asgn') >=1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
} else {
return data
}
}
}],
});
and yadcf init (removed html5_data)
yadcf.init(oTable, [
{
column_number: 0,
filter_match_mode: 'exact',
data: [{
value: 'assigned',
label: 'Assigned'
}, {
value: 'notassigned',
label: 'Not assigned'
}]
}
]);
third option - look here
I have an SQL query that grabs some data (language column in dbtable table). The query uses GROUP_CONCAT, so one cell has several results, e.g.
"Ajax, jQuery, HTML, CSS".
What I want to do is to show the result in new lines, like:
"Ajax
jQuery
HTML
CSS"
How can I do that?
I tried to make it by changing "columns": [{ "data": "id" }, { "data": "languages" }... but it didn't work.
I also tried to fix it by adding "< br >" in query as a Separator, but didn't work.
Thank you!
You can use columns.render function for the column like this:
var table = $('#example').DataTable({
columns: [
null,
null,
{
"render": function(data, type, row){
return data.split(", ").join("<br/>");
}
}
]
});
Working example.
Hope that helps and that I've understood your problem.
To implement new line in a column for DataTables
Assume that there are 7 columns in a row and the 4th column has the data
"Ajax, jQuery, HTML, CSS"
so the 3 columns before and 3 columns after has to be made null in the code
$('#example').DataTable({
columns: [
null, null, null,
{
"render": function(data, type, row){
return data.split(", ").join("<br/>");
}
},
null, null, null
]
});
#annoyingmouse answer is perfect taking into account the question description!
Just an extra answer following "strictly" the question (as it is) which says:
How can I implement new line in a column (DataTables)
You have just to add a wrap class on the <table> tag. Tada! Each column text will be wrapped when reaching its predefined width.
May I know if it is possible to put pictures or images into the rows of DataTables (http://datatables.net/) and how does one goes in doing it?
yes, simple way (Jquery Datatable)
<script>
$(document).ready(function () {
$('#example').dataTable({
"processing": true, // control the processing indicator.
"serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
"info": true, // control table information display field
"stateSave": true, //restore table state on page reload,
"lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], // use the first inner array as the page length values and the second inner array as the displayed options
"ajax":{
"url": "#string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Home/AjaxGetJsonData",
"type": "GET"
},
"columns": [
{ "data": "Name", "orderable" : true },
{ "data": "Age", "orderable": false },
{ "data": "DoB", "orderable": true },
{
"render": function (data, type, JsonResultRow, meta) {
return '<img src="Content/Images/'+JsonResultRow.ImageSrcDB+'">';
}
}
],
"order": [[0, "asc"]]
});
});
</script>
[edit: note that the following code and explanation uses a previous DataTables API (1.9 and below?); it translates easily into the current API (in most cases, just ditch the Hungarian notation ("fnRowCallback" just becomes "rowCallback" for example) but I have not done so yet. The backwards compatibility is still in place I believe, but you should look for the newer conventions where possible]
Original reply follows:
What Daniel says is true, but doesn't necessarily say how it's done. And there are many ways. Here are the main ones:
1) The data source (server or otherwise) provides a complete image tag as part of the data set. Don't forget to escape any characters that need escaping for valid JSON
2) The data source provides one or more fields with the information required. For example, a field called "image link" just has the Images/PictureName.png part. Then in fnRowCallback you use this data to create an image tag.
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
var imgLink = aData['imageLink']; // if your JSON is 3D
// var imgLink = aData[4]; // where 4 is the zero-origin column for 2D
var imgTag = '<img src="' + imgLink + '"/>';
$('td:eq(4)', nRow).html(imgTag); // where 4 is the zero-origin visible column in the HTML
return nRow;
}
3) Similar to above, but instead of adding a whole tag, you just update a class that has the image as a background. You would do this for images that are repeated elements rather than one-off or unique pieces of data.
You mean an image inside a column of the table?
Yes, just place an html image tag
like this
<img src="Images/PictureName.png">
instead of putting data (some string) into a column just put the above html tag....
Asp.net core DataTables
The following code retrieve the image from a folder in WWWroot and the path in the DB field ImagePath
{
"data": "ImagePath",
"render": function (data) {
return '<img src="' + data + '" class="avatar" width="50" height="50"/>';
}
}
In case the Name of the picturefile is put together out of one or more informations in the table, like in my case:
src="/images/' + Nummer + Belegnummer + '.jpg"
you can make it that way:
var table = $('#Table').DataTable({
columnDefs: [
{
targets: 0,
render: getImg
}
]
});
function getImg(data, row, full) {
var Nummer = full[1];
var Belegnummer = full[4];
return '<img src="/images/' + Nummer + Belegnummer + '.jpg"/>';}
The picture is in the first column, so Targets = 0 and gets the Information from the same row.
It is necessary to add the parameters data and row.
It is not necessary to outsource it into a seperate function, here getImg, but it makes it easier to debug.