I have a use case where I would like to have jqGrid display some raw JSON for a particular column. I have the following JSON being sent from the server:
{"items":[
{
"code":"ABC123",
"description":"",
"custom_data":{"items":[
{"prop1":"val1","prop2":"val2"},
{"prop1":"val3","prop2":"val4"}
]}
},
{"code":"ABC124","description":"","custom_data":[]},
...,
]}
and a jqGrid configuration like so:
{
url:'/api/somewhere',
datatype: "json",
jsonReader : {
root:"items",
repeatitems: false,
id: "code"
},
colNames:['Code',
'Description',
'Data',],
colModel:[
{
name:'code', index:'code', width:100, hidden:false,
edittype:'text',
editable: true,
editrules:{required:true, edithidden:true},
editoptions: {readonly:false}
},
{
name:'description',
index:'description',
width:250,
editable:true,
edittype:'text',
editrules:{required:true}
},
{
name:'custom_data',
index:'custom_data',
width:100,
hidden:true,
sortable:false,
editable:true,
edittype:'text',
editrules:{required:false, edithidden:true}
},
],
...,
The grid displays OK, but the custom_data column is displayed as [object Object]. What I need is for it to display the raw JSON string I have tried calling JSON.stringify on the custom_data object for each row object using the loadComplete event, but that didn't work. I need to do some data manipulation after the GET anyway, as I want to delete null values from the custom_data object.
My users are comfortable reading and editing raw JSON, so I also need the add/edit form to accept raw JSON which will then get POSTed.
I'm not sure if I'm simply using the wrong event to convert the object back to a string, or if there is something else going on.
What you can do is usage of custom formatter for "custom_data" column
formatter: function (cellValue, options, rawData) {
return cellValue.items ? JSON.stringify(cellValue.items) : "";
}
I changed in the demo hidden property for "custom_data" column to true to see the data
Additionally you can consider to use userdata instead of hidden column to save additional custom data. I recommend you to read the answer additionally which shows not only how to use userdata, but additionally how to show additional data in form subgrid.
Related
I have i transformed a XML to json, so the json file has symbol '#' in front of attributes. For example <xml id=1></xml> and i get { #id=1 }.
With this structure i have create some data, for example
[{#action:"include", #defaultValue:"", #expression:"", #format:"",#isPrimary:"True"},{#action:"include", #defaultValue:"", #expression:"", #format:"",#isPrimary:"True"},{#action:"include", #defaultValue:"", #expression:"", #format:"",#isPrimary:"True"}]
Now i want to implemented this with kendo grid, but i am little comfused.
model: {
fields: {
Action: {
field: '#action',
},
DefaultValue: {
field: '#defaultValue',
},
Format: {
field: '#format',
},
Expression: {
field: '#expression',
}
}
}
and in my columns
columns: [{
field: "Action",
title: "Action",
}, {
field: "DefaultValue",
title: "Default Value",
}, {
field: "Format",
title: "Format",
}, {
field: "Expression",
title: "Expression",
}]
but doen't work, i get "SyntaxError: Invalid or unexpected token"
your model definition is not valid syntax...the model.fields configuration does not seem to have fieldName.field option(http://docs.telerik.com/kendo-ui/api/javascript/data/model#methods-Model.define).
"#" is really not a valid character in javascript names unless you put quotes around it, which you can easily do with the code you control like your data array literal...but kendo isn't doing that so it ends up trying to reference things liked.#action, which is a syntax error. So, you have to "fool" kendo into using square-bracket notation AND quoted field name by using formatting like so:
"['#action']"
when defining the field options. This gives you a quoted field name to allow the # and it causes kendo to use bracket notation instead of dot notation when accessing the fields
Here's a demo of it working: http://dojo.telerik.com/#Stephen/uPiGE
It demonstrates both the required formatting of the field names and the syntax of the model definition.
But, having said all that.....do you really need # in your field names?
I have a kendo grid which is reading data from a remote json file. I want that the grid columns should also be read from the same json file so that I dont have to change the client side code again and again. Whatever comes in the json file it should be capable enough to present the same data without any hard coding on client side. My json file looks like
{ "data":[
{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":11,"UnitPrice":14.0000,"quanity":12},{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":42,"UnitPrice":9.8000,"quanity":10},{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10248,"ProductId":72,"UnitPrice":34.8000,"quanity":5},{"_type":"ProductDetails:#NWProducts","Discount":0,"OrderId":10249,"ProductId":14,"UnitPrice":18.6000,"quanity":9}],
"columns":[
{"field":"_type","title":"Type"},{"field":"Discount","title":"Discount($)"},{"field":"OrderId","title":"Order ID"},{"field":"ProductId","title":"Product ID"},{"field":"UnitPrice","title":"Unit Price"},{"field":"quanity","title":"Quanity"}]
}
HTML code is as below
<div id="grid"></div>
JS code is below
$("#grid").kendoGrid({
title: { text: "Stats" },
sortable: false,
pageable: {
pageSizes: true,
buttonCount: 5
},
columnMenu: true,
dataSource: {
transport: {
read: {
url: "............/demo.json",
dataType: "json"
}
},
schema: {
data: "data"
}
},
columns: {
//What should be done here.
}
});
I tried the same transport read schema way to fetch the column data but it did not work. If I store the same columns json data in a variable and substitute that variable for columns then it works. Is there any way to store the columns json data as such in a variable from the json file. What is the best approach to achieve this behavior. Any help would be appreciated.
Thanks in Advance.
I am playing with the ExtJs4 cartracker application written by existdisolve. I was able to change his queries from rest requests to ajax requests. I also modified the api calls to use ajax to make ajax requests for updates.
I am not getting form or url data passed to my cfc. Instead, in firebug I see JSON passed. I am confused if it is not passed in the form or the url, how is this passed and how do I get to the data? I have tried deserialized the form and url and dumping these after the deserialize and I am told that it is not json.
Where would I find the json?
I am not allowed to post a picture. But it looks like this in the xhr window:
JSON
Active true
ColorID null
Shortname red
Longname Blood Red
So if it is being passed why can I not get to it?
Edit:
#existdissolve - I replaced the rest.js with ajax.js which looks like this:
/**
* Abstract REST proxy
*/
Ext.define('CarTracker6.proxy.Ajax', {
extend: 'Ext.data.proxy.Ajax',
alias: 'proxy.baseajax',
/*format: 'json',*/
limitParam: 'max',
startParam: 'offset',
sortParam: 'sortorder',
writer : {
type : 'ajax',
encode : false,
writeAllFields : true,
root : 'data',
allowSingle : true,
batch : false,
method: 'post',
params: { record: 'record' },
writeRecords : function(request, data) {
request.jsonData = data;
return request;
}
},
reader: {
type: 'json',
root: 'data',
totalProperty: 'count'
},
api: {
read: 'api/option/colors.cfc?method=getcolors',
create: 'api/option/colors.cfc?method=addcolors',
update: 'api/option/colors.cfc?method=updatecolors',
destroy: 'api/option/colors.cfc?method=deletecolors'
}
});
My read works perfectly and I can call the correct cfcs for colors, statuses, etc. and retrieve the requisite data. I am looking to pass parameters to the CFCs and that is not working.
see http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.writer.Json-cfg-encode:
if the encode property of your writer is set to false, all data is sent as raw post body. Instead, you can use
encode: true,
root: 'data', // must be set if encode is true
I am loading JQGrid from an API, one of the data structures that I have for my grid is a JSON element formatted as such:
{"id":123,"name":"John Doe","username":"john.doe"}
The data is properly displayed in the grid, however if I try to type in the toolbar search, I do not get a match presumably because jqgrid still has the above JSON stored as an object.
A truncated version of my grid is as follows:
$('#test').jqGrid({
...
loadonce: true,
datatype: 'local',
colModel: [
{name:'test', index:'test', label:'Test', formatter:customFormatter}
],
...
});
function customFormatter (cellvalue,options) {
return cellvalue.name;
}
I found this post that seems to address this very matter, however I am struggling to get my head around as to how to use this for a JSON object. Once the grid is loaded, I don't see a reason as to why the local data should be anything other than string (Until the grid is reloaded).
After stumbling upon the JSON dot notation in the docs, and adding it to the index this now works:
colModel: [
{name:'test.name', index:'test.name', label:'Test'}
]
You should choose name property of colModel which corresponds the names of the properties in the JSON input. So it's native to use just
colModel: [
{name: "name", label: "Name"}
{name: "username", label: "User Name"}
]
If you do need to remap some names in the JSON input to another names in the colModel you should use jsonmap property. For example
colModel: [
{name: "test1", label: "Name", jsonmap: "name"}
{name: "test2", label: "User Name", jsonmap: "username"}
]
The usage of index different as name is not possible in case of usage of loadonce: true. It is not recommended to use values of name property which have . or any other meta-character. The restriction exist because the name property will be used to build id property of many elements of the grid.
I found the very nice demo by Oleg (http://www.ok-soft-gmbh.com/jqGrid/FillToolbarSearchFilter.htm) which shows a "jqGrid toolbar search with autocomplete using local data" but have trouble to get this to work for json via ajax. Is there a good reason why the autocomplete feature won't work - even if I force the grid to be local after loading?
$(document).ready(function() {
var mygrid = $("#mylist"),
mygetUniqueNames = function(columnName) {
var texts = mygrid.jqGrid('getCol',columnName), uniqueTexts = [],
textsLength = texts.length, text, textsMap = {}, i;
for (i=0;i<textsLength;i++) {
text = texts[i];
if (text !== undefined && textsMap[text] === undefined) {
// to test whether the texts is unique we place it in the map.
textsMap[text] = true;
uniqueTexts.push(text);
}
}
return uniqueTexts;
};
mygrid.jqGrid({
url:'autocompleteTest.php',
datatype: "json",
colNames:['name', 'City','stateCd'],
colModel:[
{name:'name',index:'name',width:225, search: true},
{name:'City',index:'City',width:125},
{name:'stateCd',index:'stateCd',width:75},
],
rowNum: 100,
loadonce : true,
sortname: 'name',
sortorder: 'desc',
sortable: true,
viewrecords: true,
rownumbers: true,
sortorder: "desc",
ignoreCase: true,
pager: '#mypager',
height: "auto",
caption: "How to use filterToolbar better with data from server"
}).jqGrid('navGrid','#mypager',
{edit:false, add:false, del:false, search:false, refresh:false});
mygrid.jqGrid('setColProp', 'name',
{
searchoptions: {
sopt:['bw'],
dataInit: function(elem) {
$(elem).autocomplete({
source:mygetUniqueNames('name'),
delay:0,
minLength:0
});
}
}
});
mygrid.jqGrid('filterToolbar',
{stringResult:true, searchOnEnter:true, defaultSearch:"bw"});
});
It is difficult to provide an example in case of the usage of remote source parameter of jQuery UI Autocomplete. The main problem is that your question is about jqGrid which is pure JavaScript solution. If we would discuss the server part of tha solution we would have too options. Many users uses different languages: Java, C#, VB, PHP and so on. For example I personally prefer C#. Then we would have to choose the technology which we use: ASP.NET MVC, WCF, ASPX web service and so on. For example I would choose WCF. Then we should define the database access technology, for example, Entity Framework, LINQ to SQL, SqlDataReader, SqlDataAdapter and so on. Let us I would choose Entity Framework and would provide you the corresponding code example, but it would help you not really if you use for example PHP and MySQL.
So I just describe which interface should have the server for the remote source parameter of jQuery UI Autocomplete without any code.
You should replace in my example the source parameter to your server url like following:
dataInit: function(elem) {
$(elem).autocomplete({
source:'yourSearchUrl.php',
minLength:2
});
}
If the user types two characters (the value can be changed by minLength option), for example 'ab' then the autocomplete will make HTTP GET request with the parameter term=ab:
yourSearchUrl.php?term=ab
your server should answer with the JSON data in the same format as for the local source. I used the string array format in my previous example. Another supported format is array of objects with label/value/both properties like
[
{
"id": "Dromas ardeola",
"label": "Crab-Plover",
"value": "Crab-Plover"
},
{
"id": "Larus sabini",
"label": "Sabine`s Gull",
"value": "Sabine`s Gull"
},
{
"id": "Vanellus gregarius",
"label": "Sociable Lapwing",
"value": "Sociable Lapwing"
},
{
"id": "Oenanthe isabellina",
"label": "Isabelline Wheatear",
"value": "Isabelline Wheatear"
}
]
read the documentation for more information.
If you need to implement more complex scenario and send some additional data to the server or convert the server response in any way you can use custom source callback function. In the case you should use source: function(request, response) {/*your implementation*/}, where the request would be an object having term property (request.term). Inside of your implementation your should make ajax request to the server manually. The response would be callback function which you should call after your custom ajax request will be finished (inside of success event handler). The response function should be called with the parameter which should be array in the same format as mygetUniqueNames returns. I recommend you to examine the source code from the jQuery Autocomplete demo.
To de able to provide unique data from one column of tabele you should just use SELECT DISTINCT SQL statement which are supported in the most databases.
I hope that my description would help you.
UPDATED: If you have the local source the solution you could find in my old answer which you already use. What you just need to do is to call the filterToolbar after the source array are filled. Because you load the data from the server your should move the call of filterToolbar inside of loadComplete. You use loadonce:true jqGrid option which switch the datatype from 'json' to 'local' after the first data loading. So you can include in the loadComplete event handler of your grid the code like the following:
var grid = $('#list');
grid({
url:'autocompleteTest.php',
datatype: 'json',
loadonce: true,
// ... other parameters
loadComplete: function(data) {
if (grid.getGridParam('datatype') === 'json') {
// build the set 'source' parameter of the autocomplete
grid.jqGrid('setColProp', 'name', {
searchoptions: {
sopt:['bw'],
dataInit: function(elem) {
$(elem).autocomplete({
source:mygetUniqueNames('name'),
delay:0,
minLength:0
});
}
}
});
mygrid.jqGrid('filterToolbar',
{stringResult:true,searchOnEnter:true,
defaultSearch:"bw"});
}
}
});
If you will need to reload the data from the server (change the datatype to 'json' and call grid.trigger('reloadGrid')) you will have to change the code above so that you first destroy the autocomplete widget with $('#gs_name').autocomplete('destroy') and then create it one more time with the same code like inside of dataInit.