Is it possible to load data from HTML table with pagination?

[Divakar]

I am using kendo grid to populate data in that grid i use HTML table as datasource. With the help initialization from table demo sample i loaded data in grid. But my problem is to show pagination for that grid?

[Jayesh Goyani]

Hello,

Yes, it is possible. Please try with the below code snippet.

<div id="example" class="k-content">
    <table id="grid">
        <colgroup>
            <col />
            <col />
            <col style="width: 110px" />
            <col style="width: 120px" />
            <col style="width: 130px" />
        </colgroup>
        <thead>
            <tr>
                <th data-field="make">
                    Car Make
                </th>
                <th data-field="model">
                    Car Model
                </th>
                <th data-field="year">
                    Year
                </th>
                <th data-field="category">
                    Category
                </th>
                <th data-field="airconditioner">
                    Air Conditioner
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    Volvo
                </td>
                <td>
                    S60
                </td>
                <td>
                    2010
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    Audi
                </td>
                <td>
                    A4
                </td>
                <td>
                    2002
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    BMW
                </td>
                <td>
                    535d
                </td>
                <td>
                    2006
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    BMW
                </td>
                <td>
                    320d
                </td>
                <td>
                    2006
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    No
                </td>
            </tr>
            <tr>
                <td>
                    VW
                </td>
                <td>
                    Passat
                </td>
                <td>
                    2007
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    No
                </td>
            </tr>
            <tr>
                <td>
                    Peugeot
                </td>
                <td>
                    407
                </td>
                <td>
                    2006
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    Honda
                </td>
                <td>
                    Accord
                </td>
                <td>
                    2008
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    No
                </td>
            </tr>
            <tr>
                <td>
                    Alfa Romeo
                </td>
                <td>
                    159
                </td>
                <td>
                    2008
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    No
                </td>
            </tr>
            <tr>
                <td>
                    Nissan
                </td>
                <td>
                    Almera
                </td>
                <td>
                    2001
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    Mitsubishi
                </td>
                <td>
                    Lancer
                </td>
                <td>
                    2008
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    Opel
                </td>
                <td>
                    Vectra
                </td>
                <td>
                    2008
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    Toyota
                </td>
                <td>
                    Avensis
                </td>
                <td>
                    2008
                </td>
                <td>
                    Saloon
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    Audi
                </td>
                <td>
                    Q7
                </td>
                <td>
                    2007
                </td>
                <td>
                    SUV
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    Hyundai
                </td>
                <td>
                    Santa Fe
                </td>
                <td>
                    2012
                </td>
                <td>
                    SUV
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    Nissan
                </td>
                <td>
                    Qashqai
                </td>
                <td>
                    2007
                </td>
                <td>
                    SUV
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    Mercedez
                </td>
                <td>
                    B Class
                </td>
                <td>
                    2007
                </td>
                <td>
                    Hatchback
                </td>
                <td>
                    Yes
                </td>
            </tr>
            <tr>
                <td>
                    Lancia
                </td>
                <td>
                    Ypsilon
                </td>
                <td>
                    2006
                </td>
                <td>
                    Hatchback
                </td>
                <td>
                    Yes
                </td>
            </tr>
        </tbody>
    </table>
    <script>
        $(document).ready(function () {
            $("#grid").kendoGrid({
                height: 430,
                sortable: true,
                pageable: {
                    messages: {
                        empty: "No items to display"
                    },
                    input: false,
                    refresh: true,
                    pageSizes: true,
                    pageSizes: [10, 20, 30, 50]
                }
            });

            $("#grid").data("kendoGrid").dataSource.pageSize(10);
        });
    </script>
</div>

Thanks,
Jayesh Goyani

[Divakar]

Thanx it worked with your snippet...

[Saeed]

can I have a kendo grid table which loads data from html table with a custom pagination that calls an ajax request when pagination has changed?

[Viktor Tachev]

Hi Saeed,

 

The Grid widget can be initialized from HTML table element and also have DataSource configured with transport and remote operations. With this setup a request will be made when requesting the items for a new page. For more information on initializing the Grid from a table element and data binding check out the resources below:

• Initializing from HTML table
• Binding to remote data
• Example - binding to remote data

 

Regards,
Viktor Tachev
Progress Telerik

[Sanjay]

Can this design be rendered https://bbbootstrap.com/snippets/bordered-table-pagination-and-card-83072880 for table with pagination

[Sanjay]

<a href="https//google.com">Datatables with pagination</a>

[Viktor Tachev]

Hello Sanjay,

 

In order to implement the functionality I suggest using a Kendo Grid widget. Check the resources below that describe how the widget can be initialized and configured.

https://docs.telerik.com/kendo-ui/controls/data-management/grid/overview

https://demos.telerik.com/kendo-ui/grid/index

 

That said, in order to show the progress and percentage information you can use templates for the Grid columns. The following example shows how a progress bar can be added to the Grid.

https://docs.telerik.com/kendo-ui/knowledge-base/add-a-progressbar-in-a-grid-cell

 

Showing row numbers can be achieved with the approach below:

https://docs.telerik.com/kendo-ui/knowledge-base/add-row-numbers

 

Give the suggestions a try and let me know how they work for you.

 

Regards,
Viktor Tachev
Progress Telerik