I am building a grid in my app using Ag Grid, everything works really nice but in a particular cell I'd like to show a green tick when the data from the DB is equal to true:
params.data.isLoad === 'true' ? '"✅";' : '"❌";'
But the cell is loading the string ✅ instead of the image ✅
The code from the grid:
const customActions = (iden) => {
return iden.value;
};
const detailCellRendererParams = useMemo(() => {
return {
detailGridOptions: {
columnDefs: [
{ field: 'origin' },
{ field: 'prize', minWidth: 150 },
{ field: 'rating', cellRenderer: RatingComponent},
{ field: 'street', minWidth: 150 },
{ field: 'loaded', minWidth: 150, cellRenderer: customActions },
{ field: 'region', minWidth: 150 },
],
defaultColDef: {
flex: 1,
},
},
getDetailRowData: function (params) {
params.data.loaded = params.data.loaded === 'true' ? '✅' : '❌'
params.successCallback([params.data]);
},
};
}, []);
Thanks for the help in advance
Related
Laravel Yajra DataTable Duplicating Data when changing the page number.
page 01 data response
page 02 data response
Some data will appear on all pages (duplicate) ..for example, id 513.
if ($request->ajax()) {
$data = Lead::with('getSource', 'getPreferredProject', 'tasks')
->where('is_verified', 1)
->whereNull('attended_by')
->whereNull('leads_maker_status')
->where(function ($q) {
$q->where('lead_stage_id','!=',6)->orWhereNull('lead_stage_id');
})
->orderBy('verified_at', 'DESC');
return DataTables::of($data)
->addIndexColumn()
->editColumn('lead_date', function ($data) {
return $data->lead_date != '0000-00-00' ?date('d-m-Y', strtotime($data->lead_date)) : '';
})
->editColumn('verified_at', function ($data) {
return $data->verified_at != '0000-00-00' ? date('d-m-Y', strtotime($data->verified_at)) : '';
})
->rawColumns(['lead_date','verified_at'])
->make(true);
}
Request Function
function getLeadsMakerData() {
$('#leadsMakerTable').DataTable({
processing: true,
serverSide: true,
pageLength: 10,
paging: true,
responsive: true,
scrollX: false,
ajax: {
url: "{{ route('leads-maker.index') }}",
},
columns: [
{
data: 'DT_RowIndex',
name: 'DT_RowIndex',
orderable: false,
searchable: false
},
{
data: 'enquirer_name',
name: 'enquirer_name'
},
{
data: 'lead_date',
name: 'lead_date'
},
{
data: 'verified_at',
name: 'verified_at'
},
{
data: 'mobile',
name: 'mobile'
},
{
data: 'email',
name: 'email'
},
{
data: 'source',
name: 'source'
},
{
data: 'preferred_project',
name: 'preferred_project'
},
{
data: 'action',
name: 'action',
searchable: false,
orderable: false,
},
],
"drawCallback": function (settings) {
$('.dropdown-trigger').dropdown();
},
lengthMenu: [5, 10, 25, 50, 75, 100]
});
}
this is the source code I am using to send the request
and I am calling this method inside $( document ).ready().
how to display the following json data ?
i have json data like this, and want to display it in table, i use vue-bostrapt .
Previously I tried like this, but it's not perfect.
this my json
[
{
"id":"1",
"name": "KINTIL",
"desc": "Kintil is good",
"location": [
{
"prov": "Jawa Barat",
"city": "Bandung"
},
{
"prov": "Banten",
"city": "Tanggerang"
}
],
"applied": [
{
"item_name": "galian"
},
{
"item_name": "timbunan"
}
],
"exception": [
{
"ex_name": "F001",
"ex_value": "001001"
},
{
"ex_name": "M001",
"ex_value": "002002"
}
]
}
]
and this html
<b-table class="table spacing-table" style="font-size: 13px;" show-empty
:items="inovasi" :fields="fields" :current-page="currentPage" :per-page="0" :filter="filter" >
</b-table>
and this my script
import json from "../static/data.json";
export default {
name: 'tes',
data() {
return {
inovasi:[],
filter: null,
fields: [
{
key: 'id',
label: 'id',
sortable: true
},
{
key: 'name',
label: 'name',
sortable: true
},
{
key: 'location',
label: 'location',
sortable: true
},
{
key: 'applied',
label: 'applied',
sortable: true
},
{ key: 'actions', label: 'Doc' }
],
currentPage: 0,
perPage: 5,
totalItems: 0
}
},
mounted() {
this.inovasi = json;
},
computed:{
},
methods: {
}
}
this result
how to display location and applied , into a single row table ?
thanks in advance for those who have answered :)
thanks
You can do it using formatter like
fields: [
{
key: 'id',
label: 'id',
sortable: true
},
{
key: 'name',
label: 'name',
sortable: true
},
{
key: 'location',
label: 'location',
sortable: true,
formatter: (value, key, item) => {
return value.map(x => 'prov: ' + x.prov + ' city:' + x.city).join(", ")
}
},
{
key: 'applied',
label: 'applied',
sortable: true,
formatter: (value, key, item) => {
return value.map(x => x.item_name).join(", ")
}
},
{ key: 'actions', label: 'Doc' }
],
It will show for the location column this: prov: Jawa Barat city:Bandung, prov: Banten city:Tanggerang and for the applied column this: galian, timbunan
What is the quickest and easiest way to implement an editable tree grid in Angular 7 (and above) ? I have tried to use ng angular-tree-grid, but got stuck, at the below code i implemented so far.
Template:
<db-angular-tree-grid #angularGrid [data]="data"
[configs]="configs"
(rowdelete)="onRowDelete($event)"
(rowsave)="onRowSave($event)"
(rowadd)="onRowAdd($event)">
</db-angular-tree-grid>
I have been unable to get the onRowAdd() and onRowDelete() methods to work. I need to call a POST endpoint on my c# webApi, within onRowAdd().
Typescript:
export class GridComponent {
#ViewChild('angularGrid') angularGrid: AngularTreeGridComponent;
data: any = [
{ id: 1, planName: 'Functional Test',parent: 0},
{ id: 2, planName: 'Non Functional Test', parent: 0},
{ id: 3, planName: 'Component', parent: 1}
];
configs: any = {
id_field: 'id',
parent_id_field: 'parent',
parent_display_field: 'planName',
actions: {
add: true,
edit: true,
delete: true,
edit_parent: true,
add_parent: true,
delete_parent: true,
resolve_add: true,
resolve_delete: true,
resolve_edit: true
},
css: { // Optional
expand_class: 'fa fa-caret-right',
collapse_class: 'fa fa-caret-down',
add_class: 'fa fa-plus',
edit_class: 'fa fa-pencil',
delete_class: 'fa fa-trash',
save_class: 'fa fa-save',
cancel_class: 'fa fa-remove',
},
columns: [
{
name: 'planName',
header: 'PlanName',
editable: true
}
]
};
onRowAdd($e) {
const data = $e.data;
setTimeout(() => {
$e.resolve();
}, 1000);
}
onRowSave($e) {
const data = $e.data;
setTimeout(() => {
$e.resolve();
}, 1000);
}
onRowDelete($e) {
setTimeout(() => {
$e.resolve();
}, 1000);
}
}
enter image description here
A large white space after the column name row in the uigrid and then after all the datas are displayed,how can i solve this issue,anybody please help me.
Angular //////////////
app.controller('MainCtrl', function ($scope, $http, uiGridConstants) {
$scope.gridOptions = {
showColumnFooter: true,
exporterMenuCsv: true,
enableGridMenu: true,
enableFiltering: true,
showGridFooter: false,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.grid.registerRowsProcessor($scope.singleFilter, 200);
},
paginationPageSizes: [25, 50, 75],
paginationPageSize: 10,
showColumnFooter: true,
columnDefs: [
{
field: 'Name',
},
{
field: 'IE',
visible: false,
enableCellEdit: false,
enableFiltering: false
},
{
field: 'Amount',
enableFiltering: false,
}
]
};
var gridOptions = [];
$scope.gridOptions.data = 'gridData';
Here is my html and angular code i was currently working .
In my js. i am loading data using kendoGridOptions. I have mapped the data source which fetches all the records. I have configured pageable = true. However noticed that when page load the pagination option are not available they become available only on when i sort one of the columns. following is the configuration of my grid and data source
var enhancedGridOptions = mydataKendoGridManager.kendoGridOptions({
dataSource: myGridDataSource,
sortable: true,
scrollable: true,
editable:false,
resizable: true,
reorderable: true,
pageable: true,
columnResize: function (e) {
adjustLastColumn(e, this);
},
columns:
[
{
field: "dealType",
title: $.i18n.prop('buyType.label'),
width: "108px"
},
{
field: "myStatus",
title: $.i18n.prop('myStatus.label'),
width: "105px"
},
{
field: "action",
title: $.i18n.prop('action.label'),
width: "105px"
},
],
pdf:
{
fileName: "my_List_" + (new Date()).toString(myformat + "_HH:mm") + ".pdf",
allPages: true,
},
excel:
{
fileName: "my_List_" + (new Date()).toString(myformat + "_HH:mm") + ".xlsx",
allPages: true,
}
}
and my data source is configured as below
transport: {
read: function (e) {
myapi.rootGet("data/mylist?dealId=" + id, function (response) {
var data;
// console.log(response.data)
if (_.isString(response.data)) {
response.data = JSON.parse(response.data);
data = response.data;
setTimeout(function () {
e.success(data);
}, 10000);
}
else {
e.error("XHR response", response.status, JSON.parse(response.data));
}
});
},
},
schema:
{
model: {
id: "id",
fields: {
dealType: {
type: "string"
},
myStatus: {
type: "string"
},
action: {
type: "string"
},
}
},
parse:function(data)
{
return parseData(data);
}
},
serverSorting: false,
serverFiltering: false,
serverPaging: false
};
appreciate if someone can guide what is missing on pagination that does not work on page load.
Thanks,
Anjana
If you are getting "NaN - NaN of 500 items" like error at left bottom corner in grid, then you should add pageSize in dataSource Property.
var enhancedGridOptions = mydataKendoGridManager.kendoGridOptions({
dataSource: {
data: myGridDataSource,
pageSize: 50
},
....
....
....
pageable: {
pageSizes: [20, 30, 50, 100],
buttonCount: 5
}
});