AngularJs Grid Dynamic compute columns and datasource

6 posts, 0 answers
  1. trilogis
    trilogis avatar
    5 posts
    Member since:
    Aug 2010

    Posted 20 May 2016 Link to this post

    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

  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3724 posts

    Posted 24 May 2016 Link to this post

    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!
     
  3. trilogis
    trilogis avatar
    5 posts
    Member since:
    Aug 2010

    Posted 01 Jun 2016 in reply to Georgi Krustev Link to this post

    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

     

     

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    300 posts

    Posted 03 Jun 2016 Link to this post

    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!
     
  5. Dhara
    Dhara avatar
    3 posts
    Member since:
    Aug 2017

    Posted 03 Oct in reply to Alex Hajigeorgieva Link to this post

    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?

  6. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    300 posts

    Posted 05 Oct Link to this post

    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.
Back to Top