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

[Solved] Filter and Paging Does not work - HTML table as a source

3 Answers 181 Views

Grid

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

Chacha asked on 14 Jan 2015, 01:38 PM

I have converted HTML table in MVC app to use Kendo Grid UI. Kendo Grid is showing correctly, but filter and paging in Grid does not work. Below is sample code, what is wrong.

@model IEnumerable<YochApp.Models.Document.APP_DATA_DOCUMENT>
@{
    ViewBag.Title = "Index";
}

<h5 class="title">Document List</h5>
<div id="clientGrid">
    <table class="table" id="appDocuments">
        <colgroup>
            <col style="width:130px" />
            <col style="width:130px" />
            <col style="width:130px" />
            <col style="width:120px" />
        </colgroup>
        <thead>
            <tr>
                <th>Actions</th>
                <th>
                    @Html.DisplayNameFor(model => model.DOC_TITLE)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.DOC_FILENAME)
                </th>

                <th>
                    @Html.DisplayNameFor(model => model.DOC_SIZE)
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>

                        @Html.ActionLink(".", "Details", "Document", new { id = item.DOC_ID }, new { style = "display:inline", @class = "ui-icon ui-icon-zoomin", title = "Details" })
                        @Html.ActionLink(".", "Delete", "Document", new { id = item.DOC_ID }, new { style = "display:inline", @class = "ui-icon ui-icon-close", title = "Delete" })
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.DOC_TITLE)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.DOC_FILENAME)
                    </td>

                    <td>
                        @Html.DisplayFor(modelItem => item.DOC_SIZE)
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

@section FooterScripts {

    <script>
    $(document).ready(function () {
        $("#appDocuments").kendoGrid({
            height: 500,
            width: 600,
            sortable: true,
            reorderable: true,
            resizable: true,
            pageable: true,
            filterable: true,
            scrollable: true,
            columnMenu: true
        });
    });
    </script>
}

In my layout page I have included all script kendo javascript (   @Scripts.Render("~/bundles/kendo")) ....which refer to info below in BundleConfig

bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
                        "~/Scripts/Kendo/kendo.all.min.js",
                        "~/Scripts/Kendo/kendo.aspnetmvc.min.js"
                       ));

3 Answers, 1 is accepted

answered on 16 Jan 2015, 07:36 PM

grid_withfilterandpagingissue.png

Yap....the Kendo grid is displaying correctly. It is just filter and paging issue.

The only difference between my grid and example (http://dojo.telerik.com/uGexu) is the fact I am using non-static data i,e data from model and foreach loop.