DataGrid component provides pagination by corresponding prop, which accepts true | undefined (according to source).
While pagination component itself has some props to change it's appearance, seems like there's no way of passing any of those to DataGrid's inner pagination?
At this point it seems that if you want to use custom styled pagination you need to use DataGrid and Pagination separately.
Anyone knows anything about this?
Oops, it was right here - https://material-ui.com/components/data-grid/rendering/
Related
I have a custom component and would like to apply the exact same styles as the <Typography> component gets when setting the noWrap prop. The following does work:
<span className="MuiTypography-noWrap">
But there's of course no actual type-checking or "link" to anything here, which means if the name ever changes or is removed in a future version, I won't get any type/build error from it.
Is there a "Material UI way" to reuse/copy these classes? E.g. is there somewhere I can import/access these names from?
I assume you have a reason, but given your example of a span element, I can't help but wonder why you're not just using the MUI component.
I've never done this before, but I was curious and the styles are indeed exported. Not sure if this is a good idea or if there is another way...
import { styles } from '#material-ui/core/Typography/Typography';
const noWrapStyles = styles(theme).noWrap;
Is there a way to specify first-day-of-week for Vuetify Date picker globally?
I don't want to specify the props on each separately.
No, there isn't a way to do that
You have to use the widget as per documentation (https://vuetifyjs.com/en/components/date-pickers) with the first-day-of-week property.
<v-date-picker
v-model="picker"
:first-day-of-week="1"
></v-date-picker>
if you look into code, you'll notice that the param default is 0, so there's no magical global setting for this.
https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VDatePicker/VDatePicker.ts#L64
As for few other components' defaults, you can simply wrap it in new component (let's call it MyDatePicker) and use that one across the application instead.
To harness all event handlers intended for Vuetify component VDatePicker upon your custom MyDatePicker, you'll need to add v-on="$listeners".
I have created a extjs form which is divided into 2 parts using column layout and have almost 10-15 input elements in it. How can i disable all these input elements at a time depending on a condition. Currently i have created a function which fetchs all the components in a form and using ext.each loop through each element to disable them
Here is the function that i use
function prepare_form_view(form){
var f=Ext.getCmp(form);
var els=f.query('component');
Ext.each(els,function(o){
var xtype=o.getXType();
if(xtype=='textfield'||xtype=='combobox'||xtype=='datefield'||xtype=='textareafield'||xtype=='button'){
o.disabledCls='myDisabledClass';
o.disable();
}
});
}
Is there any alternative way so that I can disable all elements without looping through each and every elements. I want to use this function with other forms too. I looking for something like 'setFieldDefult' function.
If you are using FormPanel in ExtJs 4.x this is what you are looking for -
yourFormPanel.getForm().applyToFields({disabled:true});
The getForm() method returns the Ext.form.Basic object, with this class, you also could access to all the fields on this form with getFields(), then you could iterator all the fields to do anything.
Hope this helps and good luck:-)
What about panel's disable/enable method? This seems much easier.
panel.disable();
panel.enable();
Here is a suggestion.. Since, you say your form is divided into two parts why don't you put them in a FieldSet ? You can disable the fieldset as a whole with one method ie, setDisabled.
This will avoid the looping of components and disabling / enabling them one after the another.
You could use the cascade function of the form panel which is the ExtJs way to to do it but if you check the source code of the cascade function you will see that it uses a for loop also. The only benifit of using the cascade function is that it will work also for forms with nested panels. I think that your implementation will not work properly a case like that.
I have to create a table in my wizard page and I want to create it using TableViewer. I'm using WindowBuilderPro for designing my wizard page. The TableViewer control is available in the palette of WindowBuilderPro but I'm not getting how to use it properly.
Has any body used the same?
Thanks a lot in advance!!
You have two ways of filling the TableViewer with contents (similar to TableViewers in JFace):
You can define a content provider and a label provider manually. A content provider has to return a set of Objects, that represent each line of the table; while the TableLabelProvider translates the returned objects to texts in the columns. The content and label providers are to set in the Properties box on the left. In this case, the resulting code should look like the following snippets: http://wiki.eclipse.org/JFaceSnippets#Snippet001TableViewer or http://wiki.eclipse.org/JFaceSnippets#Snippet007FullSelection.
On the other hand you could define JFace Data Bindings to fill the table with contents. In this case you have to define a corresponding binding, that returns the list of all contents; additionally you have to create a label provider, that works similar to the previous one.
There is also a way to fill the table content using a newer API then supported directly by WindowBuilder: you could create TableViewerColumns, and ColumnLabelProviders for each column, thus resulting in much nicer code for Label Providers (and also this API is newer, so it should be preferred for new JFace based code) - but in this case you have to create your code manually. See the JFace Table tutorial from Lars Vogel.
Additionally, if you don't know the JFace Viewer framework from before, I suggest reading the first few questions listed in the JFace FAQ to gain a better understanding of the ideas (and the tutorial from Lars Vogel is also nice for this reason).
I need a option to hide the header from a dojox.grid.DataGrid grid.
Didn't find anything.
I'm grateful for any info!
I use in dojo 1.6 (and probably works since dojo 1.3)
#myGrid .dojoxGridHeader { display:none; }
You can use CSS:
.dojoxGrid-header { display:none; }
This solution is taken from:
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html#hiding-the-headers-of-a-grid
u can connect at the postrender of the data grid. then find the headerGrid element created
then put style display to none.
//workaround the grid calls postrender after
//the component is at the dom.
//so then i can change the style to reset the header to invisible
dojo.connect(grid,"postrender",function(){
var headerGrid =this.domNode.firstElementChild;
headerGrid.style.display="none";
});
I would recommend switching to using the new and improved dgrid instead of datagrid, it is a lot better!
The setting for hiding headers is the attribute 'showHeader' which is a boolean value.
Check out this dgrid tutorial that talks you through defining grid structures including 'showHeader'.