Kendo Tree view - How to load child node on expand kendo treeview - razor

I've a huge tree view to bind, So need to render all the parents , then when expand render the children. How to load child node on expand kendo treeview ?
I had taken a look at the below thread, but not sure where is the reference of the "Node" and "HasNodes" comes from in his last post saying Problem solved.
Appreciate the help.
How to load child node on expand kendo treeview

I have been playing around with this myself over the past few days...
first of all you need to define a method that allows you to pass a node Id (the one you are expanding) or null if getting the root nodes and returns a list of node objects.
When configuring your treeview, ensure that you are not setting your model to use the 'children' field - this prevents any ondemand loading for some reason and set the loadOnDemand to true (this is by default anyway).
Once you have set that up you need to configure the transport.read.data to get the id of the node and pass that through to your method call.
In my examples I have defined my tree model as an object with an ItemId, ItemName, HasChildItems and ParentTreeId properties.
Setting HasChildItems to true ensures the expand capability is available for the node.
Examples:-
Demo Configuration
// the Datasource
var demoDataSource= new kendo.data.HierarchicalDataSource({
transport: {
read: {
url: urlforyouraction_dataretrieval,
cache: false,
type: 'POST',
dataType: "json",
traditional: true,
data: function (e) {
return {
// e is the node passed in, this is null on initial read
ParentTreeId: !e.id ? null : e.id
}
}
}
},
schema: {
model: {
id: "ItemId",
Name: "ItemName",
hasChildren: "HasChildItems",
parentTreeId: "ParentTreeId"
}
}
});
// the treeview
var demoTree = $("#treeview-left").kendoTreeView({
loadOnDemand: true,
dataSource: demoDataSource,
dataTextField: "ItemName"
}).data("kendoTreeView");

Related

Kendo UI Treeview doesn't display date correctly

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!

Sencha/Extjs rest call with all parameters

I'm using ExtJs 5.1.1 and I've written a simple view with a grid, and selecting one row the corresponding model property are editable in some text fields.
When editing is completed the button 'save' call Model.save() method, which use the rest proxy configured to write the changes on the server.
The call made by the proxy are two, first is OPTIONS call to know which method are allowed, second call is a PUT.
My problem is PUT json contains only the changed attributes.
I would like that my application sends all the attributes in PUT, instead only the changed subset.
Is this a proxy configuration, or should I use another kind of proxy, like ajax?
Some code snippet:
Model:
Ext.define('myApp.model.CvModel', {
extend: 'Ext.data.Model',
alias: 'viewmodel.cv',
idProperty : 'code',
proxy: {
type: 'rest',
url: 'http://localhost:8080/CV/resource/rest/cvs/CodeSystem/Domain',
paramsAsJson: true,
reader: {
type: 'json',
rootProperty: 'Test_data'
}
},
fields: [{
...
Controller:
onSave: function () {
var selCv = this.getViewModel().get('selectedCv');
selCv.save();
....
You need to specify a writer config on your proxy with writeAllFields: true. By default it's false, and the default writer itself is just {type: 'json'}.

Sending complex JSON with fetch, save, and delete on a model or collection

We have an internal API that was specifically built to be used with a new piece of software I'm building that runs on Backbone. The API has a single URL and takes JSON as input to determine what it needs to return. It essentially allows me to build custom queries with JSON that return exactly what I'm looking for.
Thing is this JSON can get pretty verbose and is often 3–4 levels deep, but sometimes may just be a few lines and just 1 level deep.
First question first: How do I send a string of JSON along with the ID when I do a fetch()? Do I have to set these parameters as the model or collection's defaults?
Here is an example of a really simple string to get a specific user's info
{
"which" : "object",
"object" : {
"type" : "customer",
"place" : "store",
"customerID" : "14"
}
}
As others have suggested it will likely be challenging to work with SOAP, but it shouldn't be impossible. Backbone models and collections communicate with the server through the sync operation; you should be able to customize that. I think something along these lines might get the ball rolling (for models):
Backbone.SoapyModel = Backbone.Model.extend({
sync: function(method, model, options) {
// force POST for all SOAP calls
method = 'create';
options = _.extend(options, {
// Setting the data property will send the model's state
// to the server. Add whatever complexity is needed here:
data: JSON.stringify({
"which" : "object",
"object" : model.toJSON()
}),
// Set the request's content type
contentType: 'application/json'
});
// Defer the rest to Backbone
return Backbone.sync.apply(this, [method, model, options]);
}
});
var SoapyModelImpl = Backbone.SoapyModel.extend({
url: '/test'
});
var soapTest = new SoapyModelImpl({
id: 42,
name: 'bob',
address: '12345 W Street Dr',
phone: '867 5304'
});
soapTest.fetch();

EXTJS 3.4 Load JSON data into a TREE dynamically

I need to load JSON data into a Tree or TreePanel.
The JSON data does not come from a file or retrived from a URL but is built on the fly.
I cannot find any examples.
Can anyone help?
While I was trying to create a Treegrid afetr searching something in a search filed (need to pass this in the URL) i found some strange behaviour.
How I created here is the logic:
Created a Tree class with rootVisible: false and store:mystore
My store has no proxy{} as I had to set this dynamically from controller
Inside the store autoLoad:false was there
Used mystore.load() to load the data into tree
Request was going for 2 times
A blank root node in the tree although I have no root node.
I fixed it in the following way... not sure to wat extend this is correct. Any better solution please share
Tree class(View)
Didn’t define any treestore inside tree view
rootVisible: false
Inside the controller
search: function(button){
var searchText = this.getSearchField().value;
//created a store instance
var mystore = Ext.data.StoreManager.lookup('MyTreeStore');
mystore.setProxy({
type: 'ajax',
url: 'app/searchid/'+searchText;
});
var mytree = Ext.create('AM.view.MyTree',{store:mystore});
Ext.getCmp('tn').add(mytree);
//DON’T USE store.load() method As we have set rootVisible: false so it will automatically try to load the store or will send the request
}
Store file
Ext.define('AM.store.BomTreeStore', {
extend: 'Ext.data.TreeStore',
model: 'AM.model.BomTree',
autoLoad: false,
folderSort: true
});
Any better solution to this plz share :)
You can do it by progammatically creating a root node.
Iterate through your data and keep appending child nodes to your root node.
It has been explained quite well here:
ExtJS: How to create static and dynamic trees

ExtJS Replace Gridpanel Store

Is there anyway to remotely override/replace a GridPanel's store?
I have a grid that has a dummy store as I get an error if I don't declare as store:
this.ds is undefined
When my form is submitted, it makes a GET REST call & loads a JSON store with the results. I want this store to be the store of my grid and show it underneath the formPanel.
I can get it to show & return JSON but can't seem to replace the store.
I tried using
searchGrid.store = formStore //the JSONStore returned from form submit
EDIT
This if the data store:
var formStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: '...',
method: 'GET'
}),
root: 'Report',
fields:[
....]
});
This is the loading / changing of the store:
var data = this.getForm().getValues();
formStore.load({
params: {
fields: Ext.encode(data)
}
});
var grid = Ext.getCmp('search');
Ext.apply(grid, {store: formStore});
grid.show();
Try this
myGridPanel.getStore().proxy.setApi({read: url});
myGridPanel.getStore().load();
I'm using this solution when I want to read data from another url
grid.reconfigure(store, colModel);
Works fine for me. Is the formStore.data compatible with Grid's columns configuration? You don't need to specify the column model in the reconfigure call if it didn't change.
Show a slice of your formStore.data and grid configuration.
Have you tried Ext.apply()?
From the api:
apply( Object object, Object config, Object defaults ) : Object
EDIT:
Here's how you use it:
Ext.apply(myGrid, { store : mystore }); //no need for the third parameter, but if you do want a default, then you can use one
Should the root is inside reader? Like this
var formStore = new Ext.data.JsonStore({
proxy: new Ext.data.HttpProxy({
url: '...',
method: 'GET'
}),
reader: {
type: 'json',
root: 'Report'
},
fields:[
....]
});
I managed to solve this by moving the jsonStore to the grid itself and make it a singleton. Then reference to it from the form using StoreMgr