Getting two grids in page

13 posts, 0 answers
  1. Trent Jones
    Trent Jones avatar
    49 posts
    Member since:
    Aug 2009

    Posted 14 Jun 2012 Link to this post

    See attached screenshot.  Not sure when this started happening. but it is.  here is my code.

    <div class="widgetContent">
            @(Html.Kendo().Grid<ContactViewModel>().Name("contact-list")
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Read(read => read.Action("_Index","Contact"))
                )
                .Columns(columns =>
                {
                    columns.Bound(c => c.LastName).Groupable(false).Sortable(false).Template(temp =>
                    {
                        return Html.ActionLink(temp.LastName ?? "org?", "Details", new { id = temp.ID });
                    });
                    columns.Bound(c => c.FirstName).Groupable(false).Sortable(false);
                })
                .Pageable()
                .Sortable()
            )
        </div>
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 15 Jun 2012 Link to this post

    Hi Trent,

    I am not sure what exactly causes this look. I tried to reproduce the problem locally but to no avail. Could you please check the attached project and see if I missed something?
    If I did please modify the project and send it back so we can check for a solution.

    Greetings,
    Petur Subev
    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. Trent Jones
    Trent Jones avatar
    49 posts
    Member since:
    Aug 2009

    Posted 15 Jun 2012 Link to this post

    I forgot to mention that i am using the MVC wrapper (i guess that is obvious from the razor markup).  After letting the page generate and copying the produced javascript and switching the view to:
    <div id="contact-list"></div>

    with javascript:
    jQuery("\#contact-list").kendoGrid({
            columns: [
                {
                    "title": "Last Name", "field": "LastName", "groupable": false, "encoded": true,
                    "template": "<a href='/contacts/contact/details/#= ID#'>#= LastName#</a>"
                },
                { "title": "First Name", "field": "FirstName", "groupable": false, "encoded": true }
            ],
            pageable: { autoBind: true },
            sortable: false, //until we get filters, sorting
            scrollable: false,
            dataSource: {
                transport: {
                    read: { url: "/contacts/Contact/_Index" }
                },
                pageSize: currentPageSize, page: 1, total: 0,
                serverPaging: true, serverSorting: true, serverFiltering: true, serverGrouping: true, serverAggregates: true,
                type: "aspnetmvc-ajax",
                sort: [{ "field": "LastName", "dir": "desc" }],
                filter: [],
                schema: {
                    data: "Data", total: "Total", errors: "Errors",
                    model: {
                        fields: {
                            ID: { type: "object" },
                            FirstName: { type: "string" },
                            MiddleName: { type: "string" },
                            LastName: { type: "string" }
                        }
                    }
                }
            },
            dataBound: onDataBound
        });


    I no longer face the issue having taken the MVC wrapper out of the equation.  Also, it doesn't seem that the MVC Wrapper is as complete as the javascript version.   For instance, i couldn't find how to write a function to the dataBound event as above with the MVC wrapper (extension).

    Do note that i am using MVC4 and am using:
    <script src="~/Scripts/js" type="text/javascript"></script>

    Which grabs everything in the Scripts folder and combines and minifies.  I renamed the aspnet file so that it would come after the kendo.web file.



  5. Trent Jones
    Trent Jones avatar
    49 posts
    Member since:
    Aug 2009

    Posted 26 Jun 2012 Link to this post

    So it seems it's related to having the kendo js and jquery in the head section of a web page.

    Question is that the best practice is to put scripts at the bottom of the page.  Including jQuery.  If i follow this pattern, the grid is generated but is not styled appropriately.  Then, other controls throw js errors because jQuery isn't available yet.

    Seems that the controls are rendered and executed immediately in the code where they exist and since jquery is at closing body tag it's not available yet.
  6. Trent Jones
    Trent Jones avatar
    49 posts
    Member since:
    Aug 2009

    Posted 26 Jun 2012 Link to this post

    Here is the page output after it is all rendered.  Notice the two tables.

    <div tabindex="0" data-role="grid" class="k-widget k-grid" id="user-list">
        <table cellspacing="0">
            <colgroup>
                <col>
                <col>
                <col>
                <col>
            </colgroup>
            <thead class="k-grid-header">
                <tr>
                    <th class="k-header" data-field="Sid" data-title="Sid" scope="col"><span class="k-link">
                        Sid</span></th>
                    <th class="k-header" data-field="FirstName" data-title="First Name" scope="col"><span
                        class="k-link">First Name</span></th>
                    <th class="k-header" data-field="LastName" data-title="Last Name" scope="col"><span
                        class="k-link">Last Name</span></th>
                    <th class="k-header" data-field="Active" data-title="Status" scope="col"><span class="k-link">
                        Status</span></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td>Demo</td>
                    <td>Demo</td>
                    <td>
                        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
                    </td>
                </tr>
                <tr class="k-alt">
                    <td></td>
                    <td>Trent</td>
                    <td>Dev3-2</td>
                    <td>
                        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>Aravind</td>
                    <td>Dev3-work</td>
                    <td>
                        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
                    </td>
                </tr>
                <tr class="k-alt">
                    <td></td>
                    <td>Aravind</td>
                    <td>Dev32</td>
                    <td>
                        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>Aravind</td>
                    <td>Dev333</td>
                    <td>
                        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
                    </td>
                </tr>
                <tr class="k-alt">
                    <td></td>
                    <td>Ramadass</td>
                    <td>Dev3</td>
                    <td>
                        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>Trent</td>
                    <td>ERwer</td>
                    <td>
                        <input class="check-box" disabled="disabled" type="checkbox"></td>
                </tr>
                <tr class="k-alt">
                    <td></td>
                    <td>Scott</td>
                    <td>Guthrie</td>
                    <td>
                        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>trent</td>
                    <td>jones</td>
                    <td>
                        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
                    </td>
                </tr>
                <tr class="k-alt">
                    <td></td>
                    <td>Trent</td>
                    <td>Jones</td>
                    <td>
                        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
                    </td>
                </tr>
                <tr>
                    <td></td>
                    <td>Murali</td>
                    <td>Naik</td>
                    <td>
                        <input checked="checked" class="check-box" disabled="disabled" type="checkbox">
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="k-pager-wrap k-grid-pager"></div>
        <table class="k-focusable" cellspacing="0">
            <colgroup>
                <col>
                <col>
                <col>
                <col>
            </colgroup>
            <thead class="k-grid-header">
                <tr>
                    <th class="k-header" data-field="Sid" data-title="Sid">Sid</th>
                    <th class="k-header" data-field="FirstName" data-title="First Name">First Name</th>
                    <th class="k-header" data-field="LastName" data-title="Last Name">Last Name</th>
                    <th class="k-header" data-field="Active" data-title="Status">Status</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <script>
        jQuery(function () {
            jQuery("\#user-list").kendoGrid({
                columns: [{ "title": "Sid", "field": "Sid", "encoded": true },
                    { "title": "First Name", "field": "FirstName", "encoded": true },
                    { "title": "Last Name", "field": "LastName", "encoded": true },
                    { "title": "Status", "field": "Active", "encoded": true }],
                scrollable: false, autoBind: false,
                dataSource: {
                    transport: {
                        prefix: "user-list-",
                        read: { url: "" }
                    },
                    serverPaging: true, serverSorting: true, serverFiltering: true,
                    serverGrouping: true, serverAggregates: true,
                    type: "aspnetmvc-server",
                    filter: [], schema: {
                        data: "Data", total: "Total", errors: "Errors",
                        model: { fields: { Id: { type: "object" }, Sid: { type: "number" }, FirstName: { type: "string" }, LastName: { type: "string" }, Email: { type: "string" }, Active: { type: "boolean" } } }
                    }
                }
            });
        });
    </script>
  7. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 26 Jun 2012 Link to this post

    Hi Trent,

    Yes each approach has its pros and cons. Regarding the dataBound event - you can attach handler the following way:
    @(Html.Kendo().Grid<KendoMVCWrappers.Models.Person>().Name("persons")
                //...
                .Events(events=>events.DataBound("onDataBound"))


    Kind Regards,
    Petur Subev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Adrian
    Adrian avatar
    1 posts
    Member since:
    Jul 2012

    Posted 13 Jul 2012 Link to this post

    Hi Petur,

    Can you respond to Trent's last post? I've run across the exact same issue with two tables appearing on the page.

    Thanks!
  9. Trent Jones
    Trent Jones avatar
    49 posts
    Member since:
    Aug 2009

    Posted 13 Jul 2012 Link to this post

    My issues went away with this when i got the beta bits.  however, in IE i have an extra digit in the pager floating around....
  10. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 18 Jul 2012 Link to this post

    Hi Trent,

     Does the problem appear if you update to the official release? The assembly version should be 2012.2.710.

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. PaulMrozowski
    PaulMrozowski avatar
    80 posts
    Member since:
    Apr 2007

    Posted 19 Jul 2012 Link to this post

     I'm seeing the same behavior, version 2012.2.710.340

    Here's the source:

    @model Focus.Web.ViewModels.BatchViewModel
     
    @{
        ViewBag.Title = "Index";
    }
     
    <h2>Batch List</h2>
    <button id="btnNewBatch" data-bind="click: addBatch">New Batch</button>
    @(Html.Kendo().Grid<Focus.BusinessObjects.BatchItem>()
        .Name("Grid")
        .Columns(col =>
        {
            col.Bound(b => b.BatchNum);
            col.Bound(b => b.AddedOn)
               .Format("{0:MM/dd/yyyy}");
            col.Bound(b => b.ItemCount);
        })
        .Sortable()
        .Selectable()
        .DataSource(ds => ds
            .Ajax()
            .Read(read => read.Action("PostOpenBatchList", "Batch"))
        )
         
    )
     
    <div id="newBatchWindow"></div>


    Here's the generated page:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Index</title>
        <link rel="stylesheet" type="text/css" href="/Content/Site.css" />
    <link rel="stylesheet" type="text/css" href="/Content/kendo.common.css" />
    <link rel="stylesheet" type="text/css" href="/Content/grid.css" />
    <link rel="stylesheet" type="text/css" href="/Content/kendo.default.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>                
     
    </head>
     
    <body>
        <header>
            <div id="titlebar">               
                <div id="logindisplay">
                        [ <a href="/Account/LogOn">Log On</a> ]
     
                </div>
                <div class="companyHeader">
                    <h2>Title Here</h2>
                </div>             
     
            </div>                      
        </header>
     
        <div class="container">
            <div class="column span-24">
                <section id="main">
                     
    <h2>Batch List</h2>
     
    <button id="btnNewBatch" data-bind="click: addBatch">New Batch</button>
     
    <div class="k-widget k-grid" id="Grid"><table cellspacing="0"><colgroup><col /><col /><col /></colgroup><thead class="k-grid-header"><tr><th class="k-header" data-field="BatchNum" data-title="Batch #" scope="col"><a class="k-link" href="/Batch/PostOpenBatchList?Grid-sort=BatchNum-asc">Batch #</a></th><th class="k-header" data-field="AddedOn" data-title="Added On" scope="col"><a class="k-link" href="/Batch/PostOpenBatchList?Grid-sort=AddedOn-asc">Added On</a></th><th class="k-header" data-field="ItemCount" data-title="Item Count" scope="col"><a class="k-link" href="/Batch/PostOpenBatchList?Grid-sort=ItemCount-asc">Item Count</a></th></tr></thead><tbody><tr class="t-no-data"><td colspan="3"></td></tr></tbody></table></div><script>
     
        jQuery(function(){jQuery("#Grid").kendoGrid({columns:[{title:"Batch #",field:"BatchNum",encoded:true},{title:"Added On",field:"AddedOn",format:"{0:MM/dd/yyyy}",encoded:true},{title:"Item Count",field:"ItemCount",encoded:true}],sortable:true,selectable:"Single, Row",scrollable:false,dataSource:{transport:{read:{url:"/Batch/PostOpenBatchList"}},serverPaging:true,serverSorting:true,serverFiltering:true,serverGrouping:true,serverAggregates:true,type:"aspnetmvc-ajax",filter:[],schema:{data:"Data",total:"Total",errors:"Errors",model:{fields:{ItemCount:{type:"number"},Batch_ID:{type:"number"},Property_FK:{type:"number"},BatchNum:{type:"string"},Comment:{type:"string"},Type:{type:"string"},PostedOn:{type:"date",defaultValue:null},CancelledOn:{type:"date",defaultValue:null},AddedOn:{type:"date"},AddedBy_User_FK:{type:"number",defaultValue:null},LastUpdatedOn:{type:"date",defaultValue:null},LastUpdatedBy_User_FK:{type:"number",defaultValue:null},timestamp:{type:"object"},Property:{type:"object"},PropertyReference:{type:"object"},User:{type:"object"},UserReference:{type:"object"},User1:{type:"object"},User1Reference:{type:"object"},CashReceipts:{type:"object"},EntityState:{editable:false,type:"number"},EntityKey:{type:"object"}}}}}});});
     
    </script>
     
    <div id="newBatchWindow"></div>
                </section>
                <footer>
                </footer>
            </div>
        </div>
        <script type="text/javascript" src="/Scripts/modernizr-1.7.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script>
    <script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script type="text/javascript" src="/Scripts/knockout-2.0.0.js"></script>
    <script type="text/javascript" src="/Scripts/kendo.web.min.js"></script>
    <script type="text/javascript" src="/Scripts/kendo.aspnetmvc.min.js"></script>
    <script type="text/javascript" src="/Scripts/knockout-kendo.min.js"></script>  
     
    </body>
    </html>
  12. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 20 Jul 2012 Link to this post

    Hi Paul,

     I cannot reproduce that in a test project. I am attaching the same to this thread. What is different in your case?

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. PaulMrozowski
    PaulMrozowski avatar
    80 posts
    Member since:
    Apr 2007

    Posted 20 Jul 2012 Link to this post

     It looks like I had an outdated copy of kendo.all.min.js / kendo.web.min.js. Updating it fixed the problem.
  14. CAM
    CAM  avatar
    8 posts
    Member since:
    Apr 2008

    Posted 24 Aug 2012 Link to this post

    same issue here, with same fix.
    Ensure you are using the latest *.min.js files.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready