TelerikGrid placed inside Splitter panel is not loading properly.

11 posts, 0 answers
  1. Srikanth
    Srikanth avatar
    4 posts
    Member since:
    Mar 2013

    Posted 06 Apr 2013 Link to this post

    Hi,

    Recently we are trying to migrate our existing application from telerik to Kendo ui controls. In one of the page we have telerik splitter and its panel contains telerik tab strip which internally loads telerik grid.

        Now we replaced telerik splitter to kendo ui splitter and remaining are same in telerik. Once after running the application telerik grid is not being loaded properly.

    Please guide me here.

    Thanks,
    Srikanth
  2.
  3. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 09 Apr 2013 Link to this post

    Hi Srikanth,

    The provided information is scarce and does not lead to any conclusive suggestion. Please clarify what do you mean by "not loaded properly" or even better, provide a live URL or a runnable example, so that I can test it and give further advice.

    Regards,
    Dimo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Grahame
    Grahame avatar
    8 posts
    Member since:
    Nov 2015

    Posted 12 Jul 2017 Link to this post

    I'm also having issues when putting a grid inside the splitter using kendo ASP.NET Core

    I'm using the .Content(() =>{ Html.Kendo.Grid<GridViewModel>() .... .Defered( ); }).Defered( ) on the splitter, if I take the code from inside the .Content( ) of the splitter and place it on the page all works as expected?

     

    How can I get a grid inside a splitter ?

  7. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1782 posts

    Posted 17 Jul 2017 Link to this post

    Hello Grahame,

    I checked the Grid nested in a Splitter scenario and at my end the Grid was displayed correctly. Could you give the following syntax a try making sure you call the Grid's .ToHtmlString() method:
    .Content(
        Html.Kendo.Grid<GridViewModel>()....
          .ToHtmlString()
    );


    Regards,
    Ivan Danchev
    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.
  9. Grahame
    Grahame avatar
    8 posts
    Member since:
    Nov 2015

    Posted 19 Jul 2017 Link to this post

    I've tried this without success and I've also seen issues with the following not displaying the tab content => 

    @(Html.Kendo().Splitter()
        .Name("search-item-details-splitter")
        .Orientation(SplitterOrientation.Vertical)
        .Panes(panes =>
        {
            panes.Add()
                .Collapsible(false)
                .Resizable(true)
                .Scrollable(true);
            panes.Add()
                .Collapsible(false)
                .Resizable(true)
                .Scrollable(true)
                .Content(
                    Html.Kendo().TabStrip()
                        .Name("search-item-detail-tab-strip")
                        .Animation(true)
                        .Items(items =>
                        {
                            items.Add()
                               .Text("Tab 01")
                               .Enabled(true)
                               .Content(
                                    Html.Kendo().Button().Name("d1").Content("d1").ToHtmlString()
                               );
                            items.Add()
                                .Text("Tab 02")
                                .Enabled(true)
                                .Content(
                                    Html.Kendo().Button().Name("d2").Content("d2").ToHtmlString()
                                );
                            items.Add()
                                .Text("Meter History")
                                .Enabled(true)
                                .Content(
                                    Html.Kendo().Button().Name("d3").Content("d2").ToHtmlString()
                                );
                        })
                        .ToHtmlString()
                );
        }).Deferred())

     

    any help much appreciated 

  11. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1782 posts

    Posted 20 Jul 2017 Link to this post

    Hello Grahame,

    I attached a sample runnable project, in which both a Grid and the TabStrip from your last reply are placed within a Splitter and both are visible. Could you modify the sample so that it reproduces the issue and attach it back for further review?

    Regards,
    Ivan Danchev
    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.
  13. Grahame
    Grahame avatar
    8 posts
    Member since:
    Nov 2015

    Posted 21 Jul 2017 in reply to Ivan Danchev Link to this post

    Thanks for the sample; I will use the code provided to rebuild an ASP.NET Core Kestrel web application and try to reproduce my issue and provider greater detail.
  14.
  15. Grahame
    Grahame avatar
    8 posts
    Member since:
    Nov 2015

    Posted 21 Jul 2017 Link to this post

    This is an issue where following the best practise of placing stylesheets with in the <head> tag and scripts to the bottom of the page, the behaviour expected is not achieved; even with the line @(Html.Kendo().DeferredScripts()) the content( ...  ) don't render ?

    I have been able to re-produced the issue by simply moving the script tags to the bottom of the page; as recommended in your documentation. 

  17. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1782 posts

    Posted 24 Jul 2017 Link to this post

    Hi Grahame,

    Since there are no script tags in the Index view from the example I attached in my previous reply, could you elaborate more on which script tags in particular you moved to the bottom of the page? If you are moving the Kendo UI scripts loaded in _Layout.cshtml to the bottom of the page you will have to call @Html.Kendo().DeferredScripts() after the scripts:

    In addition all of the widgets' Deferred() method need to be called: the Splitter, Grid, TabStrip and the three buttons within the TabStrip. This way all of them will be initialized after loading the jQuery and Kendo UI scripts they depend on.

    Regards,
    Ivan Danchev
    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.
  19. Grahame
    Grahame avatar
    8 posts
    Member since:
    Nov 2015

    Posted 24 Jul 2017 in reply to Ivan Danchev Link to this post

    Yez sorry I have done this in the _Layout.cshtm and als added the DeferredScripts, however these items with the splinter fail to render, using the ToHtmlSting or the Deferre options?
  20.
  21. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1782 posts

    Posted 26 Jul 2017 Link to this post

    Hi Grahame,

    The buttons within the TabStrip, the TabStrip itself and the Grid should call both the Deferred() and the ToHtmlString() methods, for example:
    Html.Kendo().Button().Name("d1").Content("d1").Deferred().ToHtmlString()

    The Splitter should call only  the Deferred() method.

    Regards,
    Ivan Danchev
    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