We Keep Coding

Show data to Ag Grid Vue

I am trying to load data into the VueJS table using the ag Grid vue plugin that I have in a template, I have tried several ways but I am not getting the result I am looking for ..., getting the following result:
{
"users": [
{
"id": 1,
"client_id": 1,
"cop_id": null,
"role_id": null,
"name": "Bart",
"email": "correo.123#gmail.com",
"created_at": null,
"updated_at": null
}
]
}
then I have my Vue view in this way, and sorry for including all the code, but since the template is working with everything that comes, I prefer to deliver all the detail, I have tried to make changes to the created method with axios, but I did not It works, unfortunately I can't load the data into the table, I hope you can guide me to fix my loading error.
<template>
<div id="page-user-list">
<!-- AgGrid Table -->
<ag-grid-vue
ref="agGridTable"
:components="components"
:gridOptions="gridOptions"
class="ag-theme-material w-100 my-4 ag-grid-table"
:columnDefs="columnDefs"
:defaultColDef="defaultColDef"
:rowData="rowData"
rowSelection="multiple"
colResizeDefault="shift"
:animateRows="true"
:floatingFilter="true"
:pagination="true"
:paginationPageSize="paginationPageSize"
:suppressPaginationPanel="true"
:enableRtl="$vs.rtl">
</ag-grid-vue>
<vs-pagination
:total="totalPages"
:max="10"
v-model="currentPage" />
</div>
</template>
<script>
import { AgGridVue } from "ag-grid-vue"
import '#sass/vuexy/extraComponents/agGridStyleOverride.scss'
import vSelect from 'vue-select'
import axios from 'axios'
// Store Module
//import moduleUserManagement from '#/store/user-management/moduleUserManagement.js'
// Cell Renderer
import CellRendererLink from "./cell-renderer/CellRendererLink.vue"
import CellRendererStatus from "./cell-renderer/CellRendererStatus.vue"
import CellRendererVerified from "./cell-renderer/CellRendererVerified.vue"
import CellRendererActions from "./cell-renderer/CellRendererActions.vue"
export default {
components: {
AgGridVue,
vSelect,
// Cell Renderer
CellRendererLink,
CellRendererStatus,
CellRendererVerified,
CellRendererActions,
},
data() {
return {
// Filter Options
roleFilter: { label: 'Todos', value: 'all' },
roleOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Administador', value: 'admin' },
{ label: 'Usuario', value: 'user' },
{ label: 'Staff', value: 'staff' },
],
statusFilter: { label: 'Todos', value: 'all' },
statusOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Activo', value: 'active' },
{ label: 'Desactivado', value: 'deactivated' },
{ label: 'Bloqueado', value: 'blocked' },
],
isVerifiedFilter: { label: 'Todos', value: 'all' },
isVerifiedOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Si', value: 'yes' },
{ label: 'No', value: 'no' },
],
departmentFilter: { label: 'Todos', value: 'all' },
departmentOptions: [
{ label: 'Todos', value: 'all' },
{ label: 'Vendido', value: 'sales' },
{ label: 'Departamento', value: 'development' },
{ label: 'Administrado', value: 'management' },
],
searchQuery: "",
// AgGrid
gridApi: null,
gridOptions: {},
defaultColDef: {
sortable: true,
resizable: true,
suppressMenu: true
},
columnDefs: [
{headerName: 'ID', field: 'id', width: 125, filter: true, checkboxSelection: true, headerCheckboxSelectionFilteredOnly: true, headerCheckboxSelection: true },
{headerName: 'Username', field: 'client_id', filter: true, width: 210, cellRendererFramework: 'CellRendererLink'},
{headerName: 'Email', field: 'email', filter: true, width: 225 },
{headerName: 'Nombre', field: 'name', filter: true, width: 200 },
{headerName: 'Comuna', field: 'cop_id', filter: true, width: 150},
{headerName: 'Role', field: 'role_id', filter: true, width: 150},
{headerName: 'Acciones', width: 150, cellRendererFramework: 'CellRendererActions'},
],
// Cell Renderer Components
components: {
CellRendererLink,
CellRendererStatus,
CellRendererVerified,
CellRendererActions,
}
}
},
watch: {
roleFilter(obj) {
this.setColumnFilter("role", obj.value)
},
statusFilter(obj) {
this.setColumnFilter("status", obj.value)
},
isVerifiedFilter(obj) {
let val = obj.value === "all" ? "all" : obj.value == "yes" ? "true" : "false"
this.setColumnFilter("is_verified", val)
},
departmentFilter(obj) {
this.setColumnFilter("department", obj.value)
},
},
computed: {
usersData() {
return this.users.data
},
paginationPageSize() {
if(this.gridApi) return this.gridApi.paginationGetPageSize()
else return 10
},
totalPages() {
if(this.gridApi) return this.gridApi.paginationGetTotalPages()
else return 0
},
currentPage: {
get() {
if(this.gridApi) return this.gridApi.paginationGetCurrentPage() + 1
else return 1
},
set(val) {
this.gridApi.paginationGoToPage(val - 1)
}
}
},
methods: {
setColumnFilter(column, val) {
const filter = this.gridApi.getFilterInstance(column)
let modelObj = null
if(val !== "all") {
modelObj = { type: "equals", filter: val }
}
filter.setModel(modelObj)
this.gridApi.onFilterChanged()
},
resetColFilters() {
// Reset Grid Filter
this.gridApi.setFilterModel(null)
this.gridApi.onFilterChanged()
// Reset Filter Options
this.roleFilter = this.statusFilter = this.isVerifiedFilter = this.departmentFilter = { label: 'All', value: 'all' }
this.$refs.filterCard.removeRefreshAnimation()
},
updateSearchQuery(val) {
this.gridApi.setQuickFilter(val)
}
},
created(){
//let users = /apps/user/user-list/
axios.get('api/users')
.then(res => {
let users = res.data.users;
})
}
}
</script>
<style lang="scss">
#page-user-list {
.user-list-filters {
.vs__actions {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-58%);
}
}
}
</style>

Sorting custom (currency) formatted column in backgrid

I'm using Backgridjs to display data from json object to table. I'm currently using a formatter to format string-numbers into currency. Once I did that the sorting no longer work properly as it sorting as a string rather than number. How can I enable sorting with backgrid after formatting my column ?
Backgrid support numbers, int, date/momentjs. Couldn't find extension for currency
this is my formatter class
formatter: _.extend({}, Backgrid.CellFormatter.prototype, {
fromRaw: function(rawData) {
var re = /\-/;
if (rawData === "" || rawData == null) {
return "";
} else if (rawData.match(re)) {
return "-" + accounting.formatMoney(rawData.substr(1));
} else {
return accounting.formatMoney(rawData);
}
},
toRaw: function(formattedData) {
return formattedData;
}
}),
And this is my grid
var grid = new Backgrid.Grid({
collection: collection,
columns: [
{
name: "cost",
label: "Cost",
cell: "number",
formatter: currencyFormater
sortable: true
},
{
name: "type",
label: "Type",
cell: Backgrid.NumberCell,
sortable: true
}
]});
Example of data:
{ id: 1, cost: "150", type: 3 },
{ id: 2, cost: "12516.30", type: 2 },
{ id: 3, cost: "21400.85", type: 1 },
{ id: 4, cost: "146558.50", type: 1 },
{ id: 5, cost: "139982.75", type: 1 }

I ended up using sortValue to do specific sorting base on value. In my case I used parseFloat with the string value.
var grid = new Backgrid.Grid({
collection: collection,
columns: [
{
name: "cost",
label: "Cost",
cell: "number",
sortValue: function(model) {
return parseFloat(model.get("cost"));
},
formatter: currencyFormater
sortable: true
},
…
]});

Kendo UI Dropdownlist checked

I have a kendo ui function dropdownlist, and it will call at Grid column editor. My question, by default how to display "Yes" when Add New Record in edit function. Currently it display null when Add New Record.
Demo in Dojo
Here I provide a working demo. Thank You

If I understand correctly you only have to add a default value to the Price in the Model?
"Price": {type: "string", defaultValue: "y" },
I include the whole function, just in case:
$(function() {
$("#grid").kendoGrid({
dataSource: {
data: [
{ Name: "Young John", Price: "y" },
{ Name: "John Doe", Price: "n" },
{ Name: "Old John", Price: "y" }
],
schema: {
model: {
id: "id",
fields: {
"id": { type: "number" },
"Price": {type: "string", defaultValue: "y" },
}
}
}
},
editable: "inline",
toolbar: ["create"],
columns: [{ field: "Name"},
{ field: "Price",
template: "#=(data.Price == 'y' ? 'Yes' : 'No')#",
editor: radioPrice
} ],
edit: function(e) {
if (e.model.isNew()) {
e.model.Price = 'y';
}
}
});
});

how to get an array from controller to ajax function in laravel 4

Hey there i'am using laravel 4 and i'am still beginner in all this.
what i want to do is to get an array of data from my controller to my ajax function for helping me drawing my chart
here is my controller function
public function getAPI()
$stats = DB::table('reponse')
->groupBy('date')
->orderBy('date', 'ASC')
->remember(1440)
->get([
DB::raw('Date(created_at) as date'),
DB::raw('etatSatisfaction as value')
]);
return $stats;
}
and this is my view i want to replace the static data with the data from my array
<script >
var chartData1 = [];
generateChartData();
function generateChartData() {
var firstDate = new Date();
firstDate.setDate(firstDate.getDate() - 500);
firstDate.setHours(0, 0, 0, 0);
for (var i = 0; i < 500; i++) {
var newDate = new Date(firstDate);
newDate.setDate(newDate.getDate() + i);
var a1 = Math.round(Math.random() * (40 + i)) + 100 + i;
var b1 = Math.round(Math.random() * (1000 + i)) + 500 + i * 2;
chartData1.push({
date: newDate,
value: a1,
volume: b1
});
}
}
var chart = AmCharts.makeChart("chartdiv", {
type: "stock",
"theme": "none",
dataSets: [{
title: "first data set",
fieldMappings: [{
fromField: "value",
toField: "value"
}, {
fromField: "volume",
toField: "volume"
}],
dataProvider: chartData1,
categoryField: "date"
},
],
panels: [{
showCategoryAxis: false,
title: "Value",
percentHeight: 70,
stockGraphs: [{
id: "g1",
valueField: "value",
comparable: true,
compareField: "value",
balloonText: "[[title]]:<b>[[value]]</b>",
compareGraphBalloonText: "[[title]]:<b>[[value]]</b>"
}],
stockLegend: {
periodValueTextComparing: "[[percents.value.close]]%",
periodValueTextRegular: "[[value.close]]"
}
},
{
title: "Volume",
percentHeight: 30,
stockGraphs: [{
valueField: "volume",
type: "column",
showBalloon: false,
fillAlphas: 1
}],
stockLegend: {
periodValueTextRegular: "[[value.close]]"
}
}
],
chartScrollbarSettings: {
graph: "g1"
},
chartCursorSettings: {
valueBalloonsEnabled: true,
fullWidth:true,
cursorAlpha:0.1
},
periodSelector: {
position: "left",
periods: [{
period: "MM",
selected: true,
count: 1,
label: "1 month"
}, {
period: "YYYY",
count: 1,
label: "1 year"
}, {
period: "YTD",
label: "YTD"
}, {
period: "MAX",
label: "MAX"
}]
},
dataSetSelector: {
position: "left"
}
});
chart.addListener('rendered', function (event) {
var dataProvider = chart.dataSets[0].dataProvider;
$( ".amChartsPeriodSelector .amChartsInputField" ).datepicker({
dateFormat: "dd-mm-yy",
minDate: dataProvider[0].date,
maxDate: dataProvider[dataProvider.length-1].date,
onClose: function() {
$( ".amChartsPeriodSelector .amChartsInputField" ).trigger('blur');
}
});
});
</script>
#stop
Can anyone help please

Since you already defined your controller function,now you need to specify the route for this action.
A route -in brief- is the way the requests made by the browsers
get to communicate with the methods of the controllers.
In the routes.php file (In Laravel 5 you can find it in App\Http\routes.php)
you could a create new route. Check Laravel Routing Docs
Route::post('/FunctionAPI', 'MyController#getAPI');
Then in your JS file you could create a method like this
public function getData()
{
$.ajax(
{
type :"POST",
url: "/FunctionAPI":
success:function(data)
{
for(var index = 0; index < data.length; index++)
{
//Clean the array in case you need to
charData1 = [];
chartData1.push({
date: data[index].date,
value: data[index].value,
volume: data[index].volume
});
}
}
})
}
the data parameter in the success function is what your getAPI function would return.
NOTE
You should know the format in which your data is coming, that way you could know how you're going to populate your chart. (In case you don't know)
UPDATE
In order to populate your chart, I'll asume your data is retrieving this way:
[
{
date: "2014-04-04",
value: "Some Value",
volume: "Some Volume"
},
{
date: "2014-04-04",
value: "Some Value",
volume: "Some Volume"
},
{
date: "2014-04-04",
value: "Some Value",
volume: "Some Volume"
},
{
date: "2014-04-04",
value: "Some Value",
volume: "Some Volume"
}
]

Binding list to drop down using append grid library

Hi I am using jquery appendGrid plugin to show drop down in one of the column. In following code the column name "Origin" has drop down option which works fine.
$(function () {
// Initialize appendGrid
$('#tblAppendGrid').appendGrid({
caption: 'My CD Collections',
initRows: 1,
columns: [
{ name: 'Album', display: 'Album', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '160px'} },
{ name: 'Artist', display: 'Artist', type: 'text', ctrlAttr: { maxlength: 100 }, ctrlCss: { width: '100px'} },
{ name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { 0: '{Choose}', 1: 'Hong Kong', 2: 'Taiwan', 3: 'Japan', 4: 'Korea', 5: 'US', 6: 'Others'} }
]
});
However the I have a different list that I need to populate that is drop down the partial list is
"country": [
{
"value": "10",
"label": "United States"
},
{
"value": "10",
"label": "UK"
},
{
"value": "20",
"label": "Aland Islands"
},
{
"value": "30",
"label": "Albania"
}]
{ name: 'Origin', display: 'Origin', type: 'select', ctrlOptions: { objects: country } } }
when i run this i get output
<option value="objects">[object Object],[object Object],[object Object],[object Object]</option>
Please let me know how can I fix the origin column to show actual values rather than object object. Thanks

I am also having the same problem.
So I put my all values in an array.
Then I did like this:
var a = [];
var name;
for (var i = 0; i < data2.adjustmentEntrylist.objTracker_headAdjustmentEntryGridlist.length; i++)
{
name = data2.adjustmentEntrylist.objTracker_headAdjustmentEntryGridlist[i].Name; a.push(name);
}
$(function () { $('#tblAppendGrid').appendGrid({
initRows: 1,
columns: [ { name: 'Tracker Head', display: 'Tracker Head', type: 'select', ctrlOptions: a } ] });
});
Hope it will help.