ListGrid - modalEditing - clickMask

[yavery]

Hi,

I have a ListGrid on which I've set the modalEditing property to true. In that
ListGrid, I have a column which renders/edits using a custom CanvasItem derived class.

The custom CanvasItem class hosts an inner canvas which extends HLayout. That
inner canvas contains a DynamicForm and an ImgButton.

I've overridden the CanvasItem.focusInItem() method to focus() on the
inner canvas' button (I also tried one of the inner form's fields).

I've also overridden the CanvasItem.isEditable() method to return true.

The problem I have is that the ListGrid sets up an EditClickMask which will prevent me
from clicking any of the embedded canvas' DynamicForm fields or even the ImgButton.

As soon as I click on that FormItem's inner content, the ListGrid enters the
EndEditing mode and my editor gets closed.

If I set ListGrid.modalEditing to false, everything works as expected, but I do need
the modalEditing to be in place, for other reasons.

Is there anything else I need to override in CanvasItem for this work ?

Am I missing something ? Any idea ?

Thanks for your help,

[yavery]

Anyone ... Anyone ... Bueller ?

[Isomorphic]

What are your settings for waitForSave and stopOnErrors?

Can you show the code for your custom CanvasItem? That would make it much easier to verify the behavior you're seeing.

What version of SmartClient is this, 7.0RC?

[yavery]

Hi,

I didn't change the defaults for waitForSave and stopOnErrors. I believe false is the default for both.

I just tried setting them both to true but that didn't change anything.

If I recall, I was able to reproduce this using a simple custom CanvasItem derived class. I've experienced
this behavior on both 7.0 Beta and 7.0 RC.

I'll try to put together a stripped down reproducible scenario and update this thread with some code.

Regards,

[yavery]

Hi,

Here's a stripped down version of some code to reproduce the behavior described earlier:

//----------------
DataSource.create
({
   ID : 'myTableDS',
   fields :
   [
      { name : 'Name', title : 'Name', type : 'text', length : 80 },
      { name : 'Custom', title : 'Custom', editorType : 'MyCanvasItem' }
   ]
});

//----------------
isc.defineClass('MyCanvasItem', 'CanvasItem');
MyCanvasItem.addProperties
({
   init : function()
   {
      this.canvas = isc.DynamicForm.create
      ({
          numCols : 4,
          titleOrientation : 'left',
          fields :
          [
             { name : 'f1', title : 'Field 1', type : 'text' },
             { name : 'f2', title : 'Field 2', type : 'text' }
          ]
      });

      this.Super('init', arguments);
   }
});

//----------------
isc.defineClass('TestListGrid', 'ListGrid');
TestListGrid.addProperties
({
   width : '100%',
   height : '100%',
   autoDraw : true,
   canEdit : true,
   modalEditing : true,
   dataSource : myTableDS,
   data :
   [
      { Name : 'f1', Custom : 'f1a' },
      { Name : 'f2', Custom : 'f2a' }
   ]
});

//----------------
TestListGrid.create({});

With the code above, I can't focus inside the 'Custom' field but I can in the 'Name' field.

If you change the modalEditing to false, it works fine but it isn't modal (of course) which is the desired behavior.

I tried playing around with isEditable() and focusInItem() implementations within my CanvasItem class, but that didn't help.

What am I missing in my CanvasItem implementation for this to work?

Thanks again for your help,

[yavery]

Was anyone able to reproduce this problem with the provided example?

Regards,

[Isomorphic]

Hi Yan
We do indeed see the problem (and the cause) and are looking into how best to resolve this -we'll keep you posted
Thanks
Isomorphic Software

[Isomorphic]

Hi Yan,
Having looked into this we realize it's non trivial to accomplish using a CanvasItem in this way.

CanvasItems can be embedded as ListGrid editors for some purposes but there are a number of issues around embedding a form with multiple fields - it isn't going to behave equivalently to 2 editable listGrid fields without some significant work to manage focusability, tab index and tabbing order, how values are stored and updated, reacting to user interaction such as Escape keypresses and so on...
Another option might be to make use of a pop-up launched from a FormItemIcon, or to simply show 2 listGrid fields.

If you could you give us a better idea of what your requirement is - what this control is for - we can probably suggest a better approach and show you how to implement it.

Thanks
Isomorphic Software

[yavery]

Thanks for looking into this,

I'm somewhat confused as I recall reading from another thread someone wanting to extend a ContainerItem,
just like DateItem does, but Isomorphic was recommending using a CanvasItem instead, anyways ...

What I want to do is a custom foreign key picker embedded within a ListGrid but which
can also be hosted standalone, in a form.

1) the picker widget has N fields (meta driven) + 1 button

2) the fields and button have 2 purposes (lookup and visual indicator of current FK selection)

3) when the FK isn't set, it will allow the user to do a lookup using the values input
in its fields (builds a where clause using the FK input fields)

4) when the FK button is clicked, a lookup is done: if only 1 record matches, the FK is set,
if more than one record matches, a list pops up for the user to choose from

5) upon FK selection, all FK fields are filled-out using the selected record and they all become
read-only. The button's icon is changed to highlight the fact that an FK is currently set.

6) when the FK button is clicked while the FK is set, its associated fields are cleared
and the fields become non read-only again.

Our current implementation of the CanvasItem is value-less in the sense that it doesn't
hold any value (nothing to save) but is merely a U/I artifact to fill-in other hidden form fields.

I'm not sure the popup would be a nice-looking solution since we already have
a popup upon FK button click to do the lookup.

Any other ideas on how we could implement this using an embedded form within a ListGrid, such as
what we're currently trying to do ? Couldn't we just do it the DateItem way ?

Thanks again for your help,

[Isomorphic]

Thanks for the additional info on this. I think I understand what you're trying to accomplish.

The bottom line here is that (for now) we'd recommend you do this as a pop up. Simply show the static value for the field plus an icon (probably a staticTextItem with a specified icon). When the user clicks the icon, call show() and bringToFront() on your custom editor. You can then use setEditValue() to update the edit value of the ListGrid cell to whatever the user selects.

UI-wise it may not be exactly what you're going for but I think it's the only approach that's not going to involve either digging into undocumented SmartClient internals, or us adding some new APIs / functionality.


A word on the alternative approaches:

DateItems are a subclass of the undocumented ContainerItem class - this is a special formItem subclass that handles rendering out a number of sub items.

DateItems have a chunk of code to manage sub items, values, etc.
You could roll your own ContainerItem subclass, starting with the DateItem code and modifying it for your purposes, but you're getting into undocumented territory and may run into some tricky issues.

CanvasItems allow you to embed any component into a DynamicForm, but currently there is only limited support for embedding them into an editable ListGrid. We will be improving this in the future but there is a lot to do in this area and it's not currently slated for the 7.0 release.

I'm confident you could make a pop-up based approach look good, and it's just going to be much more straightforward to create.

[yavery]

Thanks for your reply.

I'll look into your proposed approach with our Product Management team and
see if it's acceptable to them.

I may get back to you on this if not.

Kind regards,

[yavery]

A question does come to my mind though ...

With my current implementation, as previously stated, I can't click any of
the fields in the inner DynamicForm because of the modal mask ... I can't
even click on the FK button either ...

So if I were to implement your proposed solution (popup), I would still need
to have a button and that button would need to work around the modal mask ...

Which class do you suggest I inherit from for my ListGrid item in order for the
button to be click-able (and call the popup), bypassing the modal mask issue?

Thanks,

[Isomorphic]

The controls are only masked because they are embedded within the grid. A separate pop-up will not be affected.

Typically, you would subclass StaticTextItem and add a FormItemIcon to launch the pop-up.

[yavery]

I'll give that a try and let you know if that doesn't work.

Thanks,

[jhollerer]

As this post is already old - is the embedded form within a list grid now available (without having the issues described here) ?