Rare display of grid in splitter

12 posts, 0 answers
  1. Daniel
    Daniel avatar
    11 posts
    Member since:
    Mar 2013

    Posted 04 Mar 2013 Link to this post

    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 ? :(
  2. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 Mar 2013 Link to this post

    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!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Daniel
    Daniel avatar
    11 posts
    Member since:
    Mar 2013

    Posted 06 Mar 2013 Link to this post

    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>
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 06 Mar 2013 Link to this post

    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!
  6. Daniel
    Daniel avatar
    11 posts
    Member since:
    Mar 2013

    Posted 06 Mar 2013 Link to this post

    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
  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 08 Mar 2013 Link to this post

    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!
  8. Daniel
    Daniel avatar
    11 posts
    Member since:
    Mar 2013

    Posted 08 Mar 2013 Link to this post

    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
  9. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 08 Mar 2013 Link to this post

    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!
  10. Daniel
    Daniel avatar
    11 posts
    Member since:
    Mar 2013

    Posted 09 Mar 2013 Link to this post

    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 ...
  11. Daniel
    Daniel avatar
    11 posts
    Member since:
    Mar 2013

    Posted 10 Mar 2013 Link to this post

    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 ...
  12. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 11 Mar 2013 Link to this post

    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!
  13. Daniel
    Daniel avatar
    11 posts
    Member since:
    Mar 2013

    Posted 11 Mar 2013 Link to this post

    Hi !

    Thanks it works perfectly now =D

    I've got a beauuuuuutiful display ^^
Back to Top
UI for ASP.NET MVC is VS 2017 Ready