Is there a way to format the options of a React input dropdown?
For example I would like to have an autocomplete dropdown that displays the options in a formatted fashion with columns. Almost like a dropdown data grid so that the user can see "Name", "Address", etc. in a uniform way.
React will render whatever you want into the DOM with the classes or styles that you choose. Solving the design problem wouldn't be any different then if you were just doing it with just html and css.
The React part of the equation is going to be handling interactions and making sure the right classes/styles end up on the right components. You can also always just opt into using a third party library built in react like http://jedwatson.github.io/react-select/
Related
I'm trying to use Material-UI's component <Autocomplete/>
However, I want to remove certain functionality that isn't necessarily customizable according to the API. For example I want to remove the multiselect filter tags and shown below. Would it be possible just to take the logic of passing in a list and being able to search/autocomplete?
I was trying to implement a custom Date filter in ag grid using React. The link I followed is a link!
I was able to create the component (SingleDatePicker) and able to render it on the cell. But I had tried a lot to make it filter the data with the selected date. It does not happen to filter. I have used the methods according to the documentation like updateAndNotifyAgGrid etc. but still no luck.
I am using the agDateColumnFilter and my own custom component for rendering.
Could anyone please help me point out where I am doing wrong for this to not filter the data.
I’m working on a hack for table support (one level deep) using draft.js
I have one requirement: All existing editor functionality needs to also work inside this table
I present three choices to you, please pick one and explain why you did so:
Nested Editors (One for each cell) - I’m guessing I’d have to implement selection handling between editors
Table cells as enitites, wrapped in a Custom Block Component that renders the table and manages columns and rows. - It'll be costly to develop this, since I'll need to interfere with a lot of event handling and rendering.
Is there another way that you think could work better?
I have a solution for tables in draft-js that works pretty well for us. I do not use separate editors for each cell, just regular EditorBlocks that are all part of the main editor tree. There's a working example here https://draft-js-rte-evanmorrison.netlify.app/ and the repo here https://github.com/EvanMorrison/draft-js-rte
I have a "TableCell" custom block type that primarily just renders a standard EditorBlock, but uses React.createPortal to render into the applicable table cell.
The information necessary to recreate the table structure is stored in the metadata of the first cell of the table.
When rendering the first block, I render its EditorBlock component wrapped in the full DOM structure of the table. The <th>/<td> tags for all but the first cell are empty, but are given a data attribute corresponding to their position in the table.
Then I use ReactDOM.createPortal when rendering each of the subsequent TableCell blocks into the correct position in the table.
As far as draft-js is concerned it's just rendering blocks in the usual linear fashion. This makes editing, managing selection state, & the import/export of html no more difficult than for any other block type for the most part. Though you do have to take precautions with selections and editing that cross into or out of the table.
I am using nested Editors in each cells (option 1). Implementing style functionalities inside each cells is much easier. You can use the functionalities you've already use in the 'main' Editor.
There are two main components in my implementation of table. The Table component, a custom block component. And inside each cell of that component is the Subeditor (a nested Editor component). The EditorState for each Subeditor is stored in a Redux store.
Selection handling between editors is quite a handful though.
Angular UI Grid currently allows for double-clicking on fields for editing, but you can only do this one at a time. Currently, I need a user to click on a button and then have all rows show the editable input fields. I was unable to find a solution online and am now posting a question here.
Anyone else have a current or easy hack for this before I have to start customizing the UI grid library (something I don't want to do yet)?
Thanks!
It is plausible to do this by providing a custom cellTemplate where that template is the editableTemplate, or quite a bit of the editable template. This would mean the edit widgets were shown at all times.
Having said this, the reason that ui-grid doesn't show all the widgets at once is performance. When you have a table you tend to render a lot of DOM elements, and slower devices cant' reasonably render and scroll that many DOM elements. You may also get issues with row virtualisation - you may end up with your editors pointing to the wrong elements in the data.
Is editOnFocus perhaps an option for you?
So what i did is, i used an ng-show directive on cell template to show and hide text box by setting an attribute on entity object of ngRow. By default edit will be false. when you press edit button its is made as true and the text box will appear.
Please find the following plunker for your requirement
http://embed.plnkr.co/tdtCbI8pw6mdSjG4SflP/preview
Hope this helps!!!!!!
I want to create a combobox with a hierarchical list of items. I need to be able to select the parent items as well as the children individually. I also need to be able to provide typeahead capabilities for this combobox.
For example, I want to make a combobox with this data in JS:
Canada
--Ontario
--Quebec
USA
--Massachusetts
--Ohio
--Texas
From this dropdown I want to be able to select any of the provinces/states individually. I also want to be able to select "Canada" without selecting it's children.
I've tried Select2 and have been digging around JQuery UI to see if it is possible, but so far I can't quite achieve the behaviour I need. I'm writing this page using bootstrap, but the given typeahead in boostrap doesn't seem to work with comboboxes at all (that I can see).
You can use Chosen javascript plugin to achieve this.
http://harvesthq.github.com/chosen/
You can store custom JS objects for each typeahead result so that it can displays and store more than just a string (a type, or ID for example). Using that would let you have different logic for country vs province/state. Here's an example of doing so:
https://github.com/twbs/bootstrap/pull/3682
So in the updater function, you could have logic based on your custom object to determine whether it's a parent or child that was clicked.
As far as making the parent look different than the child, I haven't used it myself, but there is a templating system in bootstrap. Check out this link for an example:
https://github.com/twbs/bootstrap/issues/2441
You could likely use this to differentiate the parent and child look and feel.