Filter template over Kendo helper

2 posts, 1 answers
  1. Dmitriy
    Dmitriy avatar
    2 posts
    Member since:
    Aug 2012

    Posted 08 Feb 2013 Link to this post

    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>

  2. Answer
    Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 12 Feb 2013 Link to this post

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