Need to validate a combobox selection - (in this case there is a limit on rows with the same selection)

onChange event is capturing new and old values.

I just need to reset the combobox value but not sure how to do that. Thanks for any help:


    $('#userGrid').datagrid({
        fit: true,
        idField:'key',
        singleSelect: true,
        columns:[[
           {field:'licenseType', title:'License', fixed: true, width: 120, sortable:'true',remoteSort:false,multiSort:true,
                formatter:function(value,row){
                    return row.licenseType;
                },
                editor:{
                    type:'combobox',
                    options:{
                        limitToList: true,
                        panelHeight: 60,
                        valueField:'licenseType',
                        textField:'label',
                        method:'get',
                        mode:'local',
                        data: [{
                              label: 'Administrator',
                              licenseType: 'Administrator'
                            },{
                              label: 'Analyst',
                              licenseType: 'Analyst'
                            },{
                              label: 'Author',
                              licenseType: 'Author'
                            }],
                        required:true,
                        onChange:  function(newValue,oldValue){
                          alert(newValue);
         
                          \\ update value here          
          }

I would like to change the editor of a datagrid column when another column in the row changes using a combobox.

This line runs:   col.editor = checkBoxEditor 

and it changes the editor of the object (see attached) but does not update the datagrid.


            {field:'licenseType', title:'License', fixed: true, width: 120,
                formatter:function(value,row){
                    return row.licenseType;
                },
                editor:{
                    type:'combobox',
                    options:{
                        limitToList: true,
                        valueField:'licenseType',
                        textField:'label',
                        method:'get',
                        mode:'local',
                        data: [{
                              label: 'Administrator',
                              licenseType: 'Administrator'
                            },{
                              label: 'Analyst',
                              licenseType: 'Analyst'
                            },{
                              label: 'Author',
                              licenseType: 'Author'
                            },{
                              label: 'Consumer',
                              licenseType: 'Consumer'
                            }],
                        required:true,
                        onChange:function(newValue, oldValue) {
                            if (oldValue != '') {
                                var col = $('#userGrid').datagrid('getColumnOption', 'modelItem');
                                if (newValue == 'Analyst') {
                                    col.editor = checkBoxEditor;
                                } else {
                                    col.editor = null;
                                }
                            }
                        }
                    }
                }
            },


Thanks for any assistance.

Looks like it's hanging in my Java code before the window displays.

Sorry for bothering you with this one,
Gary

Thanks for the example, but things are behaving differently when creating objects with code.

In this example the datagrid is created in the window onOpen() event.  When test2.html is opened, nothing will be displayed until the datagrid is populated:

https://netvisn.sharefile.com/d/s0f77ac3d0f5456a9

I need to inform users that data is being loaded.

Thanks for your help,
Gary

Hi,

Thanks for your help.  Trying out a lot of options but still have no success.

All of the code and html to create the datagrid is now in the window onOpen event.  Even with this the window will not display until the datagrid has loaded.  Is that the last event to be fired on a window being displayed?

This project is real close to being released to customers so I will be needing an EasyUI license soon.  Is there another means by which I can tell a user that the window is being prepared for display?

Background: The app has ability to display multiple datagrids.  Putting the datagrids in windows makes them dragable.  Maybe a solution would be to make the datagrid dragable, except that the windows styling seems nicer.

Thanks,
Gary

Had another attempt at this. I'm guessing it's due to the datagrid being inside a window but not sure.

Moved the datagrid code to the onOpen event of the window thinking that the window would be visible before the datagrid started loading.

No luck.  The window was not shown until the data loaded.  Anyway around this?

Thanks,
Gary

Problem is I can't get the data in pages from the source.  That's what's taking the time.  Once the data is there the grid loads fast.

I'm thinking of setting up the loader initially with a url with no data, and with the Panel onOpen event, change the url to the real one.

Am I on the right track?

Thanks,
Gary

I may not be using pagination correctly.  Need to check that out.

Thanks

Hi,

A Window is being created in code (a result of a drop).  The Window contains a DataGrid which is populated with a loader().

When the loader takes a long time to load due to many rows, the Window will not be displayed until the loader is finished.  Ideally the Window and DataGrid would be displayed while the loader is running so the user can see 'Processing....' message.

Would you have any ideas solve this?

Thanks,
Gary

The app has multiple windows each of which contain a datagrid.  What's the best way to get rid of a window/datagrid?  They will not be needed anymore so I would like to clean up as much as possible.

Thanks,
Gary

Bingo!  Thanks for you help.

Thanks for the explanation.  Making progress but can't figure out why toolbar icons are not showing:

<div id="toolbarxOkJJIE1hcmtldGluZyBFdmVyeW9uZQ__" class="datagrid-toolbar">
<a onclick="javascript:groupSort(&quot;xOkJJIE1hcmtldGluZyBFdmVyeW9uZQ__&quot;)" plain="true" iconcls="icon-save" class="easyui-linkbutton" href="#">Default</a>
</div>

Pasted the <a> in an EasyUI demo and it worked.   The toolbar icon worked using iconCls: 'icon-sort' property.

Thanks for any suggestions,
Gary

I've seen other topics like this which helped me narrow down the problem.

I have a need to dynamically change the DataGrid title and toolbar. This code will fire the loader:

  dg.datagrid({
    title: title,
    toolbar: toolbar
  });

When pagination is defined it also fires the loader:

        var pager = dg.datagrid('getPager');
        pager.pagination({
          displayMsg: '{from} to {to} of {total} items',
          layout:['list','first','prev','next','last']
        });

Is there a way to avoid this, am I doing something wrong?  The loader is defined like this:

          loader:function(param,success,error){
            $.ajax({
              type: 'POST',
              url: 'init-group-members?n_tab_id=' + $.urlParam('n_tab_id') + '&groupId=' + g.id,
              data: param,
              dataType: 'json',
              async: false,
              success: function(data){
                success(data);
              },
              error: function(){
                error.apply(this, arguments);
              },
              complete: function(jqXHR, textStatus) {
              }
            });
          }

Thank you!

Hi,

A textbox in IE 11 shows an 'x' after entering characters.  This does not happen in Firefox.

I want to use the clear icon textbox demo example but in IE both are displayed.

Thanks for any help,
Gary