I try to fill a treelist with remote data via a ajax proxy but the treelist shows only the first level and try to reload the sub levels even though the json response contain a complete tree structure. Fiddle link: https://fiddle.sencha.com/#view/editor&fiddle/33u9
When i try to expand the node 'SUB a' (or set the expanded property to true) the store trys to reload the node.
Why is the tree structure from the json response not honored?
Thanks in Advance.
The backend response looks like:
{
"data": {
"root": [
{
"leaf": true,
"text": "Server"
},
{
"leaf": true,
"text": "Storage"
},
{
"text": "SUB a"
"children": [
{
"leaf": true,
"text": "Modul A - 1"
},
{
"leaf": true,
"text": "Modul A - 2"
}
],
},
{
"leaf": true,
"text": "Modul B"
}
]
},
"success": true
}
The used reader config is
reader: {
type: 'json',
rootProperty: 'data.root',
successProperty: 'data.success',
},
After playing around i use the following workaround:
getNavigation: function() {
var me = this,
tree = me.getView().down('navigationtree'),
store = tree.getStore(),
node = store.getRoot();
Ext.Ajax.request({
url: '/getnav',
method: 'POST',
success: function(response) {
var obj = Ext.decode(response.responseText),
childs = obj.data.root;
tree.suspendEvents();
node.removeAll();
childs.forEach(function(item) {
node.appendChild(item);
});
tree.resumeEvents();
},
failure: function(response) {
//debugger;
console.log('server-side failure with status code ' + response.status);
}
}).then(function() {
//debugger;
}
);
}
The funny things is that only the first level of the tree has to be added all following sub-levels are added automaticaly.
The table is generated properly with the right number of rows and columns but the cells are empty. Source of data is an array of objects.
The code I used:
$('#myTable').DataTable( {
data:ar3,
"columns": [
{ title: "balance" },
{ title: "employeedetails" },
{ title: "position" },
{ title: "salaryamt" },
{ title: "startingdate" }
]
} );
`
I am using webix to show some tree table data.
webix.ready(function () {
grida = webix.ui({
container: "testB",
view: "treetable",
columns: [
{ id: "id", header: "", css: { "text-align": "right" } },
{
id: "SerialNo", header: "Serial No", width: 250,
template: "{common.treetable()} #SerialNo#"
}
],
url: "/Test/GetTreeItem",
autoheight: true,
});
});
This loads the items perfectly.
Parents;
[{"id":11583,"Id":11583,"SerialNo":"12476127654","webix_kids":1},{"id":11584,"Id":11584,"SerialNo":"125235463","webix_kids":1},{"id":11585,"Id":11585,"SerialNo":"21385423348956","webix_kids":1},{"id":11586,"Id":11586,"SerialNo":"253346346346","webix_kids":1},{"id":11587,"Id":11587,"SerialNo":"123123","webix_kids":1},{"id":11588,"Id":11588,"SerialNo":"52354263","webix_kids":1},{"id":11589,"Id":11589,"SerialNo":"12344444","webix_kids":1},{"id":11590,"Id":11590,"SerialNo":"12344444","webix_kids":1},{"id":11591,"Id":11591,"SerialNo":"12344444","webix_kids":1},{"id":11592,"Id":11592,"SerialNo":"151515","webix_kids":1}]
However when I click the plus button, server returns (I can see the json string when I debug the code) the json but webix not appending the data underneath the parent.
Kids of parent "id":11587;
[{"id":11583,"Id":11583,"SerialNo":"12476127654","webix_kids":1},{"id":11592,"Id":11592,"SerialNo":"151515","webix_kids":1}]
id of data object must be unique per component.
Currently, you have for top level
{
"id": 11583,
"Id": 11583,
"SerialNo": "12476127654",
"webix_kids": 1
},
and in kids data you have
{
"id": 11583,
"Id": 11583,
"SerialNo": "12476127654",
"webix_kids": 1
},
both items share the same id, so treetable doesn't add a new item.
Correcting the JSON output solved my problem.
For the parents;
{
"parent":"0",
"data":[
{
"Id":11584,
"id":11584,
"SerialNo":"125235463",
"webix_kids":1
},
{
"Id":11599,
"id":11599,
"SerialNo":"3444",
"webix_kids":1
}
]
}
For the kids;
{
"parent":11599,
"data":[
{
"id":11583,
"Id":11583,
"SerialNo":"12476127654",
"webix_kids":1
},
{
"id":11592,
"Id":11592,
"SerialNo":"151515",
"webix_kids":1
}
]
}
How can I change textbox height and width in a popup on devexpress mvc datagrid? I am using
#(Html.DevExtreme().DataGrid().Columns(c => {
c.Add().DataField("MyField").Visible(true).AllowGrouping(true);
}
I tried c.Add().DataField("Myfield").Width(100) but it is only working in datagrid; it does not work in popup element
First of all you need to know that you are treating with a Form and not with a simple grid, so you basically have to configure the form EditorOptions
So in jQuery it would be like this
$("#datagrid").dxDataGrid({ ,
"editing": {
"form": { items: [{dataField:"yourField",editorOptions:"width:100%"}]}
}
});
The previous answer is a little old and doesn't work now so I'll give an updated answer.
This would change the width for a field in the popup form:
$("#datagrid").dxDataGrid({ ,
"editing": {
"form": {
items: [{
dataField:"yourField",
editorOptions: {
width: "100%"
}
]}
}
});
Also if you wanted to have more control and use groups and set things, like height, you could use:
$("#datagrid").dxDataGrid({
editing: {
mode: "popup",
allowUpdating: true,
popup: {
showTitle: true,
title: "Message",
labelLocation: "top"
},
form: {
items: [
{
itemType: "group",
caption: "My Fields",
items: [
{
dataField: "Field1",
editorOptions: {
height: 200
}
},
{
dataField: "Field2",
editorOptions: {
value: true
}
}
]
}, {
itemType: "group",
caption: "My other fields",
items: [
{
dataField: "field3",
helpText: "Example: +1(111)111-1111"
}
]
}
]
}
}
});
Notice that with and without grouping both use the editorOptions to control each field.
I am using following Jquery Datatables code:
$(document).ready(function() {
table = DataTable({
"ajax": {
"url" : '/Book/list/' + book_id,
"dataSrc": function(data) {
return data.book_details;
},
"searching": false
"columns": [
{ "data": "id"},
{ "data": "book_name" },
{ "data": "price"},
{ "data": "rank"},
]
});
I want to edit the 'Price' column - Tried editor plugin but since that is not an opensouce plugin, I am not able to use it.
And the second thing i need is :
After editing 'price' column for every row, by clicking save button, it has to save every modified value in datatable.
Anyone please help?