Data transformation for KendoUI grid - javascript

I have a JSON data structure that I need to display in Kendo UI grid. The data is something like this
[
{"ObjType": {"Key1":"Value1", "Key2":"Value2", "Key3":["1234","45223"]}},
{"ObjType": {"Key1":"Value3", "Key2":"Value4", "Key3":["1234","45223"]}},
{"ObjType": {"Key1":"Value5", "Key2":"Value6", "Key3":["1234","45223"]}}
]
Kendo UI expects an array of Key/Value pairs or defined columns with array of arrays of values. What's the best way to transform this into something that the grid can understand?
Or maybe there is a way in Kendo grid to specify where to get the data from. The array in Key3 can be converted into string.
The schemas of the data can change - for different ObjType there will be different keys and different number of them, but the structure is pretty much the same - string key and string or array of strings value. And the ObjType stays the same through the document, but can change when we read a different document.

The Kendo UI DataSource schema has a parse configuration option, which allows you to tweak the data response before the DataSource instance handles it.
http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.parse

Related

Inserting an array of json to hasura

I am trying to insert an array of objects to my hasura table. I have defined my columns like the image below
But I am receiving malformed array literal: \"[]\" error. I am using JSON.stringify from my client side code to stringify my array before calling the mutation. What am I doing wrong?
I'd highly recommend that you just make the column a jsonb and then store the array directly. jsonb querying capabilities are significantly improved over json and Hasura doesn't have the greatest support for array columns (of any type).
When submitting data to an array column with Hasura it expects to receive it as a string using the PG array literal syntax, eg '{1, 2, 3}' for an int[] column.

how to create pivot table from Canvas Data Grid?

I need help - how to create a pivot table in Canvas-Datagrid. Kindly Help me.
This is what we're trying to do. the actual data is below:
https://github.com/TonyGermaneri/canvas-datagrid
we're trying to get the data grid to display something like this in a new grid preferably:
data in the grid is a array of objects or an array of arrays, manipulating the data is done the same way you would any standard JS data.
This looks like an elegant solution to the problem: https://medium.com/front-end-hacking/matrix-rotation-%EF%B8%8F-6550397f16ab
So what you'd do is:
grid.data = flipMatrix(grid.data); and maybe grid.draw();
If the grid is not disposing of the previous schema (the column names are not changing) you can tell it to always load a new schema when the setting data by setting the autoGenerateSchema property to true.

ext js store, manipulation of data (linq type queries)

I am working on my first Ext JS project and have my source data downloaded from a web server held in a store. Now I want to have various grids all show some variation of that source data. For example, grid 1 would be the source data grouped by 1 particular column. Grid 2 would be grouped by a particular column, and where column X = 'variable'. So on and so on.
I am coming from a c# background working in WPF. So normally I would use observable collections, and run LINQ on the observable collection to form a new observable collection, then bind that new collection to my grid.
My question is, how can I run LINQ type queries on stores in EXT JS?
You can run LINQ type queries on stores in ExtJS: You can easily get a Collection from a store using the query or queryBy method.
But you can't work like this for your grids, because grids can't run solely on collections, they need a store each. You wouldn't want to use LINQ type queries for these stores.
If you are using ExtJS6, you can look into ChainedStore. You can bind each grid to a ChainedStore which has your data store as the source. Each ChainedStore can be filtered, sorted and grouped independently from the source and from other stores, by using the sort(), group() and addFilter() functions on the respective store.
If you are using an earlier version, you have to use multiple stores and copy all data from the main store manually. Please be aware that store.add() takes an array of records, not a collection. Instead of store.add(collection), use store.add(collection.getRange()). The getRange() function will return an array that contains all items in the collection.
To answer your question from the comment:
what if I need to do something as simple as create a new store, from store1, group everything by column1, and sum column2?
In ExtJS6, if you want to show the grouping and the sum in a grid, that would be something along:
var store2 = Ext.create('Ext.data.ChainedStore',{
source:store1, // use the data from the other store.
grouper:{
property:'someTestField' // grouping is done inside this store.
}
});
Ext.create('Ext.grid.Panel',{
store:store2,
features:[{
ftype:'groupingsummary' // a summary row for each group is provided by this
}],
columns:[{
xtype:'numbercolumn'
dataIndex: 'someTestField'
summaryType: 'sum' // this column should have the sum in the summary row.
}]
})
Untested and without warranty. If you want to do it without the grid, just calculate the sum, that would have to be done manually like this:
var sums = {};
store1.getGroups().each(function(group,i) {
sums[i] = 0;
group.each(function(record) {
sums[i] += record.get(propertyName);
});
});

jqGrid filter representation object

Is there a way to get an object from jqGrid that represents the filter parameters that were applied to the current result set? If yes, is there a way to later apply this object to the grid?
I usually read the postData param of the grid grid.getGridParam('postData');
it has a string property called filters which contains the current filter of the grid (it's a json text).
you can modify it and then apply it to the grid using grid.setGridParam('postData', postData);

binding nested json object value to a form field

I am building a dynamic form to edit data in a json object. First, if something like this exists let me know. I would rather not build it but I have searched many times for a tool and have found only tree like structures that require entering quotes. I would be happy to treat all values as strings. This edit functionality is for end users so it needs to be easy an not intimidating.
So far I have code that generates nested tables to represent a json object. For each value I display a form field. I would like to bind the form field to the associated nested json value. If I could store a reference to the json value I would build an array of references to each value in a json object tree. I have not found a way to do that with javascript.
My last resort approach will be to traverse the table after edits are made. I would rather have dynamic updates but a single submit would be better than nothing.
Any ideas?
// the json in files nests only a few levels. Here is the format of a simple case,
{
"researcherid_id":{
"id_key":"researcherid_id",
"description":"Use to retrieve bibliometric data",
"url_template" :[
{
"name": "Author Detail",
"url": "http://www.researcherid.com/rid/${key}"
}
]
}
}
$.get('file.json',make_json_form);
function make_json_form(response) {
dataset = $.secureEvalJSON(response);
// iterate through the object and generate form field for string values.
}
// Then after the form is edited I want to display the raw updated json (then I want to save it but that is for another thread)
// now I iterate through the form and construct the json object
// I would rather have the dataset object var updated on focus out after each edit.
function show_json(form_id){
var r = {};
var el = document.getElementById(form_id);
table_to_json(r,el,null);
$('body').html(formattedJSON(r));
}
A much simpler approach would be to accept a form submission and output the data in JSON format. That way, there is no need to bind variables.
The solution has arrived. JQuery now has plugins for data binding and templates.
http://www.borismoore.com/2010/09/introducing-jquery-templates-1-first.html
http://api.jquery.com/jQuery.template/
http://api.jquery.com/category/plugins/data-link/
There is another simple template engine that loads JSON data directly into the form. See http://plugins.jquery.com/project/loadJSON plugin. It works similar way as the one that Jack placed here but it uses plain HTML for template.
You can see instructions how to use it on the http://code.google.com/p/jquery-load-json/wiki/WorkingWithFormElements and live example on the http://jquery-load-json.googlecode.com/svn/trunk/edit.html?ID=17.

Categories

Resources