I want to create datagrid which is populated based on the query made to server
the code i have is
require(["dojo/dom", "dojo/_base/array", "dojo/dom-construct", "dojo/domReady!", "dojox/grid/DataGrid", "dojo/data/ObjectStore"],
function (DataGrid, ObjectStore, dom) {
var formQuery;
require(["dojo/dom-form"], function (domForm) {
formQuery = domForm.toQuery("form-filter");
});
var query = url + '?' + formQuery;
console.log(query);
var myStore;
require(["dojo/store/JsonRest"], function (JsonRest) {
myStore = new JsonRest({target: query});
});
grid = new DataGrid({
store: dataStore = new ObjectStore({objectStore: myStore}),
structure: [
{name: "ID", field: "id", width: "25%"},
{name: "Task-predmet", field: "subject", width: "25%"},
{name: "Dodavatel", field: "contractorCompany", width: "10%"},
{name: "Stav", field: "status", width: "10%"},
{name: "Termin", field: "deadline", width: "10%"},
{name: "Vytvorene", field: "created", width: "10%"}
]
}, "result-table-contractor-tasks-filter"); // make sure you have a target HTML element with this id
grid.startup();
the query is
http://localhost:8080/path?deadlineFrom=2015-11-15&deadlineTill=2016-11-15&createdFrom=2015-11-15&createdTill=2016-11-15
and it returns this
{"code":200,"status":"success","data":[{"id":1,"contractorCompany":"Best","status":"OTV","deadline":"Nov 4, 2016","subject":"","created":"Nov 3, 2016 1:11:22 PM"},{"id":3,"contractorCompany":"Best","status":"OTV","deadline":"Nov 14, 2016","subject":"a","created":"Nov 14, 2016 2:37:15 PM"}]}
but the datagrid is not rendering and i have no idea why. can you please help me? i'm using dojo 1.8
Because dojox modules are experimental, and the grid is deprecated, might I recommend using SitePen's current dgrid? It is being actively developed, and has an accompanying library dstore that includes a 'Request' data store which is made for exactly this purpose.
Otherwise, if you're still interested in using the dojox/DataGrid, check out this article: https://www.sitepen.com/blog/2008/11/21/effective-use-of-jsonreststore-referencing-lazy-loading-and-more/
Related
I am building a app in angular 5. In my HTML page, I have a table which shows the data on being queried. This data is being displayed in ag-grid using directive. One of the column in grid is displayed as HTML link. I am using cellRendererFramework feature to show the values in column as link.
It is working fine and displays the link on the value for that column in table for each row. My requirement is that I want to pass additional parameter to cellRendererFramework component from the main component class. The reason I need this is because when the link is clicked the Angular app displays new components using angular routers and I need to pass multiple values to other component.
I am not sure how to pass parameters to cellRendererFramework class.
Column definitions of data grid
this.columnDefs = [
{ headerName: "Hotel ID", field: "HotelID", width: 500,
cellRendererFramework: LinkcompComponent },
{ headerName: "Account Number", field: "AccountNumber" , width: 700 },
{ headerName: "Customer Name", field: "PartyName", width: 670 }
];
HTML file of cellRendererFramework component
<a [routerLink]="['/trxDetails',params.value]">{{ params.value }}</a>
Is it possible to pass additional parameters to cellRendererFramework component?
Did you find a way to do this ? I am in exactly the same situation as you. Need to pass the "routerLink" as a parameter to this cellRendererFramework component, so that I can make it generic and use the component in multiple ag-grids / pages.
#Component({
// template: '<a routerLink="/trade-detail">{{params.value}}</a>'
template: '<a [routerLink]="inRouterLink">{{params.value}}</a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
#Input('inRouterLink') public inRouterLink = "/trade-detail";
params: any;
EDIT
Ok, found the answer on their website itself after a little more looking.
https://www.ag-grid.com/javascript-grid-cell-rendering-components/#complementing-cell-renderer-params
So, in my case, I pass the params like so:
BlotterHomeComponent class
columnDefs = [
{
headerName: 'Status', field: 'status',
cellRendererFramework: RouterLinkRendererComponent,
cellRendererParams: {
inRouterLink: '/trade-detail'
}
},
RouterLinkRenderer Class
#Component({
template: '<a [routerLink]="params.inRouterLink">{{params.value}}</a>'
})
export class RouterLinkRendererComponent implements AgRendererComponent {
params: any;
agInit(params: any): void {
this.params = params;
}
refresh(params: any): boolean {
return false;
}
}
how can I use jsgrid to present data on a table like the one jsgrid uses
i tried retrieving data as said by this documentation
https://firebase.google.com/docs/database/rest/retrieve-data#section-rest-reading-data-get
$.getJSON("/*url of databse*/.json",
function(data){
clients = data;
console.log(clients);
});
$("#jsGrid").jsGrid({
width: "100%",
height: "400px",
inserting: true,
editing: true,
sorting: true,
paging: true,
data: clients,
fields: [
{ name: "Name", type: "text", width: 150, validate: "required" },
{ name: "Email", type: "number", width: 50 },
{ type: "control" }
]
});
is there anyway to present data on a table like in jsgrid?
jsgrid works with any REST service, firebase is not an exception.
In your example data loading happens asynchronously, so when grid is initialized clients data is not loaded yet. To fix the problem initialize grid on done of the $.getJSON:
$.getJSON("/*url of databse*/.json").done(function(data)
// initialize grid here
)
Worth to note that setting grid data with data config option is for static scenario. More common way is to define the controller (http://js-grid.com/docs/#grid-controller).
I'm using the google analytics embed API to show data in console. All works well till i add a filter to the query.
I want to not include pages what have Movie.aspx in it.
Is it not supported by the API or is my syntax incorrect?
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:pageviewsPerSession',
dimensions: 'ga:pagePath',
sort: '-ga:pageviewsPerSession',
//doesn't work when i add this line
// 'filters':'ga:pageviewsPerSession!#Movie.aspx',
'start-date': '30daysAgo',
'end-date': 'yesterday',
'max-results': 10
},
chart: {
container: 'chart-5-container',
type: 'TABLE'
}
});
Edit:
Also i can't seem to get the chart to format correctly.
Each column returns 00,01,02,03 etc.
I'm trying to format it to display 02:00 AM
var dataChart3 = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:sessions',
dimensions: 'ga:hour',
'start-date': '1daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-7-container',
type: 'COLUMN',
options: {
width: '100%',
hAxis: {
title: 'Time of Day',
format: 'hh:mm a'
},
vAxis: {
title: 'Number of sessions'
}
}
}
});
Update 24/05/2017
Thanks I've manged to sort it out using the below query
var PageListConfig = {
query: {
//metrics: 'ga:sessions,ga:avgPageLoadTime',
metrics: 'ga:sessions',
dimensions: 'ga:pagePath',
filters: 'ga:pagePath!#Movie;ga:pagePath!#SessionTimesDisplay;ga:pagePath!#SessionTimesDaySelect;ga:pagePath!#VenueTicketing',
sort: '-ga:sessions',
'max-results': 30
},
chart: {
container: 'chart-5-container',
type: 'TABLE'
}
};
ga:pageviewsPerSession
The average number of pages viewed during a session, including repeated views of a single page.
The above metadata is a metric not a dimension which means you need to use one of the metric filter operators also its a number you cant compare a number to a string
You may want to consider one of the page path dimensions.
ga:pagePath=#Movie.aspx
check out the filter syntax documentation on the Google Analytics developer site. I also recommend testing them out in the query explorer
I would like to generate an API call that looks as follows:
var dataChart5 = new gapi.analytics.googleCharts.DataChart({
query:
[
{
metrics: 'ga:totalEvents',
dimensions: 'ga:date',
'start-date': beginDate,
'end-date': endDate,
filters: 'ga:eventAction==Search;ga:eventCategory==Company'
},
{
metrics: 'ga:totalEvents',
dimensions: 'ga:date',
'start-date': beginDate,
'end-date': endDate,
filters: 'ga:eventAction==Search;ga:eventCategory==Accommodation'
}
],
chart: {
container: 'chart5-container',
type: 'LINE',
options: {
width: '100%'
}
}
});
You'll notice there are two queries being generated for the chart. When I execute this, nothing is rendered. This tells me either the syntax is wrong or what I'm trying to do isn't supported. Is something like this possible?
No, what you're asking is not possible with the Embed API. If you check the documentation for the DataChart component you'll see the query option takes an Object not an Array.
To do what you want, you'd have to make two queries using the Data component and then render the chart yourself.
I'm using codeingniter, doctrine and KendoUI on a project and I've come across this problem:
in my DB I have 2 columns of a DB but I want to show them in only one column in the KendoUI grid, so far I've been able to show them, but when I try to create a new row or edit an existing one I can't because the in the template I created I don't know how to specify the fields so I can edit and create rows, I pasted a chunk of the code and if you see in the 4th column is the problem that I have.
Thanks in advance.
schema: {
model: {
id: "idAction",
fields: {
actionId: { editable: false },
strategy: {field:"strategy", type:"number"},
actionName: { validation: { required: true } },
actionDescription: { validation: { required: true }, type:"string" },
actionEstimatedTimeQuantity: {validation: {required:true}, type:"number"},
actionEstimatedTimeUnit: {validation:{required:true}},
actionEstimatedCost:{validation:{required:true},type:"number"},
actionCreatedBy: { editable:false },
actionCreatedDate: { editable:false, type:"date" }
}
}
}
And in my columns I have
columns: [
{
field: "strategy",
width: "180px",
title: "Estrategia a usar",
values: strategies
},
{
field: "actionName",
width: "100px",
title: "Accion"
},
{
field: "actionDescription",
width: "200px",
title: "Descripción"
},
{
field: "actionEstimatedTimeQuantity - actionEstimatedTimeUnit"
template: "#= actionEstimatedTimeQuantity # - #= actionEstimatedTimeUnit #",
width: "150px",
title: "Tiempo Estimado"
},
{
field: "actionEstimatedCost",
width: "150px",
title: "Costo Estimado"
},
{
field: "actionCreatedBy",
width: "100px",
title: "Creada Por"
},
{
field: "actionCreatedDate",
width: "150px",
title: "Fecha de Creación",
format: "{0:MM/dd/yyyy}"
},
Try making a new object 'model' that represents your target data. Populate it and parse it in a controller using whatever logic you specify. Map this new model to your grid.
My team does this for every data element, essentially turning them into business objects, even if it is a direct 1 to 1 relationship.
I think you want to display two Numeric columns as a string combination "TimeQuantitiy - TimeUnit". In this case, better you add one more field of type string to the datasource of your kendo grid.
from Server: send one more column of type string "a-b"
at client: display it in grid.
Editing: You have two choices -
Use one textbox which accepts input string as "a-b"
Use two textboxes seperated with "-" (you might need to define a custom editor for you column in this case"
I would like to apologize for being more theoretical, I would try to upload some programming if possible.