https://kotlinlang.org logo
#kvision
Title
# kvision
a

ashmelev

08/11/2022, 4:32 PM
@Robert Jaros When I use the Tabulator in
dataUpdateOnEdit = true
mode I get a (rather lengthy)
Uncaught exception...
in the browser console which seems to indicate an issue when setting data:
Copy code
<redacted>....refreshActiveData@http://localhost:8080/web/main.bundle.js:2:1490426\n_setDataActual@http://localhost:8080/web/main.bundle.js:2:1485115\n2995/setData/<@http://localhost:8080/web/main.bundle.js:2:1484530\nsetData@http://localhost:8080/web/main.bundle.js:2:1484442.....<redacted>
The data source for the Tabulator is declared as:
Copy code
val organizations: ObservableList<OrganizationExch> = observableListOf()
and
OrganizationExch
is declared as
Copy code
@Serializable
data class OrganizationExch(@Id var extId: String,
                            var name: String,
                            var description: String? = null,
                            var webUrl: String? = null,
                            var imageUrl: String? = null,
                            var theme: String? = null,
                            var createdAt: OffsetDateTime? = null,
                            var updatedAt: OffsetDateTime? = null)
[NOTE: I am trying to edit
webUrl
in my tests] The data originates from a
List
on the KVision back-end (SpringBoot) and I convert it into a
MutableList<OrganizationExch>
before synch (probably unnecessary):
Copy code
organizations.syncWithList(organizationService.getOrganizations().toMutableList())
I am clearly missing something..... can you help?
r

Robert Jaros

08/11/2022, 4:33 PM
Do you use IR or legacy compiler?
a

ashmelev

08/11/2022, 4:34 PM
kotlin.js.compiler=ir
IR compiler
r

Robert Jaros

08/11/2022, 4:35 PM
And do you create the Tabulator with
serializer = serializer()
?
a

ashmelev

08/11/2022, 4:36 PM
No....
I'd started out using the
dsl
builder (which was causing the same/similar exception)
and switched to Tabulator constructor... I'll add the serializer
r

Robert Jaros

08/11/2022, 4:39 PM
When using IR you need to pass serializer or use
@JsExport
on your model data class. Do you see your data without it? :-)
a

ashmelev

08/11/2022, 4:39 PM
Actually, I am wrong
serializer
was defined:
Copy code
orgTable = Tabulator(
      OrganizationModel.organizations,
      dataUpdateOnEdit = false,
      options = TabulatorOptions(
        layout = Layout.FITCOLUMNS,
        columns = listOf(
          ColumnDefinition(<http://I18n.tr|I18n.tr>("extId"), "extId", visible = false),
          ColumnDefinition(<http://I18n.tr|I18n.tr>("Name"), "name", editor = Editor.INPUT, cellEdited = { cellEdited(it) }),
          ColumnDefinition(<http://I18n.tr|I18n.tr>("Description"), "description", editor = Editor.INPUT, cellEdited = { cellEdited(it) }, width = "350"),
          ColumnDefinition(<http://I18n.tr|I18n.tr>("Web Url"), "webUrl", editor = Editor.INPUT, cellEdited = { cellEdited(it) }, width = "200"),
          ColumnDefinition(<http://I18n.tr|I18n.tr>("Logo Image Url"), "imageUrl", editor = Editor.INPUT, cellEdited = { cellEdited(it) }, width = "200"),
          ColumnDefinition(<http://I18n.tr|I18n.tr>("Theme"), "theme", editor = Editor.INPUT, cellEdited = { cellEdited(it) }, width = "100"),
          ColumnDefinition(<http://I18n.tr|I18n.tr>("Created At"), "createdAt", width = "175"),
          ColumnDefinition(<http://I18n.tr|I18n.tr>("Updated At"), "updatedAt", width = "175")
        ),
        index = "extId",
        pagination = true,
        paginationMode = PaginationMode.LOCAL,
        paginationSize = 10,
        autoResize = true
      ), types = setOf(TableType.BORDERED, TableType.HOVER, TableType.STRIPED), serializer = serializer()
    ).apply {
      height = 100.perc
    }
r

Robert Jaros

08/11/2022, 4:39 PM
ok
a

ashmelev

08/11/2022, 4:39 PM
Ignore the second
serializer = serializer
above - just added that 2 seconds ago
The one just before
.apply {
pre-existed
r

Robert Jaros

08/11/2022, 4:46 PM
what is
cellEdited(...)
function doing?
a

ashmelev

08/11/2022, 4:47 PM
I added the to capture the editing Event so I could try to modify the underlying record by hand. Right now it's just dumping info to
console.log()
Copy code
private fun cellEdited(editedCell: io.kvision.tabulator.js.Tabulator.CellComponent) {
    try {
      if (editedCell.isEdited()) {
        editedCell.getRow().getIndex().let {
          val extId = (it.asDynamic() as String)
          console.log("cellEdited index $extId")
          OrganizationModel.editRow(
            extId = extId,
            fieldName = editedCell.getField(),
            oldValue = editedCell.getOldValue(),
            newValue = editedCell.getValue()
          )
        }
      }
    } catch (e: Exception) {
      console.error("cellEdited threw ${e::class.simpleName}: ${e.message}")
    }
  }
Copy code
fun editRow(extId: String, fieldName: String, oldValue: Any?, newValue: Any?) {
    console.log("OrganizationModel.editRow(extId=$extId, fieldName=$fieldName, oldValue=$oldValue, newValue=$newValue)")
    organizations.firstOrNull { it.extId == extId }?.let { orgExch ->
      console.log("OrganizationModel.editRow(orgExch=$orgExch)")
    }
  }
If
dataUpdateOnEdit = false
then all the log dump runs w/o error or exception
If
dataUpdateOnEdit = true
then the console logs as before and the exception is thrown after the event handler completes
r

Robert Jaros

08/11/2022, 4:53 PM
Do you use latest KVision version?
a

ashmelev

08/11/2022, 4:54 PM
I think I am one release behind:
Copy code
avaVersion=1.8
#Plugins
systemProp.kotlinVersion=1.7.10
serializationVersion=1.3.3
systemProp.dependencyManagementPluginVersion=1.0.12.RELEASE
systemProp.springBootVersion=2.7.0
#Dependencies
systemProp.kvisionVersion=5.13.1
coroutinesVersion=1.6.4
systemProp.keycloakVersion=12.0.3
systemProp.jibVersion=3.2.1
systemProp.micrometerVersion=1.8.1
systemProp.jacksonVersion=2.13.3
systemProp.apacheCommonsIoVersion=1.3.2
systemProp.hazelcastVersion=5.1.2
systemProp.awsSdkVersion=2.17.42
systemProp.okHttpVersion=4.10.0
systemProp.retrofitVersion=2.9.0

kotlin.mpp.stability.nowarn=true
kotlin.js.compiler=ir
org.gradle.jvmargs=-Xmx2g
5.13.1
r

Robert Jaros

08/11/2022, 4:55 PM
And you use
kvision-tabulator
module (not
kvision-tabulator4
) ?
a

ashmelev

08/11/2022, 4:55 PM
The other dependencies should be up to date with 5.13.1 (Except KeyCloak - OIDC/OAuth2 provider)
yes,
Copy code
implementation("io.kvision:kvision-tabulator:$kvisionVersion")
r

Robert Jaros

08/11/2022, 4:58 PM
I've recreated your use case in my simple project and it seems to work fine for me with
dataUpdateOnEdit = true
. But this is in plain frontend project. I'll try once again with the fullstack project.
a

ashmelev

08/11/2022, 4:59 PM
Thank you.
Meanwhile, I'll upgrade to KVision 5.14.0 and see what happens
r

Robert Jaros

08/11/2022, 5:06 PM
It works for me with the fullstack project as well
a

ashmelev

08/11/2022, 5:07 PM
Oh, I should add one note: I am packaging the webpack of the FrontEnd of my project and copying it to the
resources/public
directory inside the SpringBoot BackEnd. There are two reasons for this: 1.) So that I can use SpringBoot's SpringSecurity/ResourceServer and KeyCloak to secure the entire application, and 2.) So that I can use a Google Jib Gradle task to package the entire thing to a Docker container for production deployment to Kubernetes Right now I am testing locally, so I am not performing all that packaging (i.e. I am running things like your full-stack SpringBoot example), but there is an outside possibility that something is unique to my setup and causing the problem...
r

Robert Jaros

08/11/2022, 5:09 PM
This is my App.kt with a tabulator:
Copy code
class App : Application() {

    val organizations: ObservableList<OrganizationExch> =
        observableListOf(
            OrganizationExch("1", "111", createdAt = Date(), updatedAt = Date()),
            OrganizationExch("2", "222", createdAt = Date(), updatedAt = Date())
        )

    fun cellEdited(cell: io.kvision.tabulator.js.Tabulator.CellComponent) {
    }

    override fun start(state: Map<String, Any>) {
        I18n.manager =
            DefaultI18nManager(
                mapOf(
                    "en" to io.kvision.require("i18n/messages-en.json"),
                    "pl" to io.kvision.require("i18n/messages-pl.json")
                )
            )
        root("kvapp") {
            tabulator(
                organizations,
                serializer = serializer(),
                dataUpdateOnEdit = true,
                options = TabulatorOptions(
                    layout = Layout.FITCOLUMNS,
                    columns = listOf(
                        ColumnDefinition(<http://I18n.tr|I18n.tr>("extId"), "extId", visible = false),
                        ColumnDefinition(
                            <http://I18n.tr|I18n.tr>("Name"),
                            "name",
                            editor = Editor.INPUT,
                            cellEdited = { cellEdited(it) }),
                        ColumnDefinition(
                            <http://I18n.tr|I18n.tr>("Description"),
                            "description",
                            editor = Editor.INPUT,
                            cellEdited = { cellEdited(it) },
                            width = "350"
                        ),
                        ColumnDefinition(
                            <http://I18n.tr|I18n.tr>("Web Url"),
                            "webUrl",
                            editor = Editor.INPUT,
                            cellEdited = { cellEdited(it) },
                            width = "200"
                        ),
                        ColumnDefinition(
                            <http://I18n.tr|I18n.tr>("Logo Image Url"),
                            "imageUrl",
                            editor = Editor.INPUT,
                            cellEdited = { cellEdited(it) },
                            width = "200"
                        ),
                        ColumnDefinition(
                            <http://I18n.tr|I18n.tr>("Theme"),
                            "theme",
                            editor = Editor.INPUT,
                            cellEdited = { cellEdited(it) },
                            width = "100"
                        ),
                        ColumnDefinition(<http://I18n.tr|I18n.tr>("Created At"), "createdAt", width = "175"),
                        ColumnDefinition(<http://I18n.tr|I18n.tr>("Updated At"), "updatedAt", width = "175")
                    ),
                    index = "extId",
                    pagination = true,
                    paginationMode = PaginationMode.LOCAL,
                    paginationSize = 10,
                    autoResize = true
                ), types = setOf(TableType.BORDERED, TableType.HOVER, TableType.STRIPED)
            ).apply {
                height = 100.perc
            }
        }
    }
}
I've defined
OrganizationExch
in the common module just like you
a

ashmelev

08/11/2022, 5:11 PM
If there's something significantly different between our code, I am missing it Looks effectively the same to me
r

Robert Jaros

08/11/2022, 5:15 PM
Can you share your project?
a

ashmelev

08/11/2022, 5:16 PM
Not the whole thing... client-proprietary/NDA stuff in there
I can work to make a reduced version
First, I'll try to update to 5.14.0
r

Robert Jaros

08/11/2022, 5:19 PM
There is a difference ... I have dsl builder
tabulator()
and you have constructor
Tabulator()
.
a

ashmelev

08/11/2022, 5:19 PM
Good point. I'll revert to the
dsl
version
r

Robert Jaros

08/11/2022, 5:20 PM
The constructor for this class is hard to use - that's why there are some inline
create
functions defined.
When I just use constructor I have an exception as well.
a

ashmelev

08/11/2022, 5:20 PM
Hmmm... stand by
r

Robert Jaros

08/11/2022, 5:21 PM
Tabulator.create()
works fine
When using constructor directly you need to pass
kClass
as well (
kClass = OrganizationExch::class
)
a

ashmelev

08/11/2022, 5:30 PM
Well, certainly that fixed the issue
But a new question: The
cellEdit
event is firing before the Tabulator has a chance to update the underlying List. How can I capture the change event after the record in the List is updated? I need to message it back to the underlying store....
r

Robert Jaros

08/11/2022, 5:35 PM
I'm afraid you can't. The list is updated asynchronously and it's done as the last operation.
a

ashmelev

08/11/2022, 5:38 PM
Can I bind an event handler to the ObservableList?
r

Robert Jaros

08/11/2022, 5:39 PM
Yes. You can use
subscribe()
.
a

ashmelev

08/11/2022, 5:39 PM
I can see that I can bind to the whole list - but not to the individual record that's been updated
r

Robert Jaros

08/11/2022, 5:39 PM
No
a

ashmelev

08/11/2022, 5:40 PM
Ahhh, OK.... I'll use the
cellEdited
handler then... Thank you for the help!
r

Robert Jaros

08/11/2022, 5:41 PM
Yep,
cellEdited
is probably the best in this case.
Glad to be helpful :)
a

ashmelev

08/11/2022, 5:42 PM
Understood.... thank you again... KVision is a wonderful framework - learning curve is daunting, but worth it I think 🙂
4 Views