Title: Adding a toolbar to a combotree editor using java script
Post by: WizPS on June 14, 2019, 02:01:37 PM
I need to add a toolbar to an editor of type combotree in the DataGrid Inline Editing example. Can you please provide a code example how to do this using java script? The editor of type combogrid works fine. <table id="tt"></table>
<script>
var products = [
{ productid: 'FI-SW-01', name: 'Koi' },
{ productid: 'K9-DL-01', name: 'Dalmation' },
{ productid: 'RP-SN-01', name: 'Rattlesnake' },
{ productid: 'RP-LI-02', name: 'Iguana' },
{ productid: 'FL-DSH-01', name: 'Manx' },
{ productid: 'FL-DLH-02', name: 'Persian' },
{ productid: 'AV-CB-01', name: 'Amazon Parrot' }
];
var productfamilies = [{
"id": "a",
"text": "Animals",
"iconCls": "icon-save",
"children": [{
"id": "t",
"text": "Tame",
"checked": true,
"children": [{
"id": "n",
"text": "No legs",
"checked": true
}, {
"id": "s",
"text": "Some legs",
"state": "closed"
}]
}, {
"id": "w",
"text": "Wild",
"state": "open",
"attributes": {
"url": "/demo/book/abc",
"price": 100
},
"children": [{
"id": "f",
"text": "Four legs",
"checked": true
}, {
"id": "o",
"text": "Other legs",
"state": "closed"
}]
}]
}, {
"id": "p",
"text": "Plants",
"state": "open",
"children": [{
"id": "g",
"text": "Green"
}, {
"id": "b",
"text": "Brown"
}]
}];
var data = {
"total": 28, "rows": [
{ "productid": "FI-SW-01", "productname": "Koi", "productfamilyid": "a", "productfamilyname": "Animals", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
{ "productid": "K9-DL-01", "productname": "Dalmation", "productfamilyid": "t", "productfamilyname": "Tame", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "productfamilyid": "n", "productfamilyname": "No legs", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "productfamilyid": "s", "productfamilyname": "Some legs", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
{ "productid": "RP-LI-02", "productname": "Iguana", "productfamilyid": "w", "productfamilyname": "Wild", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
{ "productid": "FL-DSH-01", "productname": "Manx", "productfamilyid": "f", "productfamilyname": "Four legs", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
{ "productid": "FL-DSH-01", "productname": "Manx", "productfamilyid": "o", "productfamilyname": "Other legs", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
{ "productid": "FL-DLH-02", "productname": "Persian", "productfamilyid": "p", "productfamilyname": "Plants", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },
{ "productid": "FL-DLH-02", "productname": "Persian", "productfamilyid": "a", "productfamilyname": "Animals", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "productfamilyid": "t", "productfamilyname": "Tame", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
]
};
var columns = [
{ field: 'itemid', title: 'Item ID', width: 60 },
{
field: 'productid', title: 'Product', width: 100,
formatter: function (value, row, index) {
// console.log(index);
return row.productname || value;
},
editor: {
type: 'combogrid',
options: {
panelWidth: 400,
columns: [[
{ field: "productid", title: "productid", width: 100 }
, { field: "name", title: "name", width: 200 }
]],
idField: 'productid',
textField: 'name',
data: products,
required: true,
toolbar: [{ iconCls: 'icon-save' }, { text: "<div id='abc'>My menu</div>" }]
}
}
},
{
field: "productfamilyid", title: "productfamilyid", width: 100,
formatter: function (value, row,index) {
// console.log(row);
if (row) {
return row.productfamilyname;
} // else return value;
},
editor: {
type: 'combotree',
options: {
// idField: "id",
// textField: "text",
panelWidth: 400,
data: productfamilies,
required: true,
toolbar: [{ iconCls: 'icon-save' }, { text: "<div id='abc'>My menu</div>" }]
}
}
},
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 1 } } },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: 'numberbox' },
{ field: 'attr1', title: 'Attribute', width: 180, editor: 'text' },
{
field: 'status', title: 'Status', width: 50, align: 'center',
editor: {
type: 'checkbox',
options: {
on: 'P',
off: ''
}
}
},
{
field: 'action', title: 'Action', width: 80, align: 'center',
formatter: function (value, row, index) {
if (row.editing) {
var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ';
var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
return s + c;
} else {
var e = '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ';
var d = '<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>';
return e + d;
}
}
}
];
$(function () {
$('#tt').datagrid({
title: 'Editable DataGrid',
iconCls: 'icon-edit',
width: 760,
height: 250,
singleSelect: true,
idField: 'itemid',
data: data,
columns: [columns],
onEndEdit: function (index, row) {
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'productid'
});
row.productname = $(ed.target).combobox('getText');
},
onBeforeEdit: function (index, row) {
row.editing = true;
$(this).datagrid('refreshRow', index);
},
onAfterEdit: function (index, row) {
row.editing = false;
$(this).datagrid('refreshRow', index);
},
onCancelEdit: function (index, row) {
row.editing = false;
$(this).datagrid('refreshRow', index);
}
}).datagrid('enableFilter');
});
function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target) {
$('#tt').datagrid('beginEdit', getRowIndex(target));
}
function deleterow(target) {
$.messager.confirm('Confirm', 'Are you sure?', function (r) {
if (r) {
$('#tt').datagrid('deleteRow', getRowIndex(target));
}
});
}
function saverow(target) {
$('#tt').datagrid('endEdit', getRowIndex(target));
}
function cancelrow(target) {
$('#tt').datagrid('cancelEdit', getRowIndex(target));
}
function insert() {
var row = $('#tt').datagrid('getSelected');
if (row) {
var index = $('#tt').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#tt').datagrid('insertRow', {
index: index,
row: {
status: 'P'
}
});
$('#tt').datagrid('selectRow', index);
$('#tt').datagrid('beginEdit', index);
}
</script>
Many tanks for your help!
Title: Re: Adding a toolbar to a combotree editor using java script
Post by: jarry on June 17, 2019, 07:28:30 AM
The combotree has no toolbar property. If you really want to append a toolbar to the drop-down panel, please try this code. $('#dg').datagrid({
onBeginEdit: function(index,row){
var ed = $(this).datagrid('getEditor', {index:index,field:'productid'});
$(ed.target).combotree('panel').prepend('<div>toolbar</div>')
}
})
Title: Re: Adding a toolbar to a combotree editor using java script
Post by: WizPS on June 17, 2019, 12:45:53 PM
I want to add a layout component to the panel and put the tools in the north panel, the existing combotree into the center and some buttons in the south, how can this be done?
|