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

TelerikGrid placed inside Splitter panel is not loading properly.

10 Answers 61 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Srikanth
Top achievements
Rank 1
Srikanth asked on 06 Apr 2013, 12:29 PM
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

10 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 09 Apr 2013, 03:40 PM
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!
0
Grahame
Top achievements
Rank 1
answered on 12 Jul 2017, 04:05 PM

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 ?

0
Ivan Danchev
Telerik team
answered on 17 Jul 2017, 07:23 AM
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.
0
Grahame
Top achievements
Rank 1
answered on 19 Jul 2017, 11:00 AM

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 

0
Ivan Danchev
Telerik team
answered on 20 Jul 2017, 02:33 PM
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.
0
Grahame
Top achievements
Rank 1
answered on 21 Jul 2017, 09:30 AM
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.
0
Grahame
Top achievements
Rank 1
answered on 21 Jul 2017, 01:25 PM

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. 

0
Ivan Danchev
Telerik team
answered on 24 Jul 2017, 01:20 PM
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.
0
Grahame
Top achievements
Rank 1
answered on 24 Jul 2017, 10:14 PM
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?
0
Ivan Danchev
Telerik team
answered on 26 Jul 2017, 12:11 PM
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.
Tags
Splitter
Asked by
Srikanth
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Grahame
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or