Material UI - Remove "Rows per page" in the component TablePagination - material-ui

How can I remove the select "Rows per page"? I don't want to use it in my project...

Correct answer you should find in documentation. For the property rowsPerPageOptions one says:
Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed.
So you have to specify rowsPerPageOptions={[]}, that's all folks.
The documentations could be found here.

Just assign the attribute labelRowsPerPage in TablePagination tag to an empty string.
<TablePagination
labelRowsPerPage=''
{...otherProps}
/>

I cannot comment yet, unfortunately.
But for MUI 5 I got an error when attempting the empty array.
It is possible that the cause is my pageSize is set to 5, so the following worked fine for me:
pageSize={5}
rowsPerPageOptions={[5]}
This is an answer for the comment from FooBar:
It's a nice solution, but it will show an error in Material UI 5: Material-UI: The page size 100 is not preset in the rowsPerPageOptions Add it to show the pagination select. – FooBar Oct 26 at 14:26

Just add the options property with paging as false to your JSX call for Material Table
<MaterialTable
//your other props
options={{
paging: false
}}
/>

Related

TYPO3 hide content element options in wizard

I want to show only the column options from the grid elements tab to the editors group when they create a new content element. So I tried to edit the groups TSconfig.
tx_gridelements.setup.tabs4 >
tx_gridelements.setup.tabs6 >
This has no effect. How do I remove all but the column options?
Update: With your help I figured out that my problem is not about the text in the TSconfig but that it is not loaded from the backend user group nor the beuser.
The elements you want to disable are located in Page TSconfig under mod.wizards.newContentElement.wizardItems. You can see them in the "Info" module under "Page TSconfig" :
You can simply disable them by adding
# example for the given screenshot
mod.wizards.newContentElement.wizardItems.common.elements.header >
I don't think that the answer from #statix will work with grid elements.
But in the settings of your backend layout, you can define what type of content elements are allowed within a specific content area:
And within the settings of each grid element you can define again, which content elements are available, e.g. to prevent nesting of grid elements.
Put this code in root page tscPage TSConfig
tx_gridelements.excludeLayoutIds=your grid id
May It helps you!!

Material.css select all option within the multiselect element

Can anyone suggest a link or solution to add select All option within the multiselect dom element of the material design. I want all the options to be selected except for the select all option and want to display it in the text field and post it.
I couldn't find a solution for it. Can anyone suggest.
Pls Note: I dont want to add it as a button outside the dom.
$("#all_member").change(function(){
if($("#all_member option[value=-1]:selected").length > 0){
$('#all_member option').attr('selected', "selected");
$('#all_member').prev("ul").find("li").addClass('active');
$('#all_member').prev("ul").find("li span input").attr('checked', "true");
}else{
$('#all_member option').attr('selected', "false");
$('#all_member').prev("ul").find("li").removeClass('active');
$('#all_member').prev("ul").find("li span input").removeAttr('checked');
}
Thanks IN advance!
I can provide the logic. The rest is up to you.
Put an onChange event handler (function) for your select.
On that function, put an "if statement" to check if the value is equal to the value of "Select All" option.
If it returns true, then manually call the element and set its value to the value of all the other options (probably an array).

Element Checkbox got its label always to the left and needs a link

How can I change the positions of checkbox and label and how to implement a link into the label?
$acceptGTC = new Element\Checkbox('AGBs');
$acceptGTC->setLabel('I Accept the GTC (show it).');
$this->add($acceptGTC);
regards
n00n
meanwhile:
I tried to overwrite the view helper for checkboxes.
copied
*/vendor/zendframework/zend-form/src/View/Helper/FormCheckbox.php
to
*/module/Application/src/Application/View/Helper/FormCheckbox.php
added to module.config.php
'viewhelpers' => array('checkbox'=>'Application\View\Helper'),
But it still uses the original one...
Do I have to tell zend to use my FormCheckbox?
I don't exactly know the way you are rendering your Zend_Form_Element, but in order to enhance the rendering as you want you should build a custom decorator, and add it to this element.
You should read the Zend documentation on Zend_Form_Decorators, everything is quite well explained and should lead you to a fancy solution.

TYPO3 extension: how to find certain TS setting

I found in typo3 admin side(/typo3), you can have two ways to set up TS,
you can set up through template->root, I think TS here will affect the whole site.
you can set up through template->certain page, it will only affect this page.
So my question is:
If I want to find where(which page) has TS setting such as : code = LIST, how could I do?
Use Web > Template module it has tools, you can for an example use Template Analyzer for the search
Try querying the database in phpMyAdmin or similar. The following looks in Template Setup:
SELECT pid, config, constants
FROM sys_template
WHERE config LIKE '%code = LIST%'
Replace config with constants to look in Template Constants. pid is the page ID.
If it is not set in the TypoScript, it perhaps has been set in the plugin itself. Just check the plugin content element itself.
In the Template module, go to the page where the setting is in effect.
Use the TSOB (Typo Script Object Browser) to search for "list":
This must show you all TS for this page that contains "list".
If you don't see the setting you can run a cmd/ctrl-F Search over the entire results.
You would have to search for "[code] = LIST".
Which will lead you to the following entry:
Hovering over the label will produce the above tooltip. Copy the line number.
Now change to the Template Analyzer. Here, you can click through all cascading templates and search for the line number:
This is definitely the line that sets that value.
From the "Template hierarchy" tree you will easily find the template that contains the setting.

Find CURRENTLY selected <option> with XPath

What's the correct XPath syntax to check if an option element is currently selected, or just to get the selected option element from a select element, on an open page with which the user, and JavaScript, may have interacted? Is this even possible with XPath, or does it lack the ability to look at DOM properties?
I can't find any documentation on this, and have (speculatively) tried:
//option[#selected=true]
//option[#selected="selected"]
//option[#selected]
but none of these work; they simply don't match any elements.
(In case it matters, I've tried this both using the $x function in the Chrome developer console, and using the find_elements_by_xpath method in Selenium for Python.)
Short answer: it's not possible.
Longer answer: XPath can look at HTML attributes, but it can't look at DOM properties. Selecting an <option> element in a <select> changes the selected property of the <option> to true, and also changes the value property of its parent <select> element, but it doesn't affect the attributes of either, so it is invisible to XPath.
To find <option> elements that have the selected attribute set, which is often how a page author might determine which option is initially selected, you can use //option[#selected]. But this does not find the currently selected <option>; changes that the user makes to the selection are invisible to XPath. There's no guarantee it will even find the initially selected option, since it's possible that the page author didn't put the selected attribute on any elements and either let the browser select the first option by default or had some JavaScript select the initial option via the selected property.
The multiple other answers here claiming that a selector like //option[#selected] can detect selection changes made by the user after the page loads are simply completely wrong.
Of course, if you're able to use CSS selectors instead of XPath selectors, then option:checked will do the job.
The problem could be the " (double quotes).
//select/option[#selected='selected'] - Will match the selected option, i am using this successfully.
//select/option[#selected='selected' and #value='specific value'] - Will only match the selected option if it has a 'specific value', i'm also using this.
If you are still having trouble, it could be an entirely different problem, perhaps there is no option node. I hope this helps.
I think we can use a knowledge from #Mark's answer and account that. Let's just find a node which HAS desired attribute:
tree.xpath('//select/option[#selected]/text()')[0].strip()
I tried "//option[#selected=''] and it has worked for me.
it is able to highlight the selected option within Page objects model.
I would try //option[#selected='true']
i.e. driver.findElements(By.xpath("//option[#selected='true']")).getText();