On my react app I have 3 droplist
the first drop has the primary values (ex: a, b) the next drop will filter the values in the array using the value selected in the first drop
I'm using the ui and Autocomplete material for the dropboxes
when I select the value in the first drop the component returns the value in the event of the click to the parent, and then I call the second drop with these values
<Grid item xs={4}>
<Dropdownlist
required
name='opt1'
texto='where:'
click={click1}
options={options}
optionsList1={optionsList1}
filter='regiao'
/>
</Grid>
<Grid item xs={4}>
{optionNameShow2 === 'hidden' ? null
: <Dropdownlist
required
name='opt2'
select3='hidden'
texto=' '
click={click2}
options={options2}
valueforFilter={selectState1 ? selectState1.optionValue : ''}
optionsList2={optionsList2}
filter='local'
/>}
</Grid>
the problem is that the values are only loading when I click the second time.
the probleme is on chrome and FF so far tested
and shoud be on first click.
working exemple is on : https://codesandbox.io/s/muddy-haze-6c1kj?file=/src/App.js
TL;DR: Your filterlists() triggers a state change, but if (value) {... is using the values before that call changes are actually reflected in the current state. I fixed your pastebin.
NL;PR: setStates are scheduled to run after the function that calls them ends, thus the values you are currently using are still before the changes have taken place. Take care of those setStates separately with an effect hook.
Related
I am trying to show the current page number in an input box as a place holder the issue is I can't figure out how to update the value when users go to another page.
Here is what I tried:
<input id="currentPage"/>
document.getElementById("currentPage").placeholder = tabulator_table.getPage();
Here is the first part of the question
Here is sample
You want to use the pageLoaded callback on the table instance.
When creating the table, you need to add a property for pageLoaded as a function with a parameter for the page number. This callback is triggered each time the page is loaded.
Here is a working example, https://jsfiddle.net/nrayburn/w68d75Lq/1/.
So you would do something like this, where #table is the element id for the table and input is a reference to your input element where you keep the page number value.
new Tabulator('#table', {
...tableOptions,
pageLoaded: (pageNumber) => {
input.value = pageNumber
}
});
I am working on a developed project and new to React. I have copied a Dropdown from a previously implemented one.
{/* Previously Implemented Code */}
<Table.Row>
<Table.Cell>Planned Project Type</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell ><PtInputConditionTab whichInput="firsttb" inputType="hwy" name="PlannedProjType" disabled value={typeOptions[this.state.PlannedProjType > 4 ? 0 : this.state.PlannedProjType].label}
onChange={this.onInputChange} />
</Table.Cell>
<Table.Cell ><PtSelect options={typeOptions.slice(0,5)}
onChange={this.onChangeDropdown} disabled={this.props.disabled} defaultVal={this.state.PlannedProjTypeOver} name="PlannedProjTypeOver" /></Table.Cell>
</Table.Row>
{/* Previously Implemented Code Ends */}
{/* Previously implemented code copied */}
<Table.Row>
<Table.Cell>Planned Project Type</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell ><PtInputConditionTab whichInput="firsttb" inputType="hwy" name="PlannedProjType" disabled value={typeOptions[this.state.PlannedProjType > 4 ? 0 : this.state.PlannedProjType].label}
onChange={this.onInputChange} />
</Table.Cell>
<Table.Cell ><PtSelect options={typeOptions.slice(0,5)}
onChange={this.onChangeDropdown} disabled={this.props.disabled} defaultVal={this.state.PlannedProjTypeOver} name="PlannedProjectSurfaceTypeOver" /></Table.Cell>
</Table.Row>
{/* Previously Implemented Copied Code Ends */}
When I change the name attribute in the second section of PtSelect tag the dropdown doesnt show the selected value. It always shows the first value of the dropdown even after clicking on other values inside the dropdown. Just to let you know when I do console.log() for the value selected it is selecting those options its just that not displaying them which one is selected.
Just to make sure you understood it properly, I am trying to change the name in the section which is inside the comment line "Previously implemented code copied"
I got it fixed. Its just the defaultVal attribute parameter which I passed incorrectly.
I am using react-virtualized to render my table. Is it possible at all to replace the default Column component with a custom one? I keep getting this error
Failed prop type: Table only accepts children of type Column
Yes of course,you can do that by using cellRenderer prop in Column which is callback function and it will give you bunch of parameters and you need return the custom component that will render in cell
<Column key={column.dataKey + column.label + index} dataKey={column.dataKey}
cellRenderer={
({ cellData, rowIndex, dataKey }) => (
<CheckBox
cellData={cellData}
changeCheckBox={changeCheckBoxHandler.bind(
this,
rowIndex,
dataKey
)}
/>
)
}/>
you can find out in detail here. https://github.com/bvaughn/react-virtualized/blob/master/docs/Column.md#cellrenderer
Why would you want to do this? You have to use the Column component to define every column, and then you can render whatever you want inside each Column.
I'm using an InfiniteLoader with a Table and I have the indices of some entries that match a specific criteria stored in state. If the user would want to go through those entries, I would have to pass down to the Table each index (following a button click) and use it in scrollToIndex. However, after it's passed down, I would have to make it null again, otherwise if the user were to scroll up/down the Table, he would always end to the same index specified by scrollToIndex instead of the current scroll position.
Is there a better way to do that, other than setting the state twice, once with an index and then with a null value?
Hope my question is clear.
Table (and Grid and List) also have public methods for setting a 1-time scroll index. For Table the method is scrollToRow and you just pass it the index you want to scroll to. Maybe that would be more to your liking?
Edit: In response to the follow-up question of how you get a reference to Table if you also need to pass it to InfiniteLoader:
<InfiniteLoader {...infiniteLoaderProps}>
{({ onRowsRendered, registerChild }) => (
<Table
{...tableProps}
onRowsRendered={onRowsRendered}
ref={(ref) => {
this._tableRef = ref // Store for yourself
registerChild(ref) // And pass on to InfiniteLoader
}}
>
{/* Columns ... */}
</Table>
)}
</InfiniteLoader>
I have created an XPage with the following: Started by creating a custom layout control using the Application Layout. I aded the layout control to the xpage and then dropped in a Dynamic Content Control. I configured the control as follows:
<xe:dynamicContent id="dynamicContent1" defaultFacet="GovernanceReviews"
useHash="true">
<xp:this.facets>
<xc:ccViewDocumentTemplates xp:key="DocumentTemplates"></xc:ccViewDocumentTemplates>
<xc:ccViewGovProcurementReviews xp:key="GovProcurementReviews"></xc:ccViewGovProcurementReviews>
<xc:ccViewGovRevReporting xp:key="GovRevReporting"></xc:ccViewGovRevReporting>
<xc:ccViewGovRevWOCompleted xp:key="GovRevWOCompleted"></xc:ccViewGovRevWOCompleted>
<xc:ccViewGovernanceReviews xp:key="GovernanceReviews"></xc:ccViewGovernanceReviews>
<xc:ccViewProfilesByType xp:key="ProfilesByType"></xc:ccViewProfilesByType>
<xc:ccViewProfilesWithTargetCompl xp:key="ProfilesWithTargetCompl"></xc:ccViewProfilesWithTargetCompl>
<xc:ccViewLastUpdated xp:key="LastUpdated"></xc:ccViewLastUpdated>
<xc:ccViewUserGuide xp:key="UserGuide"></xc:ccViewUserGuide>
<xc:ccViewTracking xp:key="Tracking"></xc:ccViewTracking>
</xp:this.facets>
</xe:dynamicContent>
Then I dropped in a navigator control in the left column and created BasicLeafNodes to correspond to the dynamic content control I used the href property and used the #content="" to display the correct content.
This works just fine, but I am having problems figuring out how to make the selections in the navigator highlight when they are selected. I know I need to compute the Selectd property,but I can't figure out how to get the xp:key value so I can compare it to the SubmitValue. I know this is probably something simple, but I can't figure it out.
Can someone please enlighten me.
Thanks,
MJ
ADDED 03/26/2014 - I have a feeling that it has something to do with Using the href property of the Dynamic Content Control to perform the content switching. I know that makes the BasicLeafNodes Links. So, not sure how the Navigator records which link is being executed and how to capture that.
MJ
Add a value is the submitValue property
And in the onItemClick Event
Assign the submitted value to a viewScope variable
viewScope.Selected=context.getSubmittedValue()
And finally check if the viewScope variable equals your item submit value in the selected property. This needs to be calculated
if(viewScope.Selected="byCategory"){
return true
}else{
return false
}
The following is working for me:
if(viewScope.Selected == "byCategory"){
return true
} else{
return false
}
An equality test must be made with two equal symbols (or three). One equal symbol evidently always returns true.
I did it by jQuery. Just put the following code to the custom control, which contains navigator.
$( function() {
if (window.location.hash.length > 0) {
select()
}
});
$(window).on('hashchange', function() {
select();
});
function select() {
$(".lotusColLeft .lotusMenu .lotusBottomCorner li").removeClass(
"lotusSelected")
$(".lotusColLeft .lotusMenu .lotusBottomCorner li a")
.filter(
function() {
return window.location.hash.indexOf($(this).attr(
'href')) > -1
}).parent().addClass("lotusSelected")
}