To refresh a custom renderer outside the grid

[yewon97]

class RowNumberRenderer {
	constructor(props) {
		const el = document.createElement('span');

		this.el = el;
		this.el.innerHTML = this.getRowNum(props);
	 }
	
	getRowNum(props) {
		const perPage = props.grid.getPagination()._options.itemsPerPage;
		let currentPage = props.grid.getPagination()._currentPage;
		return Number(props.formattedValue) + (currentPage - 1) * perPage;
	 }
	
	 getElement() {
		return this.el;
	 }
	
	 render(props) {
		this.el.innerHTML = this.getRowNum(props);
	 }
}

I am using the class written above. There is a problem with that class. grid.readData(1,{perPage:perPageNum}, true); I implemented a 10-to-5 line change function, and there was a problem here. I didn't find the reason, but if I change from 10 to 5 lines on the last page, the rowHeader number looks like an image. Is there an API that can be applied to rowHeader except for custom render in the grid column? I already knew that it will be solved by calling again Ajax with reloadData(). But I don't want to use the Ajax call twice. (readData, reloadData)

[jajugoguma]

@yewon97

Sorry for late replying.

The solution to what you want requires a little more checks. However, How use rowHeaders with setPerPage API? If use it, I guess it works properly like what you want.

const grid = new Grid({
  rowHeaders: [{ type: 'rowNum' }),
  // ...
});

const onSelectChange = () => {
  const selectedValue = /* The value of select(perPage) */;
 
  grid.setPerPage(selectedValue);
};

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[stale[bot]]

This issue will be closed due to inactivity. Thanks for your contribution!