This is a migrated thread and some comments may be shown as answers.

AngularJs Grid Dynamic compute columns and datasource

5 Answers 362 Views
Grid
This is a migrated thread and some comments may be shown as answers.
trilogis
Top achievements
Rank 1
trilogis asked on 20 May 2016, 01:45 PM

Hi,

I'm trying to develope a tabbed angular material view where each tab contains a kendo grid. By clicking on the tab a post request is fired and, in the callback, columns definition and data are computed. After all these operation grid's data options are reassigned. Unfortunately the grid is not updated, i've googled and searched in the forum and the suggestion is to call the reload method gained through a reference to view. I'm trying to avoid these to keep my code clean and not reference view from controller and on the other way the building an attribute for that is quite useless.

Is there any event to fire to reload view? Is there any other strategy? Or simply am I missing something?

 

Thanks in advance,

Greetings

5 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 24 May 2016, 11:53 AM
Hello,

If my understanding is right, you would like to update the grid's configuration dynamically. If this is the case, then I would suggest you use k-rebind directive: Let me know if this does not help.

Regards,
Georgi Krustev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
trilogis
Top achievements
Rank 1
answered on 01 Jun 2016, 08:30 AM

Hi Georgi!

 

thanks, your suggestion solved the first problem but now i have a issue on the view. I insert the grid in a flexed material container and i have some strange scrollbar with class k-widget (and some other).

I tried to disable groupable, filterable and all unnecessary configuration and also to set a fixed height but problem is still there.

 A sample of the result in the attechment.

Thanks in advance,

Greeetings

 

 

0
Alex Hajigeorgieva
Telerik team
answered on 03 Jun 2016, 12:34 PM
Hello Manolo,

I am sorry for the delay in getting back to you.

From the screenshot provided, it looks as if the Kendo UI Grid has been initialized multiple times in the flexed material container. One possible reason for multiple initialization is that the Kendo UI Grids are initialized from the same HTML element.

I made a Dojo example with the Kendo UI TabStrip and Grid in each tab where the k-rebind attribute is used to set the language options. Please edit the Dojo example in a way that it exhibits the described behaviour and get back to me, so I can assist further.

http://dojo.telerik.com/OxeKi

Kind Regards,
Alex
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Dhara
Top achievements
Rank 1
Veteran
answered on 03 Oct 2017, 12:44 PM

Hi Alex,

As you can see in your example, The Grid for second tab does not refresh. Neither the datasource is calling the API again. 

Can you please explain how can that be achieved?

0
Alex Hajigeorgieva
Telerik team
answered on 05 Oct 2017, 09:17 AM
Hi, Dhara,

The Kendo UI Grids both get rebound and that is why there are two read requests sent in the network tab everytime the language is changed.

I have now created an example with two separate grids in each tab - one reads from products, the other from employees. Open up the developer tools and go to Network tab to see the read requests issued when the language option changes:



Here is the updated demo for more clarity:

http://dojo.telerik.com/@bubblemaster/AJuSuv

Kind Regards,
Alex Hajigeorgieva
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
trilogis
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
trilogis
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Dhara
Top achievements
Rank 1
Veteran
Share this question
or