Grid ToolBar custom item/template

[Timothy]

I am having difficulty working out how to add a Date picker to the Grid ToolBar in order that I use it to filter a large data set (500,000+ reords).

The documentation for showing how to do this for Kendo UI doesn't translate easily to MVC warpper versions.

[Rosen]

Hello Timothy,

Could you please provide a bit more details on what difficulties you are facing in achieving the functionality in question. Also additional information about the exact scenario you are trying to implement will be appreciated. 

Greetings,
Rosen
the Telerik team

[fred]

We are new to Kendo UI and also have had trouble understanding how this is achieved with MVC. In effect we need to implement a custom toolbar for ther Grid that contains a number of fields that we can use to filter the contents of the Grid. The built in filtering supplied is unfortunately not appropriate. Are there any examples of how to do this ?

[Gary]

I've been working on a similar issue and have found a solution that suits my needs and it might be able to help you with yours:

My solution was:

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

    .Name("BranchGrid")

    .Columns(cols =>

    {

        //  cols.Command(command => { command.Edit(); });

        cols.Bound(a => a.BranchName);

        cols.Bound(a => a.AddressLine1);

        cols.Bound(a => a.Postcode);

    })

    .Pageable()

    .Filterable()

    .Sortable()

    .Selectable(sel => sel.Mode(GridSelectionMode.Single))

    .Editable(e => e.Mode(GridEditMode.PopUp))

    .DataSource(ds => ds

        .Ajax()

        .PageSize(3)

        .Model(model => model.Id(a => a.BranchId))

        .Create(c => c.Action("Create", "Branch"))

        .Read(r => r.Action("BranchRead", "Branch", new { AccountId = ViewBag.AccountId }))

        .Update(u => u.Action("Edit", "Branch"))

        .Destroy(d => d.Action("Delete", "Branch"))

    )

    .Events(e => e.Change("BranchGrid_SelectedIndexChanged"))

    .ToolBar(tool => tool.Template(

        @<text>

            <label>Filter by Account: </label>

            @(Html.Kendo().ComboBox()

                .Name("cbAccounts")

                .DataTextField("AccountName")

                .DataValueField("AccountId")

                .DataSource(ds => ds.Read(read => read.Action("GetAccountsList", "Account")))

                .Events(e => e.Change("ddlAccountList_SelectedIndexChanged"))

                .HtmlAttributes(new { value = Request["AccountId"] })

            )

        </text>)

    )

)

<script type="text/javascript">

        function ddlAccountList_SelectedIndexChanged(e) {

            var oEvent = e;

            var oAccountId = e.sender.dataItem(e.sender.select()).AccountId;

            if (oAccountId !== '')

                window.top.location = "/Branch?AccountId=" + oAccountId;

            else window.top.location = "/Branch";

        }

</script>

This didn't make use of the in-built filtering of the kendo grid as my problem didn't require it but it could be accomplished in the combo box handler.

[Dongfen]

I have a different question about Grid Custom Toolbar Template - Does Kendo MVC Grid supports multiple dropdownlist filer in the toolbar?

Here is what I want it to work:
.ToolBar(toolbar => {
toolbar.Template(@<text> 
Court Case:
@(Html.Kendo().DropDownList()
.Name("courtcases")
.OptionLabel("All")
.DataTextField("court_case_number")
.DataValueField("court_case_sid")
.AutoBind(false)
.Events(e => e.Change("courtcasesChange"))
.DataSource(ds =>
{
                                    ds.Read("GetCourtCases_Data", "Document");
})
) 
                        Author:
@(Html.Kendo().DropDownList()
.Name("authors")
.OptionLabel("All")
.DataTextField("FullName")
.DataValueField("AuthorID")
.AutoBind(false)
.Events(e => e.Change("authorChange"))
.DataSource(ds =>
{
                                    ds.Read("GetAuthor_Data", "Document");
})
) 
</text>               
                    );
})

Any idea how can I get this to work?

Thanks

Dongfen

[Vladimir Iliev]

Hi Timothy,

 
Basically the required behavior is possible to achieve, however it will require custom solution which is out of scope of our support service as it covers the build-in functionality only. I would suggest to start implementing the below solution (to apply the filters from the DropDownLists to the Grid using the DataSource client-side API) and open a new support thread if you face any difficulties.

Kind Regards,
Vladimir Iliev
Telerik