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

Kendo UI grid with filter row

18 Answers 1005 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Johannes Krackowizer
Top achievements
Rank 1
Johannes Krackowizer asked on 17 Jul 2014, 11:55 AM
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.

18 Answers, 1 is accepted

Sort by
0
Vasu
Top achievements
Rank 1
answered on 19 Jul 2014, 07:10 PM
I would like to know this too?  Grid gets unnecessarily wider due to same size filter input boxes.
0
Accepted
Petur Subev
Telerik team
answered on 21 Jul 2014, 09:05 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Nathan
Top achievements
Rank 1
answered on 28 Jul 2014, 02:15 PM
Can you provide a complete example in razor syntax.  It's frustrating because the gridfiltermode isn't working consistently when creating grids using razor.
0
Petur Subev
Telerik team
answered on 28 Jul 2014, 03:42 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Nathan
Top achievements
Rank 1
answered on 28 Jul 2014, 03:45 PM
thanks for replying...yet I asked for a complete small example using razor.  not a link that I can find myself.
0
Petur Subev
Telerik team
answered on 28 Jul 2014, 04:05 PM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Nathan
Top achievements
Rank 1
answered on 28 Jul 2014, 05:11 PM
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
0
Nathan
Top achievements
Rank 1
answered on 28 Jul 2014, 05:28 PM
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))
)
0
Accepted
Petur Subev
Telerik team
answered on 30 Jul 2014, 11:14 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Nathan
Top achievements
Rank 1
answered on 30 Jul 2014, 12:22 PM
Thanks for your reply and attachment.

(By the way, the link you provided results in a 404 error.  Bad/dead link, thanks)
0
Nathan
Top achievements
Rank 1
answered on 30 Jul 2014, 02:14 PM
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.
0
Johannes Krackowizer
Top achievements
Rank 1
answered on 30 Jul 2014, 02:21 PM
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?
0
Petur Subev
Telerik team
answered on 31 Jul 2014, 07:09 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Ashutosh
Top achievements
Rank 1
answered on 22 Jan 2015, 03:01 PM
Hi,
I am getting design issue with filter row functionality. Can any one help me correction it? Please find the attachment.

Thanks
Ashutosh
0
Dimo
Telerik team
answered on 24 Jan 2015, 04:38 PM
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

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 21 Feb 2020, 04:07 PM
Bad link
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 21 Feb 2020, 04:08 PM

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

0
Dimo
Telerik team
answered on 24 Feb 2020, 07:06 AM

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

Get quickly onboarded and successful with your Telerik UI for ASP.NET MVC with the dedicated Virtual Classroom technical training, available to all active customers.
Tags
Grid
Asked by
Johannes Krackowizer
Top achievements
Rank 1
Answers by
Vasu
Top achievements
Rank 1
Petur Subev
Telerik team
Nathan
Top achievements
Rank 1
Johannes Krackowizer
Top achievements
Rank 1
Ashutosh
Top achievements
Rank 1
Dimo
Telerik team
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or