Get the field information on Filter UI function

[Dan]

I have a grid with a column that is a foreign key. I need to filter the column and to create a dropdown for it. Since the number of values is huge I need to use a dropdown with virtualization. Because of that I need to define a UI function. (I should mention that I have the columnmenu = true for the other case I know which field it is)

All of our javascript code must exist in a js file so the read function can not be set in it since the site can have variable url.

Is there a way to get to know for which field the function is called? I tried to look in the parent of the element sent but there is no information for which column the menu is created.

[Aleksandar]

Hi Dan,

For a bound column you can do the following to get the index of the column for which the Filterable(x=>x.UI()) method is called:

.Columns(columns =>
                            {
                                columns.Bound(p => p.OrderID).Filterable(false);
                                columns.Bound(p => p.ShipName).Filterable(x => x.UI(@<text>function(e){ myCustomFilter(e, $(event.target).closest('th').index()) }</text>));
                            })

<script>
function myCustomFilter(e, columnIndex) {
        var grid = $("#grid").getKendoGrid();
        var column = grid.columns[columnIndex]
        alert(column.title)
    }
</script>

For the ForeignKey column however the above approach won't work as in this scenario the Grid renders internally a DropDownList with the available options. For the ForeignKey column, when column menus are enabled I can suggest handling the columnMenuInit event. The event data includes information on the widget instance that has fired the event, and the field of the column for which the column menu is initialized and the container element. In the handler you can get a reference to the desired DropDownList and set it's options

    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName).Filterable(x => x.Extra(false).UI(@<text>function(e){ myCustomFilter(e, $(event.target).closest('th').index()) }</text>));
        columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName")
            .Title("Category").Width(150).Filterable(x=>x.Extra(false));
        columns.Bound(p => p.UnitPrice).Width(150);
        columns.Command(command => command.Destroy()).Width(110);
    })
   .Events(ev=>ev.ColumnMenuInit("onColumnMenuInit"))

<script>
    function onColumnMenuInit(e) {
          if(e.field == "CategoryID"){
            var ddlElements = e.container.find('[data-role="dropdownlist"]');
            var dropDownList = ddlElements[1].getKendoDropDownList();
            //set options as required 
           }
        }
</script>

I hope the above helps.

Regards,
Aleksandar
Progress Telerik

[Dan]

Hi Aleksandar,

Not exactly what I had in mind since the dropdown is already created and this means that I would have to destroy the whole dropdown list and recreate it again with my options.

I manage to solve it by adding a special class to the column and then I can get the field.

BTW: I have never seen the method ".getKendoDropDownList()". Is this a new method?

[Aleksandar]

I'm glad to hear you were able to achieve the desired result.

The getKendo<WidgetName>() method is just another way to get a reference to an already instantiated widget, same as the jQuery data method. It is documented in the Methods and Events section of the documentation.