Opening a hierarchical Kendo Grid

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