Get field name in filterable UI javascript function

[Jörg Bieri]

Hi

I am using the following syntax to use a the javascript function for adding a dropdown to a filter within a column of a grid:

columns: [   
            {
                title: "Typ",
                field: "FileExtension",
                width: 50,
                filterable: {
                    ui: dropDownFilter
                }
            },        
            {
                title: "Titel",
                field: "Title",
                width: 360,
                filterable: {
                    ui: dropDownFilter
                }
            },


Within the javascript function "typeFilter" I would like to know the column or better the field of the column
to build a javasript function that can work dynamically for several columns.
So is there a way to get the field ("FileExtension") within the javascript function or a way to pass it down to it?

function dropDownFilter(element) {
       element.field ?????
}

Thanks for your help!

Best regards,

Pascal Hohensträter

[Alexander Valchev]

Hello Pascal,

This is not supported out of the box, but you can do this by changing the function context (by default its the window element).

{
    title: "Typ",
    field: "FileExtension",
    width: 50,
    filterable: {
        ui: $.proxy(dropDownFilter, { field: "FileExtension" })
    }
},

function dropDownFilter(element) {
       this.field; //field name
}

I hope this will help.

Regards,
Alexander Valchev
Telerik

[akj]

This works nice. Thanks

[akj]

Hi,

I was able to use your solution using the Kendo JS grid like this :

field: "InOrOut", filterable: { ui: $.proxy(dropDownFilter, { field: "InOrOut" }) }

How can I do this using the Kendo MVC grid ?
I am not sure what should be the Column filter definition look like in this case.

columns.Bound(p => p.InOrOut).Width(100)<br>.Filterable(filterable => filterable.UI("inOrOutFilter"));

Thanks
Achintya

[Alexander Valchev]

Hi Akj,

The syntax is:

columns.Bound(p => p.InOrOut).Width(100)<br>.Filterable(filterable => filterable.UI("$.proxy(inOurOutFilter, { field: 'InOrOut' })"));

Regards,
Alexander Valchev
Telerik

[akj]

Thank you Alex.
This works perfectly...

[Swatantra]

Hi,

I am building the columns from a server side controller with below code in Index.chtml for Grid:
columns: @Html.Raw(Model.GridColumnPropertiesJson)

and in controller we are writing the .Net object GridColumnPropertyModel -->FilterablePropertyModel --> UI[string] and then generating JSON using seriailzer.

All works fine but when I try to provide a javascript function to UI property as in below code:

Model.Filterable = new FilterablePropertyModel { UI = "function(element) { myOwnFunction(element, '" + gridFieldName + "'); }" };.

It fails to recognize the myOwnFunction.

 

Is there a way to make sure myOwnFunction is called passing the colName from server side?

Regards,
Swatantra

[Swatantra]

In fact I tried  calling the myOwnFunction without any parameter and it still does not work.

property.Filterable = new FilterablePropertyModel { UI = "myOwnFunction" };

when I view the source of the page it looks like this:

"filterable":{"ui":"myOwnFunction"}

I am wondering is it because of quotes around the function name?

 

[Alexander Valchev]

Hello Swatantra,

I am afraid that this syntax is not supported. Indeed the problem is that the property is serialized with quotation marks.

Regards,
Alexander Valchev
Telerik