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

MVC Kendo Grid Custom Filter

7 Answers 724 Views
Grid
This is a migrated thread and some comments may be shown as answers.
littleGreenDude
Top achievements
Rank 1
littleGreenDude asked on 29 May 2014, 02:28 PM
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>

7 Answers, 1 is accepted

Sort by
0
littleGreenDude
Top achievements
Rank 1
answered on 03 Jun 2014, 05:43 PM
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?

0
littleGreenDude
Top achievements
Rank 1
answered on 05 Jun 2014, 03:04 PM
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)
)
0
John
Top achievements
Rank 2
answered on 29 Oct 2014, 04:10 PM
Could you post the code from your controller and and the class that has the 2 properties "SearchFunctionCode" and "SearchFunctionDescription" ?
0
Petur Subev
Telerik team
answered on 03 Nov 2014, 04:13 PM
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!
 
0
dandv
Top achievements
Rank 2
answered on 30 Dec 2014, 04:27 AM
@Petur: can you please move this thread to the appropriate forum? It doesn't seem to belong in "Let's talk about Telerik".
0
Rohith
Top achievements
Rank 1
answered on 24 Aug 2017, 11:33 AM

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?

 

0
Stefan
Telerik team
answered on 29 Aug 2017, 06:10 AM
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.
Tags
Grid
Asked by
littleGreenDude
Top achievements
Rank 1
Answers by
littleGreenDude
Top achievements
Rank 1
John
Top achievements
Rank 2
Petur Subev
Telerik team
dandv
Top achievements
Rank 2
Rohith
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or