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

Turn off sorting/filtering for column on grid created from table

2 Answers 399 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Darryl
Top achievements
Rank 1
Darryl asked on 21 May 2015, 09:47 PM

I'm trying to disable sorting and filtering on a column in a grid that I created from a <table></table>. Here is the table:

<table id="vehicleList">
    <colgroup>
        <col style="width: 115px;" />
        <col style="width: 185px;" />
        <col style="width: 135px;" />
        <col style="width: 145px;" />
        <col style="width: auto;" />
        <col style="width: 255px;" />
    </colgroup>
    <thead>
        <tr>
            <th data-field="Number">Number</th>
            <th data-field="VehicleType">Type</th>
            <th data-field="LicensePlate">License</th>
            <th data-field="VIN">VIN</th>
            <th data-field="Pool">Pool</th>
            <th data-field="Buttons"> </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var v in Model)
        {
            <tr>
                <td>@v.Number</td>
                <td>@v.VehicleType.Name</td>
                <td>@v.LicensePlate</td>
                <td>@v.VIN</td>
                <td>@v.Pool.Description</td>
                <td>
                    <input type="button" class="roundedButton blue updateVehicle" value="Update" data-vehicleid="@v.VehicleId" style="z-index: 999;" />
                    <input type="button" class="roundedButton activateVehicle @(v.Active ? "orange" : "green")" value="@(v.Active ? "Deactivate" : "Activate")" data-vehicleid="@v.VehicleId" />
                    <input type="button" class="roundedButton red deleteVehicle" value="Delete" data-vehicleid="@v.VehicleId" />
                </td>
            </tr>
        }
    </tbody>
</table>

And here is my code to create the Kendo Grid:

$("#vehicleList").kendoGrid({
            pageable: {
                pageSizes: [5, 10, 25, 50, 100],
                pageSize: 5,
                buttonCount: 5
            },
            filterable: true,
            sortable: true
        });

I tried this (found a thread on StackOverflow), but the columnsConfig variable is undefined so it's not working:

var grid = $("#vehicleList").data("kendoGrid");
var columnsConfig = grid.options.columns;
columnsConfig[5].filterable = false;

columnsConfig[5].sortable = false;

grid.setOptions({ columns: columnsConfig });

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 22 May 2015, 11:43 AM

Hello Darryl,

You could achieve this by applying the data-sortable and data-filterable attributes to the column headers and set them to false. Here is an example that demonstrates this in action.

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Darryl
Top achievements
Rank 1
answered on 22 May 2015, 03:01 PM
Perfect, that's *exactly* what I was after. Thank you, Dimiter. In hind sight it seems too easy now. :)
Tags
Grid
Asked by
Darryl
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Darryl
Top achievements
Rank 1
Share this question
or