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

Rare display of grid in splitter

11 Answers 148 Views
Splitter
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 04 Mar 2013, 12:00 PM
Hi,

I've got an issue about the display of a grid in a splitter.

If I add a grid in my display, everything is broken ... Any idea ? :(

11 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 06 Mar 2013, 10:00 AM
Hello Daniel,

The Splitter is not initialized, which indicates a Javascript error on the page. Please check. Make sure all required Javascript files are included.

http://docs.kendoui.com/getting-started/javascript-dependencies

All the best,
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
Daniel
Top achievements
Rank 1
answered on 06 Mar 2013, 11:19 AM
Hi,

That's what I have in my layout :

<script src="@Url.Content("~/Scripts/kendo/2012.3.1114/jquery.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2012.3.1114/kendo.all.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/2012.3.1114/kendo.aspnetmvc.min.js")"></script>
    <script src="@Url.Content("~/Scripts/kendo/kendo.culture.fr.min.js")"></script>
    <script type="text/javascript">kendo.culture("fr")</script>

Even if I add every jx file I have in Scripts/kendo/2012.3.1114, I still have the problem ...

Furthermore, in my folder, I only have file with "min" (ex : kendo.aspnetmvc.min.js).

EDIT :

I replace by those 

<script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/kendo/2012.3.1114/jquery.min.js"></script>
    <script src="~/Scripts/kendo/2012.3.1114/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo/2012.3.1114/kendo.aspnetmvc.min.js"></script>
    <script src="~/Scripts/kendo/kendo.culture.fr.min.js"></script>
0
Dimo
Telerik team
answered on 06 Mar 2013, 03:44 PM
Hi Daniel,

There should be only one jQuery instance on the page and it should be the correct and compatible version.

http://docs.kendoui.com/getting-started/javascript-dependencies#jquery-version

Also make sure that the Grid configuration script has correct syntax (if the Grid is initialized manually with Javascript).

If the problem persists, please provide a runnable example or a live URL for further testing.

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
Daniel
Top achievements
Rank 1
answered on 06 Mar 2013, 03:55 PM
Hi Dimo, thanks for your answer.

This is my layout :

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2012.3.1114/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />
    <link href="@Url.Content("~/Content/kendo/2012.3.1114/kendo.metroblack.min.css")" rel="stylesheet" type="text/css" />
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
    <script src="~/Scripts/kendo/2012.3.1114/kendo.all.min.js"></script>
    <script src="~/Scripts/kendo/2012.3.1114/kendo.aspnetmvc.min.js"></script>
    <script src="~/Scripts/kendo/kendo.culture.fr.min.js"></script>
    <script type="text/javascript">kendo.culture("fr")</script>
</head>
<body>
@(Html.Kendo().Splitter()
      .Name("vertical")
      .Orientation(SplitterOrientation.Vertical)
      .Panes(verticalPanes =>
      {
          verticalPanes.Add()
              .HtmlAttributes(new { id = "middle-pane" })
              .Scrollable(false)
              .Collapsible(false)
              .Content(
                Html.Kendo().Splitter()
                    .Name("horizontal")
                    .HtmlAttributes(new { style = "height: 100%;" })
                    .Panes(horizontalPanes =>
                    {
                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "left-pane" })
                            .Size("230px")
                            .Resizable(false)
                            .Collapsible(true)
                            .Content(@<div>@RenderPage("~/Views/Home/Filtre.cshtml")</div>);
 
                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "center-pane" })
                            .Content(@<div class="pane-content" style="width:50%">
                                <section id="main">
                                    @RenderBody()
                                </section>
                            </div>);
 
                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "right-pane" })
                            .Collapsible(true)
                            .Size("220px")
                            .Content(@<div class="pane-content">
                                @RenderPage("~/Views/Home/XML.cshtml")
                            </div>);
                    }).ToHtmlString()
              );
 
          verticalPanes.Add()
              .Size("70px")
          .HtmlAttributes(new { id = "bottom-pane" })
          .Resizable(false)
          .Collapsible(true)
          .Content(@<div class="pane-content" style="text-align:center">
             <p>Application développée par :</p>
                  <p>2012-2013</p>
          </div>);
      }))
</body>
</html>
And this is my index :

@model System.Data.DataTable
 
@(Html.Kendo().Grid(Model)
    .Name("Grid")   
    .Columns(columns => {
        foreach (System.Data.DataColumn column in Model.Columns)
        {
            columns.Bound(column.DataType, column.ColumnName);    
        }
    })   
)
In my controller for data :

public ActionResult Index()
        {
            DataTable logs = Write_Log.Read.loadXML();
 
            return View(logs);
        }
EDIT :

In filtre, there is my calendar etc ... and XML there is my treeview
0
Dimo
Telerik team
answered on 08 Mar 2013, 09:04 AM
Hi Daniel,

Kendo UI 2012.3.1114 requires jQuery 1.8.2, as explained in the documentation article I provided earlier.

http://docs.kendoui.com/getting-started/javascript-dependencies#jquery-version

Otherwise the provided code looks OK. If the problem persists, please send a runnable project for further testing.

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
Daniel
Top achievements
Rank 1
answered on 08 Mar 2013, 10:05 AM
Hi,

Even after downloading jquery 1.8.2 , and adding to my project I still have the problem ...

Here the zip link for the runnable.

http://sdrv.ms/Zw9YHe
0
Dimo
Telerik team
answered on 08 Mar 2013, 01:44 PM
Hi Daniel,

The attached project works correctly.

Note that if you are using IE10 in IE7 (compatibility) mode, there is a Javascript error, which may result in a broken page layout. The error is caused by a bug related to setting non-standard HTML attributes via jQuery attr().

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
Daniel
Top achievements
Rank 1
answered on 09 Mar 2013, 01:38 PM
Hi,

It's not working correctly !

Off course I have my grid, but the display is not good :

I should have my grid in my central splitter ...
0
Daniel
Top achievements
Rank 1
answered on 11 Mar 2013, 12:20 AM
Hi,

Maybe there is a trouble with my DataTable ... 

If I add an empty DataTable, everything is okay, but if I add a DataTable, everything goes wrong ...

DataTable listeLog = new DataTable("log");
 
            listeLog.Columns.Add("Création", typeof(DateTime));
            listeLog.Columns.Add("Type", typeof(string));
            listeLog.Columns.Add("Message", typeof(string));
            listeLog.Columns.Add("Stack Exception", typeof(string));
 
 
            DataRow ajoutLigne = listeLog.NewRow();
            ajoutLigne[0] = DateTime.Parse("20/09/1988 00:00:00");
            ajoutLigne[1] = "TEST";
            ajoutLigne[2] = "TEST";
 
            listeLog.Rows.Add(ajoutLigne);
 
            return View(listeLog);

This will maybe help you to find a solution ...

EDIT : 

Furthermore, when I load my DataTable in my grid, and try to go to next page, everything disappear ...
0
Dimo
Telerik team
answered on 11 Mar 2013, 09:50 AM
Hello Daniel,

Yes, field names with spaces are not supported, because they are treated as properties. As a result, an invalid row template is generated, which results in a Javascript error, as suggested earlier.

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
Daniel
Top achievements
Rank 1
answered on 11 Mar 2013, 10:47 AM
Hi !

Thanks it works perfectly now =D

I've got a beauuuuuutiful display ^^
Tags
Splitter
Asked by
Daniel
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Daniel
Top achievements
Rank 1
Share this question
or