Question

The Telerik MVC grid I am using is shown below. The data is displaying in the grid but the
filterable attribute is not working, though the “Filter Icon” is displaying. I have registered the scripts and css in the layout.cshtml but I dont know why the filterable action is not working and sometimes the Column Widths are ignored and the grid is rendering in a default size.

@model IEnumerable<Customers>

@(Html.Telerik()
    .Grid(Model) 
    .Name("Customers") 
    .PrefixUrlParameters(false) 
    .Columns(columns=>
                { 
                 columns.Bound(c => c.CustomerId).Title("CustomerId").Width(50);<br/>
                 columns.Bound(c => c.CustomerStatus).Title("Customer Status").Width(70);
                 columns.Bound(c=>c.CityId).Title("CityID").Width(50);  
                 }
    .Filterable() 
    .Sortable(sort=>sort.SortMode(GridSortMode.MultipleColumn))
)

layout.cshtml (registered scripts and stylesheets):

@(Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css").Combined(true).Compress(true)))

@(Html.Telerik().ScriptRegistrar().Globalization(true).DefaultGroup(group => group.Combined(true).Compress(true)))

Answer 1

In order to specify the size of the grid, you could wrap it in a div:

<div style="width:300px;">
   @(Html.Telerik()...
</div> 

Also, make sure you enable sorting/filtering in your grid:

.Sortable(sorting => sorting.Enabled(true))
.Filterable(filtering => filtering.Enabled(true)) 

If it still doesn’t work, ensure that the script file being created by the Telerik script manager can be served by your web server (view source, grab the .axd link and paste it into your address bar).

One more thing:

Don’t forget that the columns will expand to accomodate all their
content so be sure your column widths match your parent div.

You could also use Firebug to examine any script issues in your page.