Cell Render Function with async fx (Native Grid)

[Ken]

I'm using the Kendo for Vue native grid and I'm trying to make an asynchronous API call inside of my cell render function. I'm sure there has to be a way around this, but I just can't seem to find an answer. You can see the example at the Stackblitz link below. The cell using a render function never gets rendered in this example. However, if you remove the setTimeout it works as expected.

 

https://stackblitz.com/edit/kendoui-nativegrid-cellrender-async

Thanks,

Ferg

[Plamen]

Hello Ferg,

We are using the native render functions of Vue here and they have to be synchronous as for example it is explained in this forum thread. In such case the recommended approach would be to trigger your async request outside of the render function and change some prop that will trigger another render function and cause the rendering that you want to achieve. Here is an example with a simple update of an item base on one of its properties.

Regards,
Plamen
Progress Telerik

[Ken]

OK, thanks for the explanation Plamen. I really appreciate it. Now all I need to do is figure out a way to call the function I define in the methods object for every single row and update them one by one. I can probably call that function from inside the cell render function.

[Plamen]

Hi Ken,

Calling custom functions from render functions does not sound like the best approach to me. In general these functions are designed with a single purpose to render the correct DOM. Would you please elaborate a little bit the exact scenario and why we need to use them instead for example using some lifecycle hook so we could be on the same page and think of a possible solution?

Regards,
Plamen
Progress Telerik

[Ken]

I'm loading data into the grid. I need to make an API request to get more info and build a popover for one of the cells in each row. So when the grid loads, the cell in question will have a value like this with the loading indicator and a text node:

<td><i class="fa fa-spinner fa-spin fa-fw"></i> a-3832937829399902</td>

Then I need to do the API call and alter the classes to change the icon to the correct icon based on the results and render that cell to contain the markup for the popover, so that when the user hovers on the icon they can see a panel with all the new information in it.

 

Yesterday, I tried using a component to render all the cells, thinking that might be better, but using single file components I just get errors saying this.$props.render.render is not a function.

[Plamen]

Hi Ferg,

Thank you for elaborating the scenario and your concern with Vue Native Grid.

Yes indeed - in such case it would be much more intuitive to use component as template. We are currently supporting only globally defined components as for example it is done in this example - yet we are also going to add possibility for templates with local components soon - here is the issue about it that is in ready for test state at the moment.

If you have further questions or feedback please let me know.

Regards,
Plamen
Progress Telerik

[Ken]

If anyone else is having a problem using SFC's in this same way, I have figured out how to do it. If you use the named slots method, you can consume a component inside the template, similar to this:

 

<Grid :data-items="dataItems" :skip= "skip" :take="take" :total="total" :columns = "columns" :editable="'inline'" resizeable="true">
  <template slot="slotNameHere" slot-scope="{props, clickHandler}">
    <MyCellRenderComponent :celldata="props"></MyCellRenderComponent>
  </template>
</Grid>

 

So far, this is working well for me and I will continue down this route unless you see anything of which I need to be aware when using this strategy?

 

Thanks,
Ferg

[Ken]

*** Couldn't figure out a way to edit, so I'm duplicating my post for a bit more information in case someone else finds it useful ***

 

If anyone else is having a problem using SFC's in this same way, I have figured out how to do it. If you use the named slots method, you can consume a component inside the template, similar to this:

<Grid :data-items="dataItems" :skip= "skip" :take="take" :total="total" :columns = "columns" :editable="'inline'" resizeable="true">
  <template slot="deviceSlot" slot-scope="{props, clickHandler}">
    <MyCellRenderComponent :celldata="props"></MyCellRenderComponent>
  </template>
</Grid>

--------------------------------

Then the columns array looks something like this:

columns: [
  { title: 'Name', field: 'name', width:200 },
  { title: 'Device', field: 'device', encoded: false, cell: 'deviceSlot' },
  { title: 'Hire Date', field: 'hire_date', width: 250 }
]

Then I can use MyCellRenderComponent just like any other component in any other part of my app by importing it and adding it to the components object. So far, this is working well for me and I will continue down this route unless you see anything of which I need to be aware when using this strategy?

Thanks,
Ferg

[Plamen]

Hello,

Yes this is correct way too - thank you for sharing it with the community.

Regards,
Plamen
Progress Telerik