I have a kendo combobox created using an MVC wrapper like so:
#Html.Kendo.ComboBox().Name("Well");
I want to update the data manually using a json array stored in javascript (not from an ajax query) - I came across this code which almost works except that I get [object Object] 3 times in the ComboBox instead of the 'text' value from the json array:
$("#Well").data("kendoComboBox").dataSource.data([{text: "i1", value: "1"}, {text: "i2", value: "2"}, {text: "i3", value: "3"}]);
$("#Well").data("kendoComboBox").dataSource.query();
It seems there is no default for the text/value fields so adding:
#Html.Kendo.ComboBox().DataTextField("text").DataValueField("value").Name("Well");
fixes the issue.
Following helped me to solve the problem of dynamically updating the kendo combobox datasource,
var combobox = $("#selector").data("kendoComboBox");
if(combobox){
combobox.destroy();
combobox.dataSource.data(NewDatasourceObject);
combobox.refresh();
}
$("#Well").kendoComboBox({
placeholder: "Select...",
dataTextField: "text",
dataValueField: "value",
filter: "contains",
autoBind: true,
dataSource: {
//type: "odata",
serverFiltering: true,
transport: {
read: { url: "../your_json_url" }
}
}
});
Related
I am trying to display my json from a mvc controller to be displayed on a checkboxed kendo ui treeview. The code on the asp.net mvc view and the json sent to the view are given below
MyDoc.cshtml code
<script>
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true,
},
dataSource: {
//type: "odata",
transport: {
read: {
url: '#Url.Content("~/Document/GetMyDocs")',
type: "post",
dataType: "json"
}
},
schema: {
model: {
id: "id", text:"Name",
children: "Files"
}
}
},
dataTextField: [ "Name"],
check: onCheck
});
json object
[{"id":1,"Name":"Checking",
"Files":[{"Filename":"doc10","id":"1afd5a4f-086f-44d2-9287-8098384e379e"},
{"Filename":"doc11","id":"89ea3366-14b8-4e91-8273-6e2a51fbe516"}]},
{"id":2,"Name":"Saving",
"Files":[{"Filename":"doc20","id":"c7a88f5d-067e-4f20-93b6-da6eff69d532"},
{"Filename":"doc21","id":"8a0a62ed-1b4a-4e5e-8d59-d57a975a7ab0"}]}]
When I view the page only the toplevel text, "Checking" and "Saving" shows. The date present under Files comes out as undefined.
Thanks
It looks like that Kendo UI uses the dataTextField: [ "Name"] for both the parent and the child node. Since the json in the child data doesn't have a field name equal to "Name" it came out as undefined. Once I changed the property, "FileName" into "Name", it worked. The Telerik's documentation is as atrocious as other third party controls. All their demos are more geared to show how easy peasy it is to create a sexy looking UI using few hard coded data than showing how to create a real world application!
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.
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'm using solr+haystack(django plugin) on the backend and the search is working fine;
While Django(and Haystack) with its templates is doing everything for me(I mean its pretty simple to configure and use), ExtJS4 is a little more complex;
The question is how to use Solr using ExtJS4?
An example is very much appreciated;
Thanks for any help and sorry for my English;
As ExtJS4 is a MVC framework, the solution is done like MVC;
The controller/Search.js
Ext.define('yourapp.controller.Search',{
extend:'Ext.app.Controller',
stores:[
'Searches'
],
views:[
'search.Search',
'search.SearchList'
],
models:[
'Search'
],
init:function(){
this.control({
"search":{
'keyup':this.search,
},
});
},
search:function(inputedTxt, e, eOpts){
this.getSearchesStore().load({
//When sending a request, q will rely to request.POST['q'] on server-side;
//inputedTxt.getValue() -- a value, entered in textfield (or whatever)
params:{
q:inputedTxt.getValue()
},
callback:function(result){
if(result[0]){
//do something with the result
//i'd been creating a window with a grid inside. "Grid"'s view is written below.
}
}
}
});
The models/Search.js
Ext.define('yourapp.model.Search',{
extend:'Ext.data.Model',
fields:[
{name:'name', type:'string'}
]
});
The store/Searches.js
Ext.define('yourapp.store.Searches',{
extend:'Ext.data.Store',
storeId: "searchStore",
model:'yourapp.model.Search',
autoLoad: false,
proxy:{
type:'ajax',
// server-side url
url: '/searchlist/',
actionMethods:{create: "POST", read: "POST", update: "POST", destroy: "POST"},
reader:{
type:'json',
root:'searches'
}
}
});
The view/search/Search.js
//a Text field to input text;
Ext.define('yourapp.view.search.Search',{
extend:'Ext.form.field.Text',
alias: 'widget.search',
id: "searchView",
enableKeyEvents: true,
initComponent:function(){
this.callParent(arguments);
}
});
The view/search/SearchList.js
//a view for a result
Ext.define('yourapp.view.search.SearchList',{
extend: 'Ext.grid.Panel',
alias:'widget.searchlist',
title: 'search result',
store: 'Searches',
columns:[
{
header:'Name',
dataIndex:'name',
flex:1
}
]
});
Somewhere in the view/Viewport.js xtype: 'search', should be inserted for a text field to be displayed.
That's all for a ExtJS4 part.
On server-side -- Django:
'haystack' and Solr should be installed and configured (by 'configured' i mean: search should already work on the server-side);
In someapp/view.py
def searchlist(request):
from haystack.query import SearchQuerySet
# POST["q"] should be receivedt from our client-side
searchText = request.POST["q"]
sqs = SearchQuerySet().filter(name=searchText)
data = []
for result in sqs:
data.append({"name": result.object.name})
return HttpResponse('{ success:true, searches:'+simplejson.dumps(data)+'}', mimetype = 'application/json')
Finally in your urls.py you should add:
(r'^searchlist/','someapp.views.searchlist'),
That was for it. Best wishes.
P.S.
I know this is not the greatest answer and there's lack of explanation, but as for me, I rather prefer a code example than verbal explanation.
SOLR has JSON output from its queries using wt=json param and can readily be consumed by ExtJS.
http://wiki.apache.org/solr/SolJSON?action=fullsearch&context=180&value=jsonp&titlesearch=Titles#JSON_Response_Writer
if you need to use jsonp you can specify a callback function via this param json.wrf=callback
I am creating a tree in ExtJS 3.4.0. I understand the JSON the component is expecting should be returned like this:
[{
id: 1,
text: 'Brian',
leaf: true,
checked: false
}]
but the JSON that i am getting retrurned to me has a root node like this:
{"message":
{"nodes":
[{
"text":"Brian",
"id":"1",
"leaf":true,
"checked":false
}]
}
}
I don't see a way to specify in my configuration where in the JSON, the actual tree data is. Is this even possible? I see a "root" paramater, but that is different. Is there a way to specify where in the incoming JSON to "start" from.
Oh and I don't have control over the incoming JSON or obviously I would just change the JSON. :-)
Thanks
I think you could do something like along these lines (from looking at the ext docs):
var treePanel = {
xtype: 'treepanel',
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.TreeNode({
expanded: true,
children: myJsonObject.message.nodes
})
}
The is a 'root' option in the reader for your Store's Proxy that you can use.
proxy: {
reader: {
type : 'json',
root : 'nodes'
},
// Other configs
}