Opening a hierarchical Kendo Grid - Forum - Rollbase - Progress Community

Opening a hierarchical Kendo Grid

 Forum

Opening a hierarchical Kendo Grid

This question is not answered

Hi all,

I'm dealing with a really strange Kendo Hierarchical Grid problem in a portal. Depending on the person who logged in, sometimes the grid will expand and sometimes it won't. At first, I had this problem because of a timingproblem. I have solved that problem by adding a timeout to the function that calls the grid, but making the timeout longer doesn't solve anything this time.

Basically, I haven't changed any of the gridcode since I fixed the problem last time, and now all of a sudden it's broken again. Also, the data does get loaded. I can open the grid by hitting F12 and deleting the display:none on the specific table-row, and from there on, everything works. I now have a workaround which says all table-rows have a display:table-row, but that is not a final solution, as the grid cannot be closed anymore.

Has anyone had the same problem and / or is anyone able to give me some pointers of what to look at? I could send in my code, but since it's almost 400 lines long, I don't think that's a good idea. I could send fragments, but have no idea what anyone would need to see. If you'd like to see some code, just let me know what part you need to see.

Thanks in advance,
Famke

All Replies
  • Hi Famke,

    Would it possible for you to create sample application  and render same grid with some sample hard coded data and explain us what problem you are seeing in grid with some screenshot?.. As it is portal page we have no idea of what you have written , so it will be good if you can share sample application we can debug and help you to resolve the problem.

    Thanks,

    Vimal.

  • Hi Vimal,

    Thanks for the quick reply! I tried to create a sample application and replace all the data with hard-coded data, but when I do, it does expand... so I doubt that code will be much use.

    This leads me to think that it is a problem with my datasources after all, but when I console.log those, they are all valid. It also doesn't work to put back older versions of my code.

    What I see when I go to the page with my grid, is the following:



    Then, when I click one of those "Hoofdvestigingen", the grid will simply stay the way it is right now. This is what I see when I have clicked a "Hoofdvestiging" and see what Elements says in F12:

    When I delete the style="display: none;" right there, the grid will expand to this:

    After which I can normally expand the grid and I get this:


    So only the first part of the grid is not expandable. It's not because of the "Hoofdvestigingen", since I can also login as another user, who has "Hoofdvestigingen" at the point where this user has "Vestigingen", and it works the same way (a.k.a only the first part won't expand). Since this is the case, I think it might be usefull if I add the first part of the function that executes the grid, because there are some if-functions in them. I also included those if-functions in the sample, so it shouldn't be the problem, but who knows. Here is the code:

    // function makeGrid checks if the current user is a regionmanager, if so, creates a grid with the v_groupSource datasource
    // if the current user is a shopgroup, it creates a grid with the v_shopSource datasource
    // this means each user can only see what is "beneath" them
    // detailInit is fired when all this data is loaded, which will load a new datasource into the grid at the right places
    // this happens throughout the complete grid

    function makeGrid(){
        if ({!R_shopemployee_regionmanager#id} > 0 && v_regionHead === 1){
            $("#grid").kendoGrid({
                dataSource: {
                    data: v_regionSource,
                    schema: {
                        model: {
                            fields: {
                                name: {type: "string"},
                                rel: {type: "number"},
                            }
                        }
                    }
                },
                columns: [
                    { field:"name", title:"Regiomanager" },
                ],
                detailInit:showGroups,
                });
        } else if ({!R_shopemployee_regionmanager#id} > 0 && v_regionHead === 0){
            $("#grid").kendoGrid({
                dataSource: {
                    data: v_groupSource,
                    schema: {
                        model: {
                            fields: {
                                name: {type: "string"},
                                id: {type: "number"},
                                rel: {type: "number"},
                                city: {type: "string"}
                            }
                        }
                    }
                },
                columns: [
                    { field:"name", title:"Hoofdvestiging" },
                    { field:"city", title:"Plaats", width:"200px"}
                ],
                detailInit:showShops,
            });
        } else if ({!R_shopemployee_shop_main#id} > 0){
            $("#grid").kendoGrid({
                dataSource: {
                    data: v_shopSource,
                    schema: {
                        model: {
                            fields: {
                                name: {type: "string"},
                                id: {type: "number"},
                                rel: {type: "number"},
                                city: {type: "string"}
                            }
                        }
                    }
                },
                columns: [
                    { field:"name", title:"Vestiging"},
                    { field:"city", title:"Plaats", width:"200px"}
                ],
                detailInit:showEmployees,
            });
        }
    }


    I hope this is enough information!

    Greetings,
    Famke

  • Hi Famke,

    I would like to know what is the detailTemplate that you used to render Vestiging Grid and showShops() method code to debug further. . And also you are saying when you hard code the data everything works fine right?..

    Thanks,

    Vimal.

  • Hi Famke,

    If you can't separate out code , you can share your entire code or sample application, I will see if I can find any issues. I hope you already aware of this but just posting in case help you, you can find similar example from kendo from below link

    demos.telerik.com/.../detailtemplate

    Thanks,

    Vimal.

  • Hi,

    Exactly right; it works when I use hardcoded data.

    I've added all my code to a Kendo Dojo, so that you check if indeed there are any errors in my code. This is the link: http://dojo.telerik.com/EZEsI . It does use local Rollbase data, so it won't actually work, but you will be able to see all my code.

    I used a different example, being the last one at Getting Started -> Bind HierarchicalDataSource to Local Data in this link: docs.telerik.com/.../overview

    Greetings,

    Famke

  • Hi Famke,

    I looked at your code  everything seems to be fine couldn't figure out what is wrong since I can't debug them. Could you log a support request so that we can have screen share session and debug at your system to figure out what is causing problem for you?. We need your application with data to see what is the problem.

    Thanks,

    Vimal.

  • Hi,

    We looked into this problem ourselves some more and were able to fix it. It turned out it was about the data after all. We don't know exactly what went wrong, but it works, and that's what matters most :)

    If we ever find out what happened and think it might be relevant for other users, we will post it here.

    Greetings,

    Famke