Kendo UI grid with filter row

19 posts, 2 answers
  1. Johannes Krackowizer
    Johannes Krackowizer avatar
    2 posts
    Member since:
    Jan 2010

    Posted 17 Jul 2014 Link to this post

    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.
  2.
  3. Vasu
    Vasu avatar
    14 posts
    Member since:
    Jan 2006

    Posted 19 Jul 2014 Link to this post

    I would like to know this too?  Grid gets unnecessarily wider due to same size filter input boxes.
  5. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 21 Jul 2014 Link to this post

    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.

     
  7. Nathan
    Nathan avatar
    6 posts
    Member since:
    Jun 2014

    Posted 28 Jul 2014 in reply to Petur Subev Link to this post

    Can you provide a complete example in razor syntax.  It's frustrating because the gridfiltermode isn't working consistently when creating grids using razor.
  8.
  9. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 28 Jul 2014 Link to this post

    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.

     
  11. Nathan
    Nathan avatar
    6 posts
    Member since:
    Jun 2014

    Posted 28 Jul 2014 in reply to Petur Subev Link to this post

    thanks for replying...yet I asked for a complete small example using razor.  not a link that I can find myself.
  13. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 28 Jul 2014 Link to this post

    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.

     
  14.
  15. Nathan
    Nathan avatar
    6 posts
    Member since:
    Jun 2014

    Posted 28 Jul 2014 in reply to Petur Subev Link to this post

    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
  17. Nathan
    Nathan avatar
    6 posts
    Member since:
    Jun 2014

    Posted 28 Jul 2014 in reply to Nathan Link to this post

    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))
    )
  19. Answer
    Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 30 Jul 2014 Link to this post

    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.

     
  20.
  21. Nathan
    Nathan avatar
    6 posts
    Member since:
    Jun 2014

    Posted 30 Jul 2014 in reply to Petur Subev Link to this post

    Thanks for your reply and attachment.

    (By the way, the link you provided results in a 404 error.  Bad/dead link, thanks)
  23. Nathan
    Nathan avatar
    6 posts
    Member since:
    Jun 2014

    Posted 30 Jul 2014 in reply to Petur Subev Link to this post

    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.
  25. Johannes Krackowizer
    Johannes Krackowizer avatar
    2 posts
    Member since:
    Jan 2010

    Posted 30 Jul 2014 Link to this post

    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?
  26.
  27. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 31 Jul 2014 Link to this post

    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.

     
  29. Ashutosh
    Ashutosh avatar
    1 posts
    Member since:
    Sep 2014

    Posted 22 Jan 2015 Link to this post

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

    Thanks
    Ashutosh
  31. Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 24 Jan 2015 Link to this post

    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.

  32.
  33. Joel
    Joel avatar
    209 posts
    Member since:
    Jun 2018

    Posted 21 Feb 2020 in reply to Petur Subev Link to this post

    Bad link
  35. Joel
    Joel avatar
    209 posts
    Member since:
    Jun 2018

    Posted 21 Feb 2020 in reply to Joel Link to this post

    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

  37. Dimo
    Admin
    Dimo avatar
    8485 posts

    Posted 24 Feb 2020 Link to this post

    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.
  38.
Back to Top