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

Getting two grids in page

12 Answers 283 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Trent Jones
Top achievements
Rank 1
Trent Jones asked on 14 Jun 2012, 03:36 PM
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>

12 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 15 Jun 2012, 11:56 AM
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!
0
Trent Jones
Top achievements
Rank 1
answered on 15 Jun 2012, 01:21 PM
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.



0
Trent Jones
Top achievements
Rank 1
answered on 26 Jun 2012, 05:03 AM
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.
0
Trent Jones
Top achievements
Rank 1
answered on 26 Jun 2012, 01:18 PM
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>
0
Petur Subev
Telerik team
answered on 26 Jun 2012, 02:40 PM
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!
0
Adrian
Top achievements
Rank 1
answered on 13 Jul 2012, 09:11 PM
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!
0
Trent Jones
Top achievements
Rank 1
answered on 13 Jul 2012, 10:03 PM
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....
0
Atanas Korchev
Telerik team
answered on 18 Jul 2012, 02:59 PM
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!
0
PaulMrozowski
Top achievements
Rank 1
answered on 20 Jul 2012, 12:54 AM
 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>
0
Atanas Korchev
Telerik team
answered on 20 Jul 2012, 08:05 AM
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!
0
PaulMrozowski
Top achievements
Rank 1
answered on 20 Jul 2012, 09:21 PM
 It looks like I had an outdated copy of kendo.all.min.js / kendo.web.min.js. Updating it fixed the problem.
0
CAM
Top achievements
Rank 1
answered on 24 Aug 2012, 04:42 PM
same issue here, with same fix.
Ensure you are using the latest *.min.js files.
Tags
Grid
Asked by
Trent Jones
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Trent Jones
Top achievements
Rank 1
Adrian
Top achievements
Rank 1
Atanas Korchev
Telerik team
PaulMrozowski
Top achievements
Rank 1
CAM
Top achievements
Rank 1
Share this question
or