Kendo UI grid with filter row

[Johannes Krackowizer]

Hello,

I'm using the new feature of the filter row (.Filterable(ftb => ftb.Mode(GridFilterMode.Row))) in my MVC kendo UI grids. It works just as I wished. But I have two problems with it.

1. How can I disable the autocomplete feature of the filters?
2. How can i make the filter smaller or let them autofit to the column width. I have a grid with more then 10 small columns and with the activated filter row the columns width is enlarged to fit the filter and so the grid doesn't fit any more on one screen.

[Vasu]

I would like to know this too?  Grid gets unnecessarily wider due to same size filter input boxes.

[Petur Subev]

Hello,

Currently there is no configuration option which would allow you to specify these options, I will forward this to the dev team so they can provide easy way to do so.

You can turn off the autocomplete by either using template:

http://dojo.telerik.com/@pesho/akelo/1

Or by passing empty DataSource to the AutoComplete:

http://dojo.telerik.com/@pesho/akelo/2

When using the wrappers you can pass empty array:

columns.Bound(p => p.ShipName).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").BindTo(new List<object>())));

To specify width you can either do it via template, or you can add it:

http://dojo.telerik.com/@pesho/akelo

Or manually add the width like so:

http://dojo.telerik.com/@pesho/akelo/3

I am sorry for any inconvenience caused.

Kind Regards,
Petur Subev
Telerik

 

 

[Nathan]

Can you provide a complete example in razor syntax.  It's frustrating because the gridfiltermode isn't working consistently when creating grids using razor.

[Petur Subev]

Hello Nathan,

I assume you want to see the razor syntax to specify width of the input, is that right? Now that we see many people want to control we added few more option for the cell configuration which are available in the latest internal build

Here is the documentation to them:

http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.filterable.cell.inputWidth
http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.filterable.cell.suggestionOperator
http://docs.telerik.com/kendo-ui/api/web/grid#configuration-columns.filterable.cell.minLength

This options should also be available for the MVC wrappers.

Kind Regards,
Petur Subev
Telerik

 

 

[Nathan]

thanks for replying...yet I asked for a complete small example using razor.  not a link that I can find myself.

[Petur Subev]

Hello Nathan,

I am not sure what the issue is, the example remains pretty much the same.

@( Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.OrderID).Visible(false).Filterable(ftb => ftb.Cell(cell => cell.ShowOperators(false))).Width(220);
        columns.Bound(p => p.ShipName).Width(500).Filterable(ftb => ftb.Cell(cell => cell.Operator("contains").InputWidth(333)));
        columns.Bound(p => p.Freight).Width(250).Filterable(ftb => ftb.Cell(cell => cell.Operator("gte")));
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
    })

Let me know if I missed something.

Regards,
Petur Subev
Telerik

 

 

[Nathan]

That did not resolve the issue.  Input with is not even an option.

I am using the kendo.mvc dll.  Version:  2014.2.716.545

[Nathan]

Is there something wrong w/ the way I structured the grid?

​@(Html.Kendo().Grid<Vehicles>().Name("grdVehicles").Sortable().Pageable(pager => pager.PageSizes(new int[] { 5,10,15,20,50,100}))
.ToolBar(tb =>
{
tb.Template(
@<Text>
<input type="search" id="searchbox" class="SearchRight SearchTopMargin" />
<b class="FloatRight SearchTopMarginExtra">Search Grid Columns And Options</b>
</Text>);
})
.DataSource(datasource => datasource.Ajax()
.ServerOperation(false)
.Read(read => read.Action("Read", "AvailableUnits")).PageSize(@_pagesize)
.Model(vh =>
{
vh.Id("ID");
foreach (var prop in typeof(Vehicles).GetProperties())
{
vh.Field(prop.Name, prop.PropertyType);
}
}))
.Columns(columns =>
{
columns.Bound(c => c.ModelName).Title("Model").Filterable(ftb=>ftb.Cell(cell=>cell.Operator("contains")));
columns.Bound(c => c.ExteriorColor).Title("Exterior Color").Filterable(t => t.Cell(cell => cell.Operator("contains")));
columns.Bound(c => c.InteriorColor).Title("Interior Color");
columns.Bound(c => c.TrimDetail).Title("Description");
columns.Bound(c => c.EstimatedCost).Format("{0:c2}").Title("Estimated Cost").Width(75).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
columns.Command(cmd =>
{
cmd.Custom("Calculate").Click("showWindowOfCalculators").Text(" ");
}).Title("Calculators");
columns.Bound(c => c.ClassII).Title("Class II");
columns.Bound(c => c.ProjectedAvailabilityDate).Format("{0:MM/dd/yyyy}").Title("Projected Availability Date").Width(75).HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
columns.Bound(c => c.WaitList).Title("People Waiting");
columns.Command(cmd =>
{
cmd.Custom("View Details").Click("ShowWindowForVehicleDetails");
cmd.Custom("Add To Wait List");
}).Title("Miscellaneous"); //http://www.telerik.com/forums/how-to-add-multiple-command-buttons-in-the-same-column (Razor syntax for adding buttons to grid)

columns.Bound(c => c.SummaryOfAccessories).Title("Summary");
columns.Bound(c => c.DealerCost).Title("DealerCost");
}).Events(e => e.DataBound("onRowBound")).Filterable(x=>x.Mode(GridFilterMode.Row).Enabled(true))
)

[Petur Subev]

Hello again,

As I already explained these features I linked including the InputWidth were introduced later on (after the official version 2014.2.716) and it should be available in the latest internal build.

Here is an example that uses the latest internal build.

Kind Regards,
Petur Subev
Telerik

 

 

[Nathan]

Thanks for your reply and attachment.

(By the way, the link you provided results in a 404 error.  Bad/dead link, thanks)

[Nathan]

Thanks for your replies.

I still am unable to get the filter row to display.  I've tried your examples and documentation.  I never got a clear answer from my support tickets about this and I just have to guess that this is a feature that works off and on...depending how complex your grid may be.

[Johannes Krackowizer]

I tried the example project that Petur posted here. And after correcting the the reference of Kendo.Mvc.dll (which is found in lib\KENDOUIMVC\2014.2.730.340 in the sample project) it works just as expected. I just don't understand why the project contains EditorTemplates in KendoMVCWrappers\Views\Shared\EditorTemplates are they needed for something?

[Petur Subev]

Hello Johannes,

The editor templates are added automatically to the solution when using the Visual Studio addon to add the Kendo UI framework to the project, these are the built-in editor templates that guarantee you will see DatePicker widget for the DateTime fields and NumericTextBox for the number fields.

https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/templates/editor-templates

Kind Regards,
Petur Subev
Telerik

 

 

[Ashutosh]

Hi,
I am getting design issue with filter row functionality. Can any one help me correction it? Please find the attachment.

Thanks
Ashutosh

[Dimo]

Hello Ashutosh,

I am not sure how to reproduce this. Here is my test page, feel free to modify it and send the updated example.

http://dojo.telerik.com/@dimodi/owoPa

Regards,
Dimo
Telerik

[Joel]

Bad link

[Joel]

Your "reply" doesn't keep the context I had hoped.  Peter referred to this link which is bad:

 

http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/editor-templates?_ga=2.178797666.715878038.1582219970-826021708.1582039823

[Dimo]

Hi Joel,

I updated the URL in Petur's post, so that it works again and leads to the corresponding page after the documentation restructuring.

Please take a look and let us know if you need further assitance. I can see you have opened a separate forum thread, which may be more relevant to your case.

Regards,
Dimo
Progress Telerik