I am using gridstack to render variable content onto a website. I need to render a table and some text inside the grid element, which works fine so far. BUT I want to allow the user to select portions of the rendered table text or other plain text with copy and paste but gridstack does not allow the selection it just drags the widget. Is there a way to make a handle bar visible and to allow only the dragging when the user selects the handlebar not the content ?
It should work to override the handle selector in the 'draggable' options, e.g:
GridStack.init({
draggable: {
handle: '.your-handle-class',
}
});
https://github.com/gridstack/gridstack.js/tree/develop/doc#updateel-gridstackelement-opts-gridstackwidget
Add
onMouseDown='event.stopPropagation();'
To any element you don't want to be able to drag with grid stack.
:)
Related
I wasn't sure what to title this without explaining it all there. Essentially, I want to populate part of a screen with a bunch of buttons. The buttons should have text from an ArrayList (or other structure) and they should be aligned horizontally to each other from the left to the right of the screen. When there is no more room to the right, it starts a new row. I've attached an example. Example layout here
I know how to make custom list adapters for my objects and how to make listeners for parts within the list items, but I'm just not sure how to make the "list" of buttons go horizontally with wrapping to the next line.
It seems https://github.com/google/flexbox-layout might help you.
You can use FlexboxLayoutManager as adapter, or simply place all the buttons inside FlexboxLayout, they will wrap automatically depending on their width.
Is it possible to force the user to select only one value from a filter ?
For a radio button filter as below, is it possible to remove the buttons all & none and make sure that only one Choice is selected ?
you cannot change the existing filter features or functionality without developing a custom extension for a new filter control.
that said, you can certainly emulate a filter using what's called a Property Control and a Data Limiting Expression. for single selection, you're stuck with either a Dropdown control or a Listbox (single select) control.
you would need to...
create a Text Area Visualization on the page somewhere
insert a Listbox or Dropdown Property Control into the Text Area Visualization
create a Document Property with the same data type as your filter column and associate it to the Property Control. you can set this to Unique Values in Column or write in your own Fixed values.
open the Properties dialog on the visualization you'd like to filter and navigate to the Data page
scroll down to Limit Data Using Expression and use an expression like [MyFilterColumn] = "${MyDocumentProperty}" (quotes are required for string values; if numeric then omit quotes)
Please add this CSS in the HTML page of the spotifre to remove all and none
.ColumnFilter .sf-element-filter-item:last-of-type { display:none; }
.ColumnFilter .sf-element-filter-item:first-of-type { display:none; }
Another way to force the users to select one option is to add a Show/Hide in the visualization like this: Hide if UniqueCount([Field]) is greater than 1
I'm working on an Xpages application on which I have a view control.
I tried to put a checkbox in the column header to select all of the check boxes in the view.
The problem is when I go to another page from the view, its lines are not checked and the selection is made only on the visible page.
So, I want to be able to select all the rows in all the pages of the view, this without the selection disappears when switching from one page to another of the view.
There are couple of problems with views and selections.
First of all, pager actions to move between pages does not process 'select all rows' data because it is enabled to use partial execution by default. If you put partialExecute="false" into your pager, you will see that 'select all rows' checkbox will be maintained between pages.
However, if you have a checkbox on a column and the columnHeader, the component maintains a selectedIds array in the back-end. Unfortunately, this array holds only visible selections. Because the array is maintained by the viewPanel component, which is not aware of the list of data entries that are not shown.
Also, checkbox implementation does not provide any even mechanism where you can grab selections on the back-end to cache them between pages.
To determine select all checkbox can be doable with a little trick. Assuming you are using all default styles;
<xp:inputHidden
id="inputAllSelected"
value="#{viewScope.allSelected}"
defaultValue="false"></xp:inputHidden>
<xp:scriptBlock
id="scriptBlock1">
<xp:this.value><![CDATA[
function getSelectAllCheckbox() {
return dojo.query("input.xspCheckBoxViewColumnHeader")[0];
}
function toggleSelectAll(){
dojo.byId("#{id:inputAllSelected}").value=getSelectAllCheckbox().checked;
}
dojo.addOnLoad(function() {
dojo.connect(getSelectAllCheckbox(), "onchange", toggleSelectAll);
});
]]></xp:this.value>
</xp:scriptBlock>
To cache checkboxes between pages, you would implement your own checkboxes by using custom columns. I recommend using a data table component to get more flexibility.
Ok, this is basically what I'm doing right now. I create the raphael text object. I use a click event to open a dialog box. Then I make the changes to the text in the dialog box. This isn't how I wish to implement this though. I want my implementation to be somewhat similar to the way text is created in MS Paint where the user can click on the text object and change the text as they're typing. Does anybody know how to implement this using a raphael text object?
A simple solution would be to create a <textarea> when the user starts editing the text. Fill it with the current text and place it over the text object. Then, when it loses focus (onblur), remove the text area and copy the text back into the text object.
If you really want to edit the text "in place" in the text object, then you can let the user type in a hidden text field. But in this case you'll have to implement all the cursor and selection logic yourself. See this fiddle (which only allows using the right and left arrows to move the cursor, with shift to select text so that you can copy and paste).
Alternately, I don't know if contenteditable works for SVG content, but that would be a very simple solution if it did work.
if I want to format a small snippet of text using the dropdowns (ie Heading 1, 2 paragraph), it often ends up changing the tag for a large snippet of text (or even half the page).
How do i change this behaviour?
When you select part of a tag in Dreamweaver and change the format, DW will change the format of the parent tag.
What you are describing requires a different technique as you are trying to get inline formatting. You need to select the text and then wrap it with a span tag (Danilo's advice is correct in that regard). You then apply the CSS style you want to the span tag to change the format.
So to style No longer want to receive these updates it would look like so:
<p>No longer <span style="font-size:18px;">want</span> to receive these updates?</p>
After DW gets through with it. In Design View after wrapping the text with span, select in the Tag Inspect and switch the Property Bar to CSS mode to style.
When used like this the property inspector will expand the selection to include the parent tag of the selected text, causing the selected option in the property inspector (p, h1, h2, etc) to replace the parent tag with the selected option. you cannot change this operation.
You can make a selection, hit CTRL+T (CMD+T I assume on Mac) which brings up the Wrap Tag editing option, type your tag, then hit enter and the selection will be wrapped with the tag of your choice.