I am use UI Grid to draw a table.
Here is UI Grid offical webiste:
http://ui-grid.info/docs/#/tutorial/215_treeView
Now, I want to switch collapse icon and selectAll icon.
By default UI Grid, the collapse is first element, selectAll Icon is second element.
I want to switch of them.
Here is the sample
http://embed.plnkr.co/DODIxKaQ5nrqNO9eUObe/
Anyone can help with this ? Thanks a lot.
I don't believe it's possible, yet... you might want to add your vote here...
https://github.com/angular-ui/ui-grid/issues/4862
I just added my two cents worth.
Related
I am trying to make a card that is draggable, which is layered on top of a grid, and when moved, I want it to snap to the different sections of the Grid. I am able to create the grid with the columns and rows and also a draggable item, but I am not sure as to whether the snap to grid is possible with Material UI. Is there a way to do this by using Material UI and ReactJS?
If not possible with Material UI, is there another dependency I can use to achieve this?
I have used many drag and drop libraries but love this one most. You can give it a try.
There is a story book demo at https://bokuweb.github.io/react-rnd/stories/?path=/story/grid--both. I think that perfectly resolve your problem.
react-dnd is compatible with Material UI and lets you create a drag layer and snap to a grid.
See react-dnd's basic demo here
And here is how you can extend it to things like: snapping, grid constraints, render arbitrary child components, reordering children
I'm not sure if this is the right place to ask because I dont have any code to show. I'm actually looking for ideas on possible ways to solve my problem.
I have an app that displays the grid on the screen when the media query has a min width of a tablet.
But when the view is in mobile mode I don't want to show the grid. Instead I have a drop down menu which has a grid option. When selected will be show in a paper-dialog (pop up)
The problem is I have to create two grids (vaadin-grid) and show the appropriate one based on the view. Is there a way to have only one grid? Can I put it in a paper-dialog but not pop-out when in tablet and desktop view?
Thanks in advance
If your grid element has every custom property then that is an element in the DOM, so you can move it into the dialog if thats needed using javascript:
let myGrid = this.$$('#myGrid');
let myDialogContent = this.$$('#myDialogContent');
Polymer.dom(myDialogContent).appendChild(myGrid);
Also if you think it a different way, then you can hide the grid outside of the screen and you can slide that in when it's needed like a drawer panel and you dont need to move the element at all in the DOM.
By the way for programming question stackoverflow has the https://softwareengineering.stackexchange.com/ site, but I think it is Ok to send it here.
I'm going through Angular Material Design Gridlist and they have not mentioned anything about handling hover/click on the grids.
So, is there a way to do it or should I use buttons inside each grid to handle click events ?
For anyone coming across this using material-ui, you can use the onClick attribute to the same effect.
You could just add a ng-click="foo(bar)" to the <md-grid-tile> element:
http://codepen.io/anon/pen/pJggEb
Why not just add the ng-click event to the grid-list. See:
codepen example
(click yellow)
Just giving 1 more option for this to work:
Angular Bottom Sheet. Here click on the 'Show as Grid' to see clickable grid items.
Using ExtJS5 I want my toolbar buttons to look like the normal ExtJS buttons. In the documentation I see the CSS Mixins but I am not putting things together. Can someone give me a kick in the right direction? Thanks.
Use defaultButtonUI in your toolbar:
defaultButtonUI : 'default'
See documentation of defaultButtonUI:
A default ui to use for Button items. This is a quick and simple way
to change the look of all child Buttons.
If there is no value for defaultButtonUI, the button's ui value will
get -toolbar appended so the Button has a different look when it's a
child of a Toolbar.
See https://fiddle.sencha.com/#fiddle/jpo
Please have a look on the following image.
How to display values along slider like bars with values ( Extremely unlikely, Neutral and Extremely likely ) as displaying in above image ?
I am fairly certain this is no built-in functionality for this. Make sure to always check out the Sencha Market in case someone made a custom component/extension/plugin though just in case.
My recommendation would be to create your own custom component, which should be simply a container with a vbox layout. First item should be your slider, second item probably another container with a hbox layout. Put your slider values as items under the hbox container with some custom CSS. Take it one step further if you want, and maybe in your constructor/initialize function add a listener to the slider and when it changes you can do something with the labels to indiciate the selected value.