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

Beginner grid questions

3 Answers 34 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Alex
Top achievements
Rank 1
Alex asked on 27 Dec 2013, 06:39 PM
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

3 Answers, 1 is accepted

Sort by
0
Vladimir Iliev
Telerik team
answered on 30 Dec 2013, 12:25 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Alex
Top achievements
Rank 1
answered on 31 Dec 2013, 01:11 PM
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....
0
Daniel
Telerik team
answered on 02 Jan 2014, 09:13 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
Grid
Asked by
Alex
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Alex
Top achievements
Rank 1
Daniel
Telerik team
Share this question
or