Print Page - Dynamically filling an editable combo box

Title: Dynamically filling an editable combo box
Post by: AJLX on August 22, 2016, 09:49:44 AM

Hey guys,

I have the following code to create a combo box:

Code:

<th field="spot" width="10%" align="center" sortable="true" editor="text">Spot #</th>
				<th field="fixture_id" width="20%" sortable="true">Fixture ID</th>
				<th field="mode_id" width="10%" align="right" 	editor:{
							type:'combobox',
							options:{
								url:'mode_id_select.php',
								valueField:'fixture_id',
								required:true
									}
								}
					}, >Mode</th>
				<th field="dmx_univ" width="10%" align="right" sortable="true" editor="text">Universe</th>

And the following PHP file:

Code:

<?php 
require ('../Inx/mysqli_project.php');
$items = array();
$fixture_id = isset($_POST['fixture_id'])
$sql = "SELECT mode_id FROM fixture_details WHERE fixture_id = '$fixture_id'";
$result = $con->query($sql);

if ($result->num_rows > 0)
{
	// output data of each row
	while($row = $result->fetch_assoc())
			array_push($items, $row);
	
		}
		
		echo json_encode($items);
?>

Basically to run the SQL statement I need to use the fixture_id value from the same row. So somehow I need to send that across to the PHP file. Can someone help me with doing this please?

Thanks,

Andy

Title: Re: Dynamically filling an editable combo box
Post by: stworthy on August 23, 2016, 02:43:09 AM

Set the request parameter before loading data from remote server. Please try this code.

Code:

editor:{
	type:'combobox',
	options:{
		//...,
		onBeforeLoad:function(param){
			var index = $(this).closest('tr.datagrid-row').attr('datagrid-row-index');
			var row = $('#dg').datagrid('getRows')[index];
			param.fixture_id = row.fixture_id;
		}
	}
}

Title: Re: Dynamically filling an editable combo box
Post by: AJLX on September 10, 2016, 03:38:48 AM

Hey,

Thanks for taking the time to reply, I managed to get side tracked with other projects.

I now have this:

Code:

<th field="mode_id" width="10%" align="right" 	editor:{
							type:'combobox',
							options:{
								url:'mode_id_select.php',
								valueField:'fixture_id',
								required:true
								
								onBeforeLoad:function(param){
			var index = $(this).closest('tr.datagrid-row').attr('datagrid-row-index');
			var row = $('#dg').datagrid('getRows')[index];
			param.fixture_id = row.fixture_id;
									}
								}
					}, >Mode</th>

And it still isn't working? Any ideas please?

Title: Re: Dynamically filling an editable combo box
Post by: iklotzko on September 13, 2016, 06:57:22 AM

Hi AJ,

I assume this is used in datagrid as one of the editors. The issue of course here is specifying the url: mode_id_select.php?figure_id=<row-value-for-fid>

Use the onBeforeEdit method to configure the editor before it is shown. Within that event try this

var ed = $('grid-selector').datagrid('getEditor', {index:<row-index>,field:'<combo-field-name>'});
$(ed.target).combobox('options')['url'] = 'mode_id_select.php?figure_id=<row-value-for-fid>';

You can also use the queryParams property and leave the url alone. It sure would be nice if jeasy provided a callback/event to dynamically retrieve the url or query params.

Hope this works for you,

Ira

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: AJLX on August 22, 2016, 09:49:44 AM