load combogrid on focus

[jkdoyle]

I have multiple combogrid selects on a single page.  They are all loading from the same list stored in mysql but each have different selected initial values.  It works fine except for load time.  The client will rarely use each of these selects when editing the form.  Is there a way I can initialize the combogrids when the page loads but have them essentially be empty, and then load the data for each select only when that particular combogrid is selected?  I know this should be easy, but I'm having a difficult time figuring out the code.

I have attached a screenshot of my app thus far.

Thanks
JD

[stworthy]

Using the 'cloneFrom' method can speed up creating combogrid components. Please try to download the patch from http://www.jeasyui.com/download/downloads/jquery-easyui-1.4.5-patch.zip. The code below shows how to clone the combogrid components from the existing combogrid.

Code:

<input id="from" class="easyui-combogrid" style="width:250px" ...>
<input class="cg">
<input class="cg">
<input class="cg">
<input class="cg">
<script>
$(function(){
  $('.cg').combogrid('cloneFrom', '#from');
});
</script>

[jkdoyle]

But if I do that, how do I do differing initial values?  Not all the inputs are the same when the form loads.  Using the clone patch forces all of them to the same value (unless I am doing it wrong).  Is there documentation somewhere for this patch?

JD

[stworthy]

You can set a new value after cloning the combogrid.

Code:

o.combogrid('cloneFrom', '#from');
o.combogrid('setValue',...)

[jkdoyle]

So...no way to have the datagrid of the combogrid to load at onShowPanel or on focus of some sort?

Anyone?

[stworthy]

Please look at this example http://code.reloado.com/iponif3/edit#preview. All the combogrid components share the same datagrid.

[jkdoyle]

Yes, but what if the inputs have pre-existing values like:

Code:

<input id="cg" style="width:200px" value="K9-DL-01" data-options="
            panelWidth: 500,
            idField: 'itemid',
            textField: 'productname',
            columns: [[
                {field:'itemid',title:'Item ID',width:80},
                {field:'productname',title:'Product',width:120},
                {field:'listprice',title:'List Price',width:80,align:'right'},
                {field:'unitcost',title:'Unit Cost',width:80,align:'right'},
                {field:'attr1',title:'Attribute',width:200},
                {field:'status',title:'Status',width:60,align:'center'}
            ]],
            fitColumns: true,
            label: 'Select Item:',
            labelPosition: 'top'
        ">
<input class="cc" value="AV-CB-01">
<input class="cc" value="FL-DLH-02">

[jkdoyle]

I'm coming back to this. Still thinking there should be a way to load basically empty combogrids at init, and then only load the data if/when the combogrid takes focus. I have a page that has many inputs, most of them would be unused most of the time (it manages a configuration system). They don't need to load on the page unless the user selects that input.

Any ideas?