MVC Kendo Grid Custom Filter

[littleGreenDude]

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>

[littleGreenDude]

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?

[littleGreenDude]

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)
)

[John]

Could you post the code from your controller and and the class that has the 2 properties "SearchFunctionCode" and "SearchFunctionDescription" ?

[Petur Subev]

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

 

 

[dandv]

@Petur: can you please move this thread to the appropriate forum? It doesn't seem to belong in "Let's talk about Telerik".

[Rohith]

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?

 

[Stefan]

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