|
keja
|
 |
« on: August 09, 2022, 03:50:21 PM » |
|
Hello,
Can you share an example of having load on demand combo grid in every row?
The rows are to be created dynamically and in every row, there will be a combo grid with the load on demand.
The row can be edited, added or deleted by the user.
Should be able to change/update the saved records.
The sample UI is attached for reference.
|
|
|
|
« Last Edit: August 16, 2022, 09:28:20 PM by keja »
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #1 on: August 10, 2022, 01:25:12 AM » |
|
Please refer to the code below. <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
var costData = [
{ value: 'c1008', text: 'Cost Centre 1008' },
{ value: 'c12', text: 'Cost Centre 12' },
{ value: 'c1007', text: 'Cost Centre 1007' }
];
$(function () {
$('#cc').combogrid({
data: [
{ id: 1, percentage: 20, cost: 'c12' },
{ id: 2, percentage: 30, cost: 'c1007' }
],
columns: [[
{
field: 'percentage', title: 'Percentage', width: 50,
editor: {
type: 'numberbox',
options: {
precision: 0,
onChange: function (value) {
var tr = $(this).closest('tr.datagrid-row');
var index = tr.attr('datagrid-row-index');
updatevalue(index, value, 'percentage')
}
}
}
},
{
field: 'cost', title: 'Cost Center', width: 100,
editor: {
type: 'combobox',
options: {
data: costData,
onChange: function (value) {
var tr = $(this).closest('tr.datagrid-row');
var index = tr.attr('datagrid-row-index');
updatevalue(index, value, 'cost')
}
}
}
},
{
field: 'act', title: '', width: 50, fixed: true, align: 'center',
formatter: function (value, row) {
return '<a href="javascript:;" onclick="delrow(' + row.id + ')">Del</a>';
}
}
]],
onLoadSuccess: function (data) {
for (var i = 0; i < data.rows.length; i++) {
$(this).datagrid('beginEdit', i);
}
}
})
$('#cc').combogrid('grid').datagrid({
footer: '#footer'
})
})
var idIndex = 10;
function addnew() {
var grid = $('#cc').combogrid('grid');
grid.datagrid('appendRow', {
id: idIndex++,
percentage: null,
cost: null
});
var index = grid.datagrid('getRows').length - 1;
grid.datagrid('beginEdit', index)
}
function delrow(id) {
var grid = $('#cc').combogrid('grid');
var rows = grid.datagrid('getRows');
for (var i = 0; i < rows.length; i++) {
if (rows[i].id == id) {
grid.datagrid('cancelEdit', i);
grid.datagrid('deleteRow', i);
break;
}
}
}
function updatevalue(index, value, field) {
var grid = $('#cc').combogrid('grid');
var row = grid.datagrid('getRows')[index];
row[field] = value;
}
</script>
</head>
<body>
<select id="cc" style="width:300px" data-options="
panelWidth: 500,
idField: 'id',
textField: 'percentage',
fitColumns: true,
editable: false,
label: 'Select Item:',
labelPosition: 'top'
">
</select>
<div id="footer" style="padding:5px 10px">
<a href="javascript:;" class="easyui-linkbutton" iconCls="icon-add" onclick="addnew()">Add New</a>
</div>
</body>
</html>
|
|
|
|
|
Logged
|
|
|
|
|
keja
|
|
« Reply #2 on: August 16, 2022, 02:22:08 AM » |
|
Modified your given code as per our requirement. Can you please help us to implement the load-on-demand Combobox /combo grid in a second column (Cost Center)?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery EasyUI Demo</title>
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.min.js"></script>
<script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<script>
var costData = [
{ value: 'c1008', text: 'Cost Centre 1008' },
{ value: 'c12', text: 'Cost Centre 12' },
{ value: 'c1007', text: 'Cost Centre 1007' }
];
$(function () {
$('#cc').datagrid({
data: [
{ id: 1, percentage: 20, cost: 'c12' },
{ id: 2, percentage: 30, cost: 'c1007' }
],
columns: [[
{
field: 'percentage', title: 'Percentage', width: 50,
editor: {
type: 'numberbox',
options: {
precision: 0,
onChange: function (value) {
var tr = $(this).closest('tr.datagrid-row');
var index = tr.attr('datagrid-row-index');
updatevalue(index, value, 'percentage')
}
}
}
},
{
field: 'cost', title: 'Cost Center', width: 100,
editor: {
type: 'combobox',
columns: [[
{ field: 'value', title: 'CostCode', width: 120},
{ field: 'text', title: 'Cost Center', width: 250 }
]],
options:{
data: costData,
onChange: function (value) {
var tr = $(this).closest('tr.datagrid-row');
var index = tr.attr('datagrid-row-index');
updatevalue(index, value, 'value')
}
}
}
},
{
field: 'act', title: '', width: 50, fixed: true, align: 'center',
formatter: function (value, row) {
return '<a href="javascript:;" onclick="delrow(' + row.id + ')">Del</a>';
}
}
]],
onLoadSuccess: function (data) {
for (var i = 0; i < data.rows.length; i++) {
$(this).datagrid('beginEdit', i);
}
}
})
$('#cc').datagrid('grid')({
footer: '#footer'
})
})
var idIndex = 10;
function addnew() {
var grid = $('#cc');
grid.datagrid('appendRow', {
id: idIndex++,
percentage: null,
cost: null
});
var index = grid.datagrid('getRows').length - 1;
grid.datagrid('beginEdit', index)
}
function delrow(id) {
var grid = $('#cc');
var rows = grid.datagrid('getRows');
for (var i = 0; i < rows.length; i++) {
if (rows[i].id == id) {
grid.datagrid('cancelEdit', i);
grid.datagrid('deleteRow', i);
break;
}
}
}
function updatevalue(index, value, field) {
var grid = $('#cc');
var row = grid.datagrid('getRows')[index];
row[field] = value;
}
</script>
</head>
<body>
<table id="cc" style="width:100%;height:250px" data-options="idField:'id',fitColumns:true">
</table>
<div id="footer" style="padding:5px 10px">
<a href="javascript:;" class="easyui-linkbutton" iconCls="icon-add" onclick="addnew()">Add New</a>
</div>
</body>
</html>
|
|
|
|
« Last Edit: August 16, 2022, 09:31:18 PM by keja »
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #3 on: August 17, 2022, 05:35:19 PM » |
|
|
|
|
|
|
Logged
|
|
|
|
|
keja
|
|
« Reply #4 on: August 18, 2022, 11:56:46 AM » |
|
Thank you, Jarry. Could achieve only load-on-demand(pagination) combo grid in a Datagrid.
We require a scroll view instead pagination view. No column filter and header for the combo grid. There will be a single column in a combo grid similar to Combobox. The user will enter the text in a column of a grid to search the records and select the item. In short, we require load-on-demand Combobox in a Datagrid. However, it can't be achieved so I am trying with a combo grid.
Can you share a similar example or change my attached example?
|
|
|
|
« Last Edit: August 19, 2022, 02:05:26 AM by keja »
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #5 on: August 19, 2022, 03:54:48 AM » |
|
|
|
|
|
|
Logged
|
|
|
|
|
keja
|
|
« Reply #6 on: August 19, 2022, 02:33:27 PM » |
|
Thank you, Jarry. One below observation
In the initial load itself, how can we search or filter the combo grid with the text bound in the column so that the item will be available and selected in the dropdown if the user clicks on the down arrow of a combo grid?
|
|
|
|
« Last Edit: August 21, 2022, 09:04:38 PM by keja »
|
Logged
|
|
|
|
|
keja
|
|
« Reply #7 on: August 22, 2022, 11:57:34 PM » |
|
Any suggestion on the above, Jarry?
|
|
|
|
|
Logged
|
|
|
|
|
jarry
|
|
« Reply #8 on: August 23, 2022, 05:35:57 PM » |
|
You can listen to the 'onShowPanel' event and then make a search to the remote server according to the bound text. Please refer to the code below. editor: {
type: 'combogrid',
options:{
view: scrollview,
mode: 'remote',
width: 200,
panelWidth: 600,
idField: 'inv',
textField: 'inv',
columns: [[
{field:'inv',title:'Inv NO',width:100}
]],
fitColumns: true,
showHeader: false,
url: 'https://www.jeasyui.com/demo/main/datagrid27_getdata.php',
onChange: function (value) {
var tr = $(this).closest('tr.datagrid-row');
var index = tr.attr('datagrid-row-index');
updatevalue(index, value, 'cost')
},
onShowPanel: function(){
var q = $(this).combogrid('getText');
$(this).combogrid('grid').datagrid('reload', {q:q})
}
}
}
|
|
|
|
|
Logged
|
|
|
|
|
keja
|
|
« Reply #9 on: August 24, 2022, 01:24:37 AM » |
|
Jarry, the show panel event works fine. Thank you. Now, I am facing a strange problem with Datagrid. I have defined Datagrid in user control as below (Example: To display only Datagrid columns with one data row) On one button click, the user control dialogue opens and the grid displays. It loads and works fine for the first time. If we close the dialogue and click again the button to reopen it, it does not display. What could be the reason? Below is the function which is called on button click. Datagrid does not display on second-time button click. Am I making any mistake in initializing? editRecord: function () {
$('#cc').datagrid({
data:[{code:1, name:'first', price:100}],
columns: [[
{ field: 'code', title: 'Code', width: 100 },
{ field: 'name', title: 'Name', width: 100 },
{ field: 'price', title: 'Price', width: 100, align: 'right' }
]]
});
} |
|
|
|
« Last Edit: August 24, 2022, 08:56:28 PM by keja »
|
Logged
|
|
|
|
|
keja
|
|
« Reply #10 on: August 25, 2022, 05:47:35 AM » |
|
It worked after setting the height of the table as below. <table id="cc" style="height:200px;"></table> |
|
|
|
« Last Edit: August 25, 2022, 01:49:15 PM by keja »
|
Logged
|
|
|
|
|
keja
|
|
« Reply #11 on: August 25, 2022, 04:17:16 PM » |
|
In the same grid, how can we bind the other data column value to the editor column of combo grid ? I tried formatter with no luck. { field: 'ObjectCode', title: 'Cost Center', width: 300,
formatter: function (value, row, index) {
return row["ObjectCodeText"];
},
editor: {
type: 'combogrid',
options: {
required: false,
view: scrollview,
mode: 'remote',
idField: 'CostCode',
textField: 'CostCentre', ...
|
|
|
|
|
Logged
|
|
|
|
|
