Is it possible to create a form item that shows a couple of form fields in a drop down/hover component?

[wallytax]

I created a ListGrid subclass including a ToolStrip component as an extra grid component. That ToolStrip contains a form with filters for the grid's data. The form shows one or more fields horizontally aligned (in one row). Because of limited space, I would like to add a drop down button (or menu) that allows extra filter fields being shown vertically. The screenshot below, shows what I have so far, using a PickTreeItem to show the "Other filters" button, but I don't think this component is suitable. Clicking the button should show a couple of checkboxes that allow a tri-state selection ("on", "off", "both"), but it should be possible to add other types of fields as well.


I've seen the AdaptiveMenu example and that looks promising, but that menu is part of a ToolStrip and not a form. Because my form is also in a ToolStrip, I might be able to add that AdaptiveMenu after the form, but I need to be able to post the form data as a whole.

Any help would be appreciated.

[Isomorphic]

There are many ways to do this, but one is that you can put components inside menus, or just use checkmarks in the menu (menuItem.checked).

[wallytax]

That is promising, I'll look into that. For me its crucial to be able to create tri-state checkboxes. If - for example - I want to create a filter for products being active or not, then I want these three checkbox states:

• checked: return all active products
• unchecked: return all inactive products
• "gray square": return all products

[Isomorphic]

menuItem.checked is just boolean, not tri-state. You can add your own Menu columns, since Menu is just a ListGrid, so you can add whatever fields you like. Or, as we previously covered, component embedded in the menu let you do whatever you want, as well.

[wallytax]

Okay, one final question then: which FormItem component do I need to use?

[Isomorphic]

You said you wanted a tri-state appearance, CheckboxItem can do that if you use showUnsetImage.

[wallytax]

Actually I meant the form item I need to use that will show a menu in which there are tri-state checkboxes. I've managed to create tri-state checkboxes by setting the valueMap option to { "": null, false: "Inactive", true: "Active" } and allowEmptyValue to true.

[Isomorphic]

Sorry, we're not following the question..

There is only one kind of FormItem that shows a Menu. It's PickTreeItem. It does not show checkboxes at all, let alone tri-state. You would need to configure the Menu autoChild to do that, but..

There is also no particular reason that we can see that you would use a FormItem in the first place .. ? We did not suggest that. We suggested either using a Menu with menuItem.checked (which is not tri-state) or using whatever you want as embedded components within a Menu. Those don't have to be FormItems.

We've already given you a few different ways to solve this problem.. we do have Consulting and Training services if you just want this done for you.

[wallytax]

I'll have a look at the PickTreeItem then and see if I can change the Menu autoChild. Or even better as you suggested, without the form item.

I'm developing for about 10 years now in SmartClient, would there be training courses for me? I thought I was pretty experienced, given that I've built a couple of pretty extended applications. Truth be told that I currently don't have resources for training courses.

[Isomorphic]

That's great, glad to hear it, we didn't immediately notice the age of your account. We were just trying to figure out why the suggested solutions weren't connecting.

We definitely do have advanced training courses, as well as 1-on-1 time with some of the people who actually build the framework. However, as you say, not good timing..

Consider also just a SelectItem with some customized ListGridFields (use pickListFields to add a valueMapped field and use canToggle). The PickList of a SelectItem is just a customized ListGrid, as is Menu. All the same power under the hood.

[wallytax]

I'm not sure if someone can help me further, but I'll give it an attempt anyway. I've managed to create a screenshot from some experiments with a SelectItem.

It looks promising, but getting it exactly how I want it, is not easy at all. The goal is to have the search form send a request to the server like this: GET /products?search=null&assemblable=null&active=true&ending=false&obsolete=null

I've a couple of issues with this approach:

• To distinguish between values being false or null, I need a tri-state checkbox (the null value would be shown as gray square, but I can't have a tri-state here as it seems). To be 100% clear: active = false means "give me all inactive products", active = true means "give me all products".
• I see "undefined" as first value.
• I don't want the drop down to close when I click an item.
• Ideally, I want a click on the whole record to toggle the checkbox, not just clicking the checkbox.
• How to combine the row values with the other form values (in this example that is only the "Search" field, but in my application it are more fields).
• If the drop down is closed, the value display might be "Active, NOT Ending", but this would be a bonus.

I've now used code like this to define the field options:

  var fieldOptions, valueMap;

  valueMap = { '': null, false: 'No', true: 'Yes' };

  fieldOptions = {
    allowEmptyValue: true,
    check: false,
    displayField: 'title',
    editorType: 'SelectItem',
    optionDataSource: isc.DataSource.create({
      cacheData: [
        { name: 'assemblable', title: 'Assemblable', valueMap: valueMap },
        { name: 'active', title: 'Active', value: true, valueMap: valueMap },
        { name: 'ending', title: 'Ending', valueMap: valueMap },
        { name: 'obsolete_stock',  title: 'Obsolete', valueMap: valueMap }
      ],
      clientOnly: true,
      fields: [
        { name: 'name', primaryKey: true, type: 'text' },
        { name: 'title', type: 'text' },
        { allowEmptyValue: true, name: 'value', type: 'boolean' }
      ]
    }),
    pickListFields: [
      { name: 'title' },
      { name: 'value', width: 30 }
    ],
    pickListProperties: {
      canEdit: true,
      showHeader: false
    },
    pickListWidth: 200,
    valueField: 'name'
  };

I have attempted to set multiple: true for the field, which gives checkboxes in front of each row and takes care of the drop down not be hidden after clicking a record. But, this can't be a tri-state checkbox as far as I have seen.

[Isomorphic]

You've put your valueMaps in the data, they belong on the fields.

We believe you wanted images to show the value, not just "true" / "false" strings, but you have no valueIcons declarations.

You've not set canToggle at all.. as we mentioned, that's what makes the value change when you click. You probably don't want actual editing mode to kick in (to eg, edit the "title" field), so you want editEvent:"none".

To avoid automatic dismissal of the pickList you are going to need to add handlers for the events that cause it (mouseDown, click) and cancel them (return false).

FormItem.formatValue is how you format the form item's value, to get your "Active, NOT Ending" effect.

If you are trying to put together criteria from multiple sources, that's just DataSource.combineCriteria().

[wallytax]

The approach with a menu seems to be more promising:

Now, the tri-state functionality is possible! Also the drop down remains visible when clicking an item. Clicking the label is also working!

I'm trying to continue with this approach, but the first issue that I need to fix is, how to get this menu inside the form? Now it is positioned after the search form (as part of a ToolStrip). I need a form button that opens a menu. Using type 'button' and creating the menu from a click, isn't positioning the menu correctly. I need a MenuItem component, but that can't be part of a form. Do I need to create a CanvasItem that contains the MenuButton?

[Isomorphic]

Both approaches will work if you just follow what we're saying..

Yes, if you want a MenuButton to be part of a DynamicForm, you just use a CanvasItem, and you'll notice PickTreeItem is a CanvasItem.

We've raised this a few times now, but.. we're still not aware of any reason why it would be important for this component to be part of a form vs merely adjacent.

[wallytax]

Thanks a lot for the quick responses!

In this example it probably doesn't matter if the menu is after the form, but what if I wanted another form field after this? Well yes, I could create another form after the menu, but I'm only showing fragments of the whole component (a grid) and that grid has built-in support for one form with filters. If I could just add a field to it that acts as field, setting values as such, that would be beneficial.