How do I "properly" get a row number clicked in Tabulator? This works on 2 of my views: ```val tab...

# kvision

[UNuX]

How do I "properly" get a row number clicked in Tabulator?

This works on 2 of my views:

val tabulatorRowIndex = ((event.detail as io.kvision.tabulator.js.Tabulator.RowComponent).getIndex() as Int) - 1

But on the third its failing on cast exception

[Robert Jaros]

See http://tabulator.info/docs/4.9/components#component-row
and compare getIndex() and getPosition()

[Robert Jaros]

getIndex() returns the value of the index column in your data (by dafault id column)

[Robert Jaros]

if your data doesn't contain integer id the cast will fail

[Robert Jaros]

if you just want a row number - use getPosition()

[UNuX]

Hm, but it doesnt seem to match whats actually happening:

setEventListener<Tabulator<SystemUser>> {
                    rowClickTabulator = { event ->
                        val casted = (event.detail as io.kvision.tabulator.js.Tabulator.RowComponent).getData()
                        println("Data: $casted")
                        val model = casted as SystemUser

it breaks down at the last line in this snippet, it's supposed to give me the SystemUser object thats represented in the clicked row, right?

[UNuX]

also the println of data is [object Object]

[Robert Jaros]

No.

[Robert Jaros]

Unfortunately it's a bit complicated.

[Robert Jaros]

Tabulator keeps it's data model separately.

[Robert Jaros]

And it's represented with plain JS objects.

[Robert Jaros]

Your external Kotlin data model is converted to plain JS objects.

[Robert Jaros]

That's why, when you access internal tabulator components (like RowComponent or CellComponent) you will get only plain JS objects.

[Robert Jaros]

Moreover, with legacy backend you could cast, because Kotlin internal representation and JS representation were similar.

[Robert Jaros]

It's not the case with IR - you can't cast.

[UNuX]

hm, that explains a lot.
So, the .getIndex() method will give me "id" field of that object? If so I could fetch the object from the list I passed into tabulator, right?

[Robert Jaros]

Exactly

[UNuX]

alright, thanks a lot

[Robert Jaros]

Tabulator has some internal conversion methods to get Kotlin data class from intenral JS object. I'm thinking about making them public in the next release.

[Miguel Vera Belmonte]

I’ve just hit this issue while migrating our project to IR. @Robert Jaros did you by any chance end up making public those internal conversion methods you mentioned a year+ ago? Thinking about using ’em if they’re available 🙂

[Robert Jaros]

I think so. There is a public toKotlinObjTabulator method. But since KV6 Tabulator supports only serializable data classes, so this method just deserializes the plain js data to Kotlin class using tabulator internal serializer.

[Miguel Vera Belmonte]

Hmmm… I didn’t think the internal, mangled JS representation of a Kotlin class within the IR compiler could be deserialized by the kotlinx serializer… In any case, this solved my issues, thanks!!!

[Dušan Salay]

Hi @Robert Jaros,
I am probably trying to solve similar problem as Unux did in this thread.

I want to click on the row of tabulator and after that open new page with editable detail. So I want to get id of my domain object.

I am trying to do this:

tabulator.onEvent {
    rowClickTabulator = { event ->
        val rowComponent = event.detail as Tabulator.RowComponent
        val rowIndex = rowComponent.getPosition() as Int - 1
        val data = tabulator.getData(RowRangeLookup.VISIBLE)?.get(rowIndex) as UniversityEvent
        console.log(data)
        console.log(data.name)
    }
}

but I am receiving ClassCastException

Can you advice me what I am doing wrong?
Is my approach even correct?

Thanks, in advance for your help!

[Robert Jaros]

Hi,
I think your code is ok. The same patterns works fine for me.

[Robert Jaros]

Do you use current KVision version (6.x)?

[Dušan Salay]

Yes I am on version 6.3.1.

[Dušan Salay]

I should also mentioned that I am using TabulatorRemote
and with those modules:

startApplication(
        ::App,
        module.hot,
        BootstrapModule,
        BootstrapCssModule,
        DatetimeModule,
        BootstrapIconsModule,
        CoreModule,
        FontAwesomeModule,
        TabulatorCssMaterializeModule
    )

not sure if adding TabulatorModule is also necessary?

[Dušan Salay]

here is also whole class:
https://github.com/SalyczeQ/uhk-fim-odof-admin/blob/main/src/frontendMain/kotlin/cz/uhk/fim/odof/fimopendays/layout/shared/EventList.kt

[Robert Jaros]

I see you are using val tabulator = TabulatorRemote(...)

[Robert Jaros]

Please try val tabulator = tabulatorRemote()

[Robert Jaros]

A DSL builder function instead of a constructor.

[Robert Jaros]

The function is an inline function with reified parameter to automatically infer model class type. A constructor can't do this (you could pass kClass: KClass<T> parameter manually)

[Dušan Salay]

Thank you Robert! That’s was the problem. Usage of DSL builder tabulatorRemote() helped!