Locked Columns

You can display Kendo UI Grid wrapper for Vue with large number of columns on limited viewports and make a small subset of them static while scrolling the rest horizontally to make them visible.

To implement locked columns in the native Vue Grid by Kendo UI, refer to the native Vue Grid by Kendo UI documentation.

To apply the locked (static or frozen) column feature, set the locked property of the corresponding column to true. By default, the Kendo UI Data Grid wrapper for Vue renders its locked columns on its left side.

The following example demonstrates how to implement the OrderID and ShipName columns as locked.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource1"
                      :type="'odata'"
                      :transport-read-url="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders'"
                      :page-size='30'
                      :schema-model-fields="dsSchemaFields">
    </kendo-datasource>

    <kendo-grid :data-source-ref="'datasource1'"
                :height="600"
                :sortable="true"
                :pageable="true"
                :column-menu="true"
                :filterable="true"
                :resizable="true"
                :groupable="true"
                :reorderable="true">
        <kendo-grid-column :field="'OrderID'"
                           :title="'Order ID'"
                           :locked="true"
                           :lockable="false"
                           :width="120"></kendo-grid-column>
        <kendo-grid-column :field="'ShipCountry'"
                           :title="'Ship Country'"
                           :width="180" ></kendo-grid-column>
        <kendo-grid-column :field="'ShipCity'"
                           :title="'Ship City'"
                           :width="180" ></kendo-grid-column>
        <kendo-grid-column :field="'ShipName'"
                           :title="'Ship Name'"
                           :locked="true"
                           :width="240" ></kendo-grid-column>
        <kendo-grid-column :field="'ShipAddress'"
                           :title="'Ship Address'"
                           :lockable="false"
                           :width="240" ></kendo-grid-column>
        <kendo-grid-column :field="'Freight'"
                           :width="120"></kendo-grid-column>
        <kendo-grid-column :field="'OrderDate'"
                           :title="'Order Date'"
                           :format="'{0:MM/dd/yyyy}'"
                           :width="180"></kendo-grid-column>

    </kendo-grid>
</div>
Vue.use(DataSourceInstaller);
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            dsSchemaFields: {
                OrderID: { type: "number" },
                Freight: { type: "number" },
                ShipName: { type: "string" },
                OrderDate: { type: "date" },
                ShipCity: { type: "string" },
                ShipCountry: { type: "string" },
                ShipAddress: { type: "string" }
            }
        }
    }
})

In this article