The Customer ID column is setup to use autocomplete. The autocomplete values concatenates various customer information together, to aid the user in selecting the correct one. Once selected, the Customer ID is put into the grid.
I cannot figure out how to make the autocomplete popup wider so that it fits the concatenated information.
This is what it needs to look like, which I achieved by tinkering with the elements after they were rendered. Ideally, it would be just wide enough to fit the content.
Try using select2-editor from
https://github.com/trebuchetty/Handsontable-select2-editor
The select2 editor automatically expands to the width of the column text.
Related
For an app a table, that is dynamically populated with data, is important.
How should I do the tab order for tables of data? I searched for guidelines, but could not find a good one so far.
Possibilities I see are:
Only include the table itsef using a 'tabindex=0' attribute in the 'table' tag.
Include the table rows in the tab order with a 'tabindex=0' attribute in the 'tr' tag.
I guess using the arrow keys will allow for detail navigation.
What do you advice?
The table itself and the rows themselves are generally not keyboard focusable because they're not interactive elements. If the row was selectable or expandable, then maybe it could be focusable but it's usually an element in the table row (or more accurately, an element in a the table cell) that is selectable or expandable.
Without more details on the behavior you're trying to achieve, it's hard to give exact advice, but my initial thought is that none of the table elements proper (<table>, <tr>, <td>) should be focusable.
Regarding arrow keys for navigation, that's the pattern for a grid, which is a type of table that has editable cells (similar to a spreadsheet). Again, I don't have enough info on your situation to know if a grid is what you're trying to create.
For screen reader users, they already have a way to navigate to the table and navigate within the table using the screen reader shortcut keys, so don't worry about trying to make things focusable for screen reader users.
Lately I heard another suggestion from an expert.
Generally speaking, all interactive elements should be included in the tab index, such as buttons, form fields and links. If the entire table row can be clicked, this should be in the tab flow by means of a tab index 0.
I've been looking for an approach to remove unwanted values from a views grid column filtering dropdown but I'm not sure if its even possible.
A specific view in our app only displays results where the column will contain 5 values, however the column option set has 20+. Is it possible to remove the unwanted 15 values from being displayed when the view's filter by function is used?
This documentation does not mention any way the values can be hidden.
I have added a web resource to a view column before, to change text values into an image, however I don't think this is an applicable place to add a script to hide filter by values.
I have developed plugins so not against using this medium if the approach works and does not introduce a performance hit.
Unfortunately that header filter is not open for customization/configuration. Though MS mention it as Excel like filter, it is not going to give the filter options for only values from current list. It will load the full options list.
When we had such requirements in the past - we have developed a PCF control with grid + filters and used it instead.
I'm a FM beginner and would like to know how I can show a searchable dropdown. When I create a product, I need to select a supplier from a large list. I would like to tyoe some characters, from where I find a value in the dropdown. As far as I see now, that isn't possible and the only way to do this is through a popover.
But my question is then, how to show a full table in the popover, from which I can select a value, which is filled in my form.
I would like to tyoe some characters, from where I find a value in the dropdown. As far as I see now, that isn't possible and the only way to do this is through a popover.
Actually, it's the other way around: with a drop-down list you get the option to Auto-complete using value list, which is unavailable with a pop-up menu.
how to show a full table in the popover, from which I can select a value,
You cannot show a full table in a popover. You can show a portal in a popover, and make it show all records in a table by using the x operator when defining the relationship.
Or - preferably, IMHO - use a card window to show all the records you want to select from; this could be the full table or a reduced set as the result of a find.
Selecting products or other related records using popovers always feels slow when you try to search/filter the list of records, with the introduction of card windows doing such searches/selects became a lot faster and easier to implement, if you have 2 different layouts that need to search the same list of records you can use the same card window for both, that was also a nice thing.
I've two fields on account form, one is two option(checkbox) and other is text box. As par my requirements, I've to not show the label of the checkbox but show them as simple fields without caption. I am done with it but stuck in a problem that it create a huge space between two fields, as shown in following screenshot. I would like to hear from your side to resolve this problem.
You could try this:
Set the tab to two columns, settings the first column around 5-10% (experiment with the value)
put the checkboxes in the first section, the other fields in the second one
set the first section to have 1 pixels for label width (instead of default 115)
I'm not sure how it would turn out, and would probably need some tweaking (to account for different form/window widths) but you might accomplish something close to what you need.
Another approach would be to build a custom HTML webresource, put it in an IFRAME as the only form element, and rebuild the form from scratch as you like... but it's probably best left as a last-est resort
You can convert the section from 2 columns to 4 columns, span the textbox field to 3 columns. This will reduce the checkbox field columns to 25% and textbox to 75%
This is the maximum we can do in supported way.
I'm having a bit of problems creating a DataGrid with a header label AND a text box (at this point I'm not even entirely sure this is possible).
Here's what I want to do:
I need to dynamically create a table (the number of columns can and will change, so the grid needs to be created dynamically and cannot use bindings specified in the XAML code or similar). All the columns however will always be text columns.
Because those will be text columns, I'd like to add a text box to each header to enable simple filtering of the data in the DataGrid. I don't want to add extra text fields to OTHER parts of the Silverlight page, as I want to keep things as compact as possible. Also, since the number of columns is dynamic, adding a large number of text boxes above the DataGrid wouldn't look too good either. ;)
Also, if possible, I'd like to keep a label in each header to display the names of the columns as well.
So far I've tried adding the a TextBox as the Header of a DataGridTextBoxColumn but when I do that in a very simple Silverlight project, the whole DataGrid won't show up.
Please help.
EDIT:
I saw the answer to this question: placing a text box inside the silverlight data grid column header
However, the answer itself didn't give me much to go on (the example is too short, and I'm not too good with XAML yet), and the code on CodePlex just adds extra fields to the Silverlight page. None of it tackles the problem of dynamically creating the DataGrid.
OK, here's what I did that solved my issue...
I had to use a Style to achieve the functionality of having an extra text box inside each column header and filling out the Tag property of each thus created TextBox to later find out which column has been changed.