Detecting col-resize event

[yashshah12]

Is there a way to listen for a col-resize callback event and then the grid calls a callback with the column index, or something else.

Something like

<ReactGrid onColResize={this.handleResizeColumns} />

[alexkrolick]

Dupe of #12?

[scamden]

Yep dupe. I’ll get on that you’ll def need it :)

…

On Thu, Jan 25, 2018 at 3:17 PM Alex ***@***.***> wrote: Dupe of #12 <#12>? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#19 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABE5mNucrghDee8nMR70gZwieIZrlpPZks5tOQuPgaJpZM4Rtowf> .

[yashshah12]

Thanks man.

I figured out that we can do this to get the new width of the column we just resized:
this.grid.eventLoop.bind('grid-drag-end', (e) => { const col = e.col const newWidth = this.grid.view.col.get(col).width });

[scamden]

Yes totally can do that. The props would just be a convenience. Nice job finding the space converters btw! I think you may want grid.data.col though because the moves column index is in the data space. Meaning the indexes starting at cell 0 excluding the headers

…

On Thu, Jan 25, 2018 at 4:43 PM Yash Shah ***@***.***> wrote: Thanks man. I figured out that we can do this to get the new width of the column we just resized: this.grid.eventLoop.bind('grid-drag-end', (e) => { const col = e.col const newWidth = this.grid.view.col.get(col).width }); — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#19 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABE5mN7N4VM3_VRVB2WIhkrSTpnjr4z0ks5tOR_AgaJpZM4Rtowf> .

[yashshah12]

For sure, having the props will definitely be easier. But just until that is implemented, this will help us move along.

[yashshah12]

I am noticing this weird behavior::

• I expand the column, i see the initial width printed out
• i detract the column and i see the expanded width printed out

Is it lagging or is it because my function runs and then your function runs which is where the width gets updated?

[yashshah12]

Fixed the above issue by adding a delay

[scamden]

Interesting.. would you mind posting your code?

…

On Fri, Jan 26, 2018 at 12:32 PM Yash Shah ***@***.***> wrote: Fixed the above issue by adding a delay — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#19 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ABE5mAVepF9yk-57C6rPzYP4bRG0OCaPks5tOjZDgaJpZM4Rtowf> .

[yashshah12]

async updateColumnnWidth (col) {
	const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
	await delay(1000)

	if (col < 0 || !this.grid.view.col.get(col)) return
	const newWidth = this.grid.view.col.get(col).width

        ... code for updating data with the new width
}

setGrid = reactGrid => {
	if (!reactGrid) return
	this.grid = reactGrid.grid

	this.grid.eventLoop.bind('grid-drag-end', e => {
	  const col = e.col
	  this.updateColumnnWidth(col)

	  return true
	})
}

[alexkrolick]

Yeah... let's not do that. This will cause all sorts of timing-related bugs.

[yashshah12]

Yeah, we realized that, its a hacky solutions until we can pass grid event props

[scamden]

oh dude. instead of grid-drag-end use grid-col-change and then check e.action === 'size' the col (and row) changes can be fired with various actions like move, hide, add, remove so you can respond to any of these changes. the drag end event is really on any grid drag not just the resize. use the col change event and you shouldn't need the timeout.

and again i mentioned this on another issue but not sure if you caught it. you want to be using this.grid.data.col.get not this.grid.view.col.get (i realize the naming here is confusing but data and view are referring to a type of index "space" not whether it's in the data or the ui). if you didn't already read the docs on the grid repo i would def suggest it and ping me there with anything that needs clarifying :)

[scamden]

oh and better yet. you can get the column directly off the event like so e.descriptors[0].width. It maybe be preferable to do a forEach though because the grid can actually resize multiple columns at once. so e.descriptors.forEach(updateWidthForColumnObject), not sure what your update api looks like but i'm sure you could do this functionally by mapping over the descriptors and creating your update object instead if forEach makes you shudder.

[scamden]

also please make suggestions about naming and things you're finding confusing. i would love to improve the usability of the grid's apis and since v4 is in beta we have a good opportunity to rename or move things.