Get field name in filterable UI javascript function

9 posts, 0 answers
  1. Jörg Bieri
    Jörg Bieri avatar
    3 posts
    Member since:
    Oct 2012

    Posted 05 Jun 2013 Link to this post

    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
  2.
  3. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 07 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. akj
    akj avatar
    7 posts
    Member since:
    Nov 2013

    Posted 25 Nov 2013 Link to this post

    This works nice. Thanks
  7. akj
    akj avatar
    7 posts
    Member since:
    Nov 2013

    Posted 13 Dec 2013 Link to this post

    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
  8.
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 13 Dec 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. akj
    akj avatar
    7 posts
    Member since:
    Nov 2013

    Posted 13 Dec 2013 Link to this post

    Thank you Alex.
    This works perfectly...
  13. Swatantra
    Swatantra avatar
    4 posts
    Member since:
    Nov 2015

    Posted 25 Feb 2016 Link to this post

    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

  14.
  15. Swatantra
    Swatantra avatar
    4 posts
    Member since:
    Nov 2015

    Posted 25 Feb 2016 in reply to Swatantra Link to this post

    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?

     

  17. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 29 Feb 2016 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top