Getting two grids in page

[Trent Jones]

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>

[Petur Subev]

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

[Trent Jones]

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.

[Trent Jones]

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.

[Trent Jones]

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>

[Petur Subev]

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

[Adrian]

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!

[Trent Jones]

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....

[Atanas Korchev]

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

[PaulMrozowski]

 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>

[Atanas Korchev]

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

[PaulMrozowski]

 It looks like I had an outdated copy of kendo.all.min.js / kendo.web.min.js. Updating it fixed the problem.

[CAM]

same issue here, with same fix.
Ensure you are using the latest *.min.js files.