If a have a multiple-type combobox that is loaded with its id/text options. No problems there.
But to initialise it with its MULTIPLE selected values, I need to set its value with an array of id values.
It will then correctly display the selected values and they will be preselected.

My form data for this field is a string of comma-separated values (e.g. "3,2,4,34").
I need to convert this string of comma-separated values to an array before passing it to the combobox as its selected values.

I think you can convert a string to an array and set the combobox values like this:

Code:

e.g. _DBstring ="3,2,4,34"; // How to get the field value????
var _comboarray = _DBstring.split(",");
$('#mycombobox').combobox('setValues', _comboarray);

BUT...
How do I get the DBstring value for the field and convert it to an array before it is loaded?
Do I use the form's onBeforeLoad method? (How?)
Or do I use my php select code? (How?)

Thanks in advance for any tips.

That's interesting to know.
Thanks for the update!

Is it possible to have a datagrid with both:
subgrids
And
GroupView?

It seems to be either one or the other...

Anyone managed this?

Pure genius

Works like a treat

Thank you! 

This is the grid and subgrid:

Code:

   <table id="dg" style="width:650px;height:250px" class="easyui-datagrid" 
            url="data_select.php" idField="document_id" striped="true" loadMsg="Data loading... Please wait..."
            title="Document Review"  fit="true" toolbar="#toolbar" pagination="true" pageSize="30"
            rownumbers="true" fitColumns="true" showFooter="true" singleSelect="true"
            >
        <thead>
            <tr>
				<th id="iddocument_id" field="document_id" width="20">document_id</th>
				<th id="idDocumentType" field="DocumentType" width="60">Document Type</th>
				<th id="idDocumentName" field="DocumentName" width="220">Document Name</th>
				<th id="idReviewPeriod" field="ReviewPeriod" align="left" width="30">Review Period</th>
				<th id="idLastRatified" field="LastRatified" align="center" width="30">Last Ratified</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">
        $(function(){
            $('#dg').datagrid({
                view: detailview,
                detailFormatter:function(index,row){
                    return '<div style="padding:2px"><table class="ddv"></table></div>';
                },
                onExpandRow: function(index,row){
                	//Auto-Collapse last expanded row START
					var opts = $(this).datagrid('options');
					if (opts.lastExpandIndex != undefined){
					$(this).datagrid('collapseRow',opts.lastExpandIndex);
					}
					opts.lastExpandIndex = index;
                	//Auto-Collapse last expanded row END


                    var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
                    ddv.datagrid({
                        url:'data_select_getdetail.php?document_id='+row.document_id,
                        fitColumns:true,
                        singleSelect:true,
                        rownumbers:true,
                        loadMsg:'',
                        height:'auto',
                        columns:[[
                            {field:'documentreview_id',title:'ID',width:20},
                            {field:'LeadReviewer',title:'Lead Reviewer',width:200},
                            {field:'ReviewStartDate',title:'Review Started',width:200},
                            {field:'ProposedDeadline',title:'Proposed Deadline',width:100,align:'right'},
                            {field:'ApprovalDate',title:'Review Approved',width:100,align:'right'},
                            {field:'RatificationDate',title:'Review Ratified',width:100,align:'right'},
							{field: 'action', title: 'Action',
									 formatter:function(value,row,index)
									 {
										var s = '<button onclick="editRecord()">Edit</button> ';
										return s;
									}
								}
							]]
                        ,
                        onResize:function(){
                            $('#dg').datagrid('fixDetailRowHeight',index);
                        },
                        onLoadSuccess:function(data){
                            setTimeout(function(){
                                $('#dg').datagrid('fixDetailRowHeight',index);

                                if (!data.rows.length) {
                                	$.messager.show({	// show error message
									title: 'Warning',
									msg: 'This document has not yet been reviewed!'
									});
                            	} 

                            },0);
                        }
                    });
                    $('#dg').datagrid('fixDetailRowHeight',index);
                }
            });
        });
    </script>

The editRecord() function will then open a modal dialog box (as per the demo CRUD application) with details of the subgrid record.
For this I need the selected subgrid record row data...

Thanks Jarry!

[Subgrid]

In a standard datagrid then to get the field values for the selected record then you call the following:

Code:

var row = $('#dg').datagrid('getSelected');

How do you do the same for the subgrid of a datagrid?
I am using the code as per the "Subgrid" example in the datagrid demos

This is wrong but I suspect it may be something similar...?

Code:

var row = $('#dg').datagrid().datagrid('subgrid', conf).datagrid('getSelected');

I just want to add an Edit button column to the subgrid, which calls a pop-up dialog form, for which I need the record field values...

Thanks for any ideas.

**SOLUTION**
OK. I have resolved this, although just wonder whether this might be included in a future update

My page is based on the basic CRUD application (http://www.jeasyui.com/demo/main/index.php?plugin=Application&theme=default&dir=ltr&pitem=)

The datagrid loads the comma-separate value into the data row.
You have to split that into an array of substrings based on comma as a separator
In this example "Invitees" is my field containing the comma-separated list of integer values.

Code:

function editRecord(){
var row = $('#dg').datagrid('getSelected');
if (row){
$('#dlg').dialog('open').dialog('setTitle','Edit Agenda');
$('#fm').form('load',row);

//Split multiple combogrid into array of substrings START
  var _substringarray = row.Invitees.split(',');
  $('#idformInvitees').combobox('setValues', _substringarray);
//Split multiple combogrid into array of substrings END

url = 'data_update.php?agenda_id='+row.agenda_id;
}
}

When updating you MUST convert the comma-separated array of values into a single string (same for inserting). If you don't it only keeps the last one in the list.:

Code:

function updateRecord(){
$('#fm').form('submit',{
url: url,
onSubmit: function(){

//Convert multiple combobox integer to string value START
  var _Invitees = $('#idformInvitees').combobox('getValues');
  _StrInvitees = String(_Invitees);
  $('#idformInvitees').combobox('setValue', _StrInvitees);
//Convert multiple combobox integer to string value END

return $(this).form('validate');
},
success: function(result){
var result = eval('('+result+')');
if (result.success){
	$('#dlg').dialog('close');		// close the dialog
	$('#dg').datagrid('reload');	// reload the user data
} else {
	$.messager.show({
		title: 'Error',
		msg: result.msg
	});
}
}
});
}

Hope that helps...
Can this be incorporated into a future update?

This is not a solution but it may assist in working out what the problem is with how combo treats the separator when loading and posting multiple combobox values.

If in my data_select.php file, I strip out all of the commas that are separating my values then it is able to return single-digit selections.
MySQL select clause includes

Code:

SELECT
agenda_id
...
REPLACE(agenda.Invitees, ',', '') AS Invitees, //strips out the comma separators
...
FROM
agenda

This, of course, all goes wrong as per my above example
1,3,31 -> 1331 -> "1" "3" "3" "1"
instead of
1,3,31 -> 1331 -> "1" "3" "31"

Are there any rules or assumptions for the combobox with multiple selections to work
e.g. only with comma-separated unique string values
I imagine most people will have the value as an integer.
The default separator is a comma.
If you set the separator as anything other than a comma, it still saves to the db as a comma-separated string.

Any ideas?

Without any intervention, does the "multiple:true" switch attempt to parse the values at all?
Or does the combobox process data the same for "multiple:false" and "multiple:true"?

It would be helpful to know if there is any processing... Thanks in advance.

Out of the box, a combobox with multiple selections only saves the last item in the list of selections.

Work around?
onSubmit convert multiple combobox comma-separated integers to a string value

Code:

...
onSubmit: function(){
//Convert multiple combobox integer to string value START
var _Invitees = $('#idformInvitees').combobox('getValues');
_StrInvitees = String(_Invitees);
$('#idformInvitees').combobox('setValue', _StrInvitees);
return $(this).form('validate');

...

But reloading still causes problems.

Example:

Here are 3 lookup values in db table for populating the combobox:
ID   TEXT
1     Person A
3     Person B
31    Person C

I have selected all three and in my MySQL table they are saved as "1,3,31"

When I reload the comobobox, this is what is displayed as the comma-separated list of selections with unwanted additional commas and has misinterpreted the data:
Person A,,,Person B,,,Person B,Person A

What seems to be happening is that the value is evaluated as a string, all commas are removed and the individual single-digit integers are evaluated as values.
1,3,31 -> 1331 -> "1" "3" "3" "1"

Is there a way of extending the save and load functionality of a combobox to handle multiple selections with integer key fields?

Thank you!
Works like a charm.

For anyone interested in how to delay field validation messages from being displayed until a form is submitted this is how:

Code:

<script type="text/javascript">
$(document).ready(function(){
//Disable validation upon loading the document
$('#fm').form('disableValidation');
})

function submitform(){
//Re-enable validation upon loading the document
$('#fm').form('enableValidation');
//Submit form function as normal
$('#fm').form('submit',{
 url: 'data_changepassword.php',
 onSubmit: function(){
 ... etc.

I would like to delay field validation warnings and behaviour from firing upon loading a form.
Using the "delay:bignumber" data option works fine for the built-in field validation rules like email, url but it doesn't work for "required:true"

Is there any way of making a field required but delaying validation messages until either the form is submitted or a user has tabbed off the field (onblur)?

Thanks.

Is Datagrid multi-level grouping possible?
If it were then it would open up a lot of reporting possibilities...

No problem getting one grouping level to work with the "datagrid-groupview.js" extension.

Just wondering whether this is possible?  

Or may be planned for the future??

Wow!

Works like a dream. Thanks very much for that. It really adds functionality.

 

Is it possible to implement the autocomplete functionality for a combobox AND limit the valid options to only those that are in the list.

It seems that for autocomplete to work both mode:remote and editable:true must apply.
However, editable:true means the user can enter any value and is not constrained to the list options.

<input id="idAccountsReceivableTaxType" name="AccountsReceivableTaxType" class="easyui-combobox" style="width:200px"
data-options="valueField:'xerogstcode',
textField:'vat_description',
url:'get_vatcode_data.php',
mode:'remote',
editable:true" />

Is there some way of blocking the user to leave the field unless nothing or one of the dropdown list options has been selected?