MVC Kendo Grid Custom Filter

8 posts, 0 answers
  1. littleGreenDude
    littleGreenDude avatar
    17 posts
    Member since:
    Jan 2014

    Posted 29 May 2014 Link to this post

    Basically, I am looking for the MVC version of this demo:

    http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

    .Columns(columns =>
            {
                columns.Bound(e => e.ID)
                    .Hidden();
                columns.Bound(e => e.SearchFunctionCode)
                    .Hidden();
                columns.Bound(e => e.SearchFunctionDesc)                
                    .Title("Search Function")
                    .Filterable( *** WHAT GOES HERE? *** )
                    .HtmlAttributes(new { style = "text-align: center" })
                    .HeaderHtmlAttributes(new { style = "text-align: center" });


    Do I still reference the javascript?

    <script type="text/javascript">
        function SearchFunctionFilter(element) {
            element.kendoDropDownList({
                dataSource: searchfunctions(),
                optionLabel: "--Select Value--"
            });
        }
    </script>
  2.
  3. littleGreenDude
    littleGreenDude avatar
    17 posts
    Member since:
    Jan 2014

    Posted 03 Jun 2014 Link to this post

    I'm closer.... I've created a custom editor template to display json results in the dropdown list.  However, I’m seeing the same behavior that is documented in:

     

    http://www.telerik.com/forums/drop-down-list-doesn%27t-load-from-json-result

     

    When I look at the console, the following error is produced
    by the Kendo javascript:

     

    TypeError: n.slice is not a function

     

    We are running version 2013.2.716.340

     

    Has this been resolved in the latest version?

  5. littleGreenDude
    littleGreenDude avatar
    17 posts
    Member since:
    Jan 2014

    Posted 05 Jun 2014 Link to this post

    I'm still getting the n.slice error.  Do I need to define the schema for this to work?  If so, what should that look like?

    @(
    Html.Kendo().DropDownList()
    .Name("SearchFunction")
    .DataTextField("SearchFunctionDesc")
    .DataValueField("SearchFunctionCode")
    .DataSource(source =>
        {       
            source.Read(read => {
                read.Action("GetSearchFunctions", "User");
            });
        })
        .OptionLabel("--Select a Search Function--")
        .AutoBind(false)
    )
  7. John
    John avatar
    7 posts
    Member since:
    Jul 2014

    Posted 29 Oct 2014 Link to this post

    Could you post the code from your controller and and the class that has the 2 properties "SearchFunctionCode" and "SearchFunctionDescription" ?
  8.
  9. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 03 Nov 2014 Link to this post

    Hello Stephen,

    Could you please share how the server side action method look like? Do you return a DataSourceResult or you return collection of items?

    Basically you can see a sample implementation here:

    http://demos.telerik.com/aspnet-mvc/dropdownlist/remotedatasource

    Inside the filterable you can pass either a bool variable (that indicates whether the column is filterable or not) or you can pass a lambda function that give you more advances configuration. In your case I assume you are looking to customize the UI like below. Notice almost all of our demos are available in all languages (not just javascript) you can switch to see those demos through the hyperlinks below the demo.

    http://demos.telerik.com/aspnet-mvc/grid/filter-menu-customization

    Kind Regards,
    Petur Subev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. dandv
    dandv avatar
    14 posts
    Member since:
    Dec 2014

    Posted 29 Dec 2014 Link to this post

    @Petur: can you please move this thread to the appropriate forum? It doesn't seem to belong in "Let's talk about Telerik".
  13. Rohith
    Rohith avatar
    3 posts
    Member since:
    Apr 2017

    Posted 24 Aug 2017 in reply to Petur Subev Link to this post

    Im using columns.template to put 2 fields together in a single column. But im not getting filter option. I also need filter is it possiblr?

     

  14.
  15. Stefan
    Admin
    Stefan avatar
    3037 posts

    Posted 29 Aug 2017 Link to this post

    Hello Rohith,

    The described behaviour is expected as the filter is made on the dataSource field and not based on the rendered value from the template.

    In this scenario, the built-in filter has to be prevented and a custom filter has to be made in order to achieve the desired results. For example, on the filter event, prevent its default behaviour and perform a custom filter based on the type value (filter mode row is recommended):

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-filter

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-filterable.mode

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top