Beginner grid questions

[Alex]

I just downloaded the trial version, and I'm having problems creating a simple grid. I tries three different "variations" and none seem to work.

First, I tried this:

@(Html.Kendo().Grid(Model).Name("ConnectionManagementSystems").Columns(c => {    c.

I don't get intellisense for c.Bound method, so something is wrong.

I then tried 

@(Html.Kendo().Grid<ConnectionManagement.Models.ConnectionManagement2Model></ConnectionManagement.Models.ConnectionManagement2Model>

But it thinks that the model is an html tag and not the model class.

I then tried 

<script>
    $(document).ready(function () {
        $("#connectionManagementSystems").kendoGrid();
    });
</script>
    <div id="connectionManagementSystems">

    <table>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddress)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddressCity)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddressState)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddressZipCode)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SystemId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SystemType)
            </th>
            <th></th>
        </tr>

    @foreach (var item in Model) {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.SiteAddress)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SiteAddressCity)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SiteAddressState)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SiteAddressZipCode)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SiteId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SiteName)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SystemId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.SystemType)
            </td>
            <td>
                @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
                @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
            </td>
        </tr>
    }

    </table>
            </div>

But this places the headers at the bottom of the grid.

It seems that there are many different ways to create grids, so what is the best way and why don't the above work?

Thanks
Alex

[Vladimir Iliev]

Hi Alex,

Basically all of the listed examples works as expected on our side - most probably there is some invalid configuration on your side. Could you please provide runable project where the issue is reproduced? This would help us identify the exact reasons for current behavior. 

Regards,
Vladimir Iliev
Telerik

[Alex]

Probably is since I really had a hard time setting it up even after going through this document(http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/asp-net-mvc-4) and re-starting the laptop. In addition to this, I also had to add the assembly in both the View and root config files to get it to work. 

I've attached the project. I'm using an MVC service as the data access and business rules layer....

[Daniel]

Hello Alex,

Thank you for providing a sample project. The problem with the code used for the MVC wrapper will occur because this is not a valid syntax for declaring the model type:

<ConnectionManagement.Models.ConnectionManagement2Model></ConnectionManagement.Models.ConnectionManagement2Model>

The following syntax should be used instead:

Html.Kendo().Grid<ConnectionManagement.Models.ConnectionManagement2Model>()

The namespaces seems to be correctly included and the intellisense seems to be working as expected on my side with the first snippet that you provided? The problem could be cause by the model type not being declared for the view. Was the type defined as in the snippet below when you tried it?

@model IEnumerable<ConnectionManagement.Models.ConnectionManagement2Model>

If yes then please check this screen cast and let me know if I am missing something.

Regarding the issue with the headers being displayed at the bottom - when using the initialization from a table you should initialize the Grid on the table element as demonstrated in this demo instead of initializing the widget on a div element that wraps the table. I would also recommend to add the thead and tbody tags explicitly instead of relying on the browser to add them:

<table  id="connectionManagementSystems">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddress)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddressCity)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddressState)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteAddressZipCode)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SiteName)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SystemId)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.SystemType)
            </th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.SiteAddress)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SiteAddressCity)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SiteAddressState)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SiteAddressZipCode)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SiteId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SiteName)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SystemId)
                </td>
                <td>
                    @Html.DisplayFor(modelItem => item.SystemType)
                </td>
                <td>
                    @Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
            @Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
                </td>
            </tr>
        }
    </tbody>
</table>

Regards,
Daniel
Telerik