.datagrid('selectRecord',idValue) and .datagrid onSelect event

EasyUI Forum

April 28, 2024, 04:00:05 AM

Welcome, Guest. Please login or register.

News:

Home

Help

EasyUI Forum > General Category > EasyUI for jQuery > .datagrid('selectRecord',idValue) and .datagrid onSelect event

Pages: [1]

« previous next »

Author

Topic: .datagrid('selectRecord',idValue) and .datagrid onSelect event (Read 1671 times)

Coder

Jr. Member

Posts: 94

.datagrid('selectRecord',idValue) and .datagrid onSelect event

« on: August 31, 2022, 02:41:48 PM »

why datagrid onSelect event didn`t fired when programmatically do .datagrid('selectRecord',idValue) ?
how to fire this event from code ?

on user click event is firing


« Last Edit: August 31, 2022, 02:53:52 PM by Coder »	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: .datagrid('selectRecord',idValue) and .datagrid onSelect event

« Reply #1 on: August 31, 2022, 11:50:40 PM »

Please make sure to set the 'idField' property. This code works fine.

Code:

$('#dg').datagrid({
	idField: 'itemid',
	onSelect: function(index,row){
		console.log(row)
	}
})

Code:

// select the row
$('#dg').datagrid('selectRecord','EST-11')


	Logged

Coder

Jr. Member

Posts: 94

Re: .datagrid('selectRecord',idValue) and .datagrid onSelect event

« Reply #2 on: September 01, 2022, 09:29:33 AM »

ok. maybe problem in call selectRecord from onLoadSuccess
how select record after loading? only via setTimeout ?

Code:

$('#dg').datagrid({
 ...
 , idField: 'itemid'
 , onLoadSuccess: dgLoadSuccess
});

function dgLoadSuccess(aData){
  if($(this).prop('selectAfterLoad') !== undefined
   &&$(this).prop('selectAfterLoad') != ''
  ){
    $(this).datagrid('selectRecord',$(this).prop('selectAfterLoad'));
    $(this).prop('selectAfterLoad','')
  }else{
    $(this).datagrid('clearSelections');
  };
};


« Last Edit: September 01, 2022, 09:54:00 AM by Coder »	Logged

jarry

Administrator
Hero Member

Posts: 2262

Re: .datagrid('selectRecord',idValue) and .datagrid onSelect event

« Reply #3 on: September 04, 2022, 06:02:44 AM »

Please refer to this code. It works fine.

Code:

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - 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 data = [
			{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": "10.00", "status": "P", "listprice": "36.50", "attr1": "Large", "itemid": "EST-1" },
			{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": "12.00", "status": "P", "listprice": "18.50", "attr1": "Spotted Adult Female", "itemid": "EST-10" },
			{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "listprice": "38.50", "attr1": "Venomless", "itemid": "EST-11" },
			{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": "12.00", "status": "P", "listprice": "26.50", "attr1": "Rattleless", "itemid": "EST-12" },
			{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": "12.00", "status": "P", "listprice": "35.50", "attr1": "Green Adult", "itemid": "EST-13" },
			{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "listprice": "158.50", "attr1": "Tailless", "itemid": "EST-14" },
			{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": "12.00", "status": "P", "listprice": "83.50", "attr1": "With tail", "itemid": "EST-15" },
			{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "listprice": "23.50", "attr1": "Adult Female", "itemid": "EST-16" },
			{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": "12.00", "status": "P", "listprice": "89.50", "attr1": "Adult Male", "itemid": "EST-17" },
			{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": "92.00", "status": "P", "listprice": "63.50", "attr1": "Adult Male", "itemid": "EST-18" }
		]
		$(function () {
			$('#dg').datagrid({
				idField: 'itemid',
				onLoadSuccess: function (data) {
					$(this).datagrid('selectRecord', 'EST-11')
				},
				onSelect: function (index, row) {
					console.log(row)
				}
			})
		})
	</script>
</head>

<body>
	<table id="dg" title="Basic DataGrid" style="width:700px;height:250px"
		data-options="singleSelect:true,collapsible:true,data:data">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:80">Item ID</th>
				<th data-options="field:'productid',width:100">Product</th>
				<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
				<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
				<th data-options="field:'attr1',width:250">Attribute</th>
				<th data-options="field:'status',width:60,align:'center'">Status</th>
			</tr>
		</thead>
	</table>

</body>

</html>


	Logged

Pages: [1]

« previous next »