[Solved] Filter template over Kendo helper

[Dmitriy]

Hello.
Have anybody ever tried to use Kendo helpers for creating Filter Templates?

<div>

@(Html.Kendo().Grid(Model)

        .Name("Grid")

        .Columns(columns =>

        {

            columns.Bound(p => p.Id);

            columns.Bound(p => p.UserName);

            columns.Bound(p => p.FullName);

            columns.Bound(p => p.Organization).ClientTemplate(

                 "# if (data.Organization != null) { #" +

                 "#= data.Organization.Name #" +

                 "# } else { #" +

                 "#: '<N/A>' #" +

                 "# } #"

                )

                .Filterable(filterable => filterable.UI("orgFilterKendo"));

             

            columns.Bound(p => p.Email);

            columns.Bound(p => p.PhoneNumber);

            columns.Bound(p => p.PostName);

        })

        .Filterable(filterable => filterable

            .Extra(true)          

        )       

        .EnableCustomBinding(true)

        .DataSource(dataSource => dataSource

            .Ajax()          

            .Model(model => {

                model.Id(p => p.Id);

                model.Field(p => p.Id).Editable(false);

            })

            .Read("GetGridData", "User")

        )

    )

</div>

<script id="orgFilterKendo" type="text/x-kendo-template">

    @Html.Kendo().DropDownListFor(

    @(Html.Kendo().DropDownList()       

        .Name("Organization")

        .DataValueField("Id")

        .DataTextField("Name")

        .OptionLabel("Не задано")

        .BindTo((System.Collections.IEnumerable)ViewData["UserOrganizations"])

        .ToClientTemplate()

)

</script>

The above example doesn't work :-(
I don't want to use JavaScript like in the example. The solution described below works fine, but I have to bind data again and I can't bind it to the ViewData directly.

<script type="text/javascript">

    function orgFilterKendo(element) {

        element.kendoDropDownList({

            dataTextField: "Name",

            dataValueField: "Id",

            optionLabel: "--Select Value--",

            dataSource: {

                transport: {

                    read: "@Url.Action("FilterMenu_Organizations")"

                }               

            }          

        });

    }

        

</script>

[Rosen]

Hi Dmitriy,

The wrapper cannot be use to create the DropDownList as the actual element is already create within the menu, thus it can be only enhanced by instantiating a widget over it. However, if you want to populate it from a ViewData variable, you can serialize it within the actual widget definition. For example:

function cityFilter(element) {
     element.kendoDropDownList({
         dataSource: {
             data: @(Html.Raw(Json.Encode(ViewData["cities"])))
         },
         optionLabel: "--Select Value--"
     });
 }

Regards,
Rosen
the Telerik team