I'm trying to implement the server side pagination on MUI datagrid, but I am having issues with the row number at the bottom of the page stuck on 0-0 of 0. There are about 500 entries and I can see that Rows per page is working (number of entries change as I cycle through 20, 50, and 100) but the row number is always stuck on 0-0 of 0 and I am unable to go to the next page.
Has anyone seen this type of behaviour before? It'd be appreciated if you could share your experience and how you solved the issue.
Screenshot of the datagird with error
const [page, setPage] = useState(0);
const [pageSize, setPageSize] = useState(20);
const [sort, setSort] = useState({});
<DataGrid
loading={isLoading || !data}
getRowId={(row) => row._id}
rows={(data && data.transactions) || []}
columns={columns}
rowCount={(data && data.total) || 0}
rowsPerPageOptions={[20, 50, 100]}
pagination
page={page}
pageSize={pageSize}
paginationMode="server"
sortingMode="server"
onPageChange={(newPage) => setPage(newPage)}
onPageSizeChange={(newPageSize) => setPageSize(newPageSize)}
onSortModelChange={(newSortModel) => setSort(...newSortModel)}
/>
image of the working datagrid
I was expecting a result similar to above but with server side pagination function implemented.
Related
Infinite scroll to our Custom PLP page is only working for page load alone. After selecting the faceted search, the infinite scroll feature is not working after the faceted response is appended. Please someone help us to have the Infinite scroll feature working after the faceted search result is appended.
Thanks in Advance
BigCommerce does not offer an Infinite Scroll feature by default, so I'm going to assume you followed this guide: https://medium.com/bigcommerce-developer-blog/how-to-add-infinite-scroll-to-category-pages-6c991750a8d5
The thing to keep in mind is that the category page gets reloaded via AJAX when a filter is applied. The fix for this should be as simple as duplicating the infiniteScroll function inside the this.facetedSearch function.
Look for the following code in your category.js file:
this.facetedSearch = new FacetedSearch(requestOptions, (content) => {
$productListingContainer.html(content.productListing);
$facetedSearchContainer.html(content.sidebar);
$('html, body').animate({
scrollTop: 0,
}, 100);
});
And add the infinite scroll function here as well:
this.facetedSearch = new FacetedSearch(requestOptions, (content) => {
$productListingContainer.html(content.productListing);
$facetedSearchContainer.html(content.sidebar);
function infiniteScroll() {
const elem = document.querySelector('.productGrid');
const infScroll = new InfiniteScroll(elem, {
// options
path: '.pagination-item--next .pagination-link',
append: '.product',
history: false,
});
return infScroll;
}
infiniteScroll();
$('html, body').animate({
scrollTop: 0,
}, 100);
});
I have used svelte-infinite-loading, and it worked fine at first,
but as the list got very long, my web app started using substantial amounts of memory, using as much as 2gb.
So, I needed to virtualize this infinite list.
I used svelte-tiny-virtual-list as recommended by svelte-infinite-loading's author:
<script>
....
function onInfinite({ detail }) {
const skip = items !== undefined ? items.length : 0;
fetchItems(skip).then((data) => {
if (data.length === 0) {
items = [];
detail.complete();
return;
}
if (items === undefined) items = data;
else items = [...items, ...data];
detail.loaded();
});
}
onMount(() => {
fetchItems(0).then((data) => {
Items = data;
});
});
</script>
{#if items !== undefined}
{#if items.length === 0}
<p><i>No items found</i></p>
{:else}
<VirtualList
itemCount={items.length}
itemSize={200}
height="100%">
<div slot="item" let:index>
<Item
item={items[index]} />
</div>
<div slot="footer">
<InfiniteLoading on:infinite={onInfinite} />
</div>
</VirtualList>
{/if}
{/if}
The problem comes when the page loads:
The first few items are fetched and displayed correctly, but then the page grows to abnormal lengths, then the list disappears and I get the following error:
InfiniteLoading.svelte:103 executed the callback function more than 10 times for a short time, it looks like searched a wrong scroll wrapper that doest not has fixed height or maximum height, please check it.
What have I done wrong?
A VirtualList creates items until the height of the list exceed the height of the parent. It then fakes a scrollbar to select which items it should render.
Apparently, you have placed the VirtualList in a container without height/max-height and it can't determine how many items it should create.
You have to set a max-height or a height on the parent element.
This question is related to Ag-Grid row height on Angular 4 Project. Please see the below scenario:-
I have an Ag-Gird having 3 columns respectively:-
Id (resizable column from UI)
Name (resizable column from UI)
Address (resizable column from UI)
I do not have any limitations( like the limited number of character or words is allowed) on Address column. Users can type any number of characters or words they want to.
Issues:-
How to increase the row height, when Address column width is completely filled-up with words or when users press Enter or Shift + Enter?
How to adjust height automatically when users resize the Address column?
Please help me with these issues.
Thanks
There are multiple things to be taken care.
Have a look at the updated Stackblitz
Have cellClass: "cell-wrap-text" attribute in the ColDef for Address column and have the appropriate CSS
Handle columnResized event so that this.gridApi.resetRowHeights() can be called to adjust the height of the rows whenever the column is resized
Also handle cellEditingStopped event, so that when the data for the column is updated, the row height also gets updated accordingly.
onColumnResized() {
this.gridApi.resetRowHeights();
}
onCellEditingStopped() {
this.onColumnResized();
}
Provide autoHeight: true property in the defaultColDef
defaultColDef = { autoHeight: true };
Update:
provide cellEditor: 'agLargeTextCellEditor' if you want to have textarea like control for this field.
Check this StackBlitz
I was facing the same issue in react I wanted to increase the height of row according to the content of the text area and on enter it should go to next line in text area instead of not turning into read only, so what I did i used the suppressKeyboardEvent of ag-grid and wrote the code into it, here is my code
cellClass: "description-cell",
width: 200,
cellRendererFramework: (params) =>{
return <pre> {params.data.description}</pre>
},
cellEditor: 'agLargeTextCellEditor',
cellEditorParams: (params) => {
return {
maxLength: '1000',
cols: this.props.cols,
rows: 2
}
},
suppressKeyboardEvent: (params) => {
const KEY_ENTER = 13;
const keyCode = params.event.keyCode;
const gridShouldDoNothing = params.event.target.value && params.editing && keyCode === KEY_ENTER;
params.event.target.style.height = 'inherit';
params.event.target.style.height = `${params.event.target.scrollHeight}px`;
params.node.setRowHeight(params.event.target.scrollHeight); // adjust it according to your requirement
this.gridApi && this.gridApi.onRowHeightChanged();
return gridShouldDoNothing;
}
I hope this could help you or someone who is looking for it :)
What helped me was to call redrawRows()
Typescript + React example:
const onCellEditingStopped = (event: CellEditingStoppedEvent<any>) => {
event.api.redrawRows();
};
I am using Leaflet with scalajs-leaflet facade on Binding.scala, and the map initializes/appears incorrectly.
In order to reproduce the issue, i have prepared a lihaoyi/workbench page similar to that in scalajs-leaflet.
First, download the forked scalajs-leaflet from https://github.com/mcku/scalajs-leaflet
Run sbt in scalajs-leaflet directory.
Enter ~ example/fastOptJS in sbt. Now, a web server started at port 12345.
Open
http://localhost:12345/example/target/scala-2.12/classes/leaflet2binding-dev.html in a browser
The problem is the map container appears but the content (tiles, etc) is not correct. Map becomes fine after a small resize on window, which triggers _onResize handler of leaflet.
The container is in the Leaflet2Binding.scala file and has its size already specified prior to initialization:
val mapElement = <div id="mapid" style="width: 1000px; height: 600px;
position: relative; outline: currentcolor none medium;"
class="leaflet-container leaflet-touch leaflet-fade-anim
leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
data:tabindex="0"></div>.asInstanceOf[HTMLElement]
It is possible to insert a line lmap.invalidateSize(true) in the following line before returning the element
https://github.com/mcku/scalajs-leaflet/blob/83b770bc76de450567ababf6c7d2af0700dd58c9/example/src/main/scala/example/Leaflet2Binding.scala#L39, but did not help in this case. Namely here:
#dom def renderMap = {
val mapElement = ... (same element as above)
.. some other initializations ..
lmap.invalidateSize(true) // true means, use animation
println("mapElement._leaflet_id " +mapElement.asInstanceOf[js.Dynamic]._leaflet_id) // prints non-null value, makes me think the container is initialized
mapElement
}
Any ideas? This is binding.scala specific, but it may be a leaflet issue as well.
EDIT Possible workaround
It looks like, the map element has its clientWidth property not available during the process. Which is understandable as the document is not "ready" yet. However, the css style.width is available and could be defined in px. In that case it is possible to patch leaflet to take css style width into account during computation.
it works if the style width is specified in px.
diff --git a/src/map/Map.js b/src/map/Map.js
index b94dd443..6544d7b7 100644
--- a/src/map/Map.js
+++ b/src/map/Map.js
## -903,8 +903,9 ## export var Map = Evented.extend({
getSize: function () {
if (!this._size || this._sizeChanged) {
this._size = new Point(
- this._container.clientWidth || 0,
- this._container.clientHeight || 0);
+
+ this._container.clientWidth || parseInt(this._container.style.width.replace("px",""),10) || 0,^M
+ this._container.clientHeight || parseInt(this._container.style.height.replace("px",""),10) || 0);;^M
this._sizeChanged = false;
}
Maybe lmap.invalidateSize(true) is called too early (DOM is not ready or repainted).
Make sure this does not happen. To prevent that I wrap this code like:
setTimeout(function () {
mapid.invalidateSize(true);
}, 100);
This must be done after every DOM repaint.
People that are still facing this issue for react-leaflet, making the component only render when zoom and center are initiated, and removed when the Map is not displaying:
useEffect(() => {
setCenter([50.5, 30.5]);
setZoom(14);
}, []);
And then in the JSX
{zoom && center.length > 0 && (
<div className={styles.map}>
<Map center={center} zoom={zoom} />
</div>
)}
I've been reading lots of topics about jQuery and showing div's, but I haven't found the answer to my specific question yet. Here's the thing:
Based on my value I want to show either div A or div B. The select field is filled with 20 countries, of which 19 get the same div (B) and only one get's another div (A). The one that get's div A has "value=1", so I figured to apply a "if select value > 1, show div B" principle. However, I can't manage to get it working. My other select-show-div mechanism was based on the exact value (I've posted it below), but this if-else thing makes me going crazy.
Any help would be appreciated!
My old value=exact code:
$('.div').hide();
$('#country').change(function() {
$('.div').hide();
$('#country' + $(this).val()).show();
});
});
And the corresponding HTML:
<div id="country1" class="div">
BLABLA
</div>
<div id="country2" class="div">
BLABLA
</div>
etc
I don't understand if you have a select menu, or divs. A possible solution could be the following:
$('select').change(function() {
var countryVal = $("select option:selected").val(); //get the value of the selected
$("#country1, #country2").hide(); //hide country divs, of previous selection
if(countryVal == 1) {$("#country1").show();} else {$("#country2").show()}; //if countryVal is 1 (the diffrent value) show the div #country1 else show the div #country2
});
updated Demo: http://jsfiddle.net/YnYxD/1
If I understood correctly, all the others countries have a value > 1, so you can't simply use the value to generate the id. The id must be 1 if the value is 1 and 2 otherwise.
Try :
$('#country').change(function() {
$('.div').hide();
var id = $(this).val() == 1 ? 1 : 2;
$('#country' + id).show();
});
});