Adding datepicker date range to Grid Toolbar

[Christopher Ronak]

Hello,
Do you have an example of inserting a custom command as a .ToolBar() item that uses 2 datepicker controls as 'from' and 'to' dates?
Selecting the dates would then filter the grid based on that constraint.
I'm familiar with your 'filtering' example, but that doesn't use the toolbar.

Thanks for any help!

Chris

[Atanas Korchev]

Hi Christopher Ronak,

This is currently not supported. The toolbar can only contain custom commands which are buttons. We have a feature request to support toolbar template logged here. You can cast your vote for that feature.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Jose]

Hi, I see now is possible to add a combobox to the toolbar... its possible to add the two datetimepickers for 'from' and 'to' dates? If its affirmative, do you have some examples?  

[frederic rybkowski]

Hi,

Using Grid API, can we imagine this solution ?

in the toolBar.Template we insert edit fields (or combo or DatePicker).
then plug onXXXFilterChange on the "Apply Filters" button Click or OnChange of the edits.
The onXXXFilterChange will modify the filtering in the grid and rebind the Grid.

function onUserFilterChange(gridname) {

        // assume no filtermenu exists

        DeleteMenuFilters(gridname);

 

        var grid = $('#' + gridname).data('tGrid');

        var columns = grid.columns;

 

        ClearColumnsFilters(columns);

 

        // get filter value we will apply in the grid filters

        filter = $("#UserNameFilter").val();

 

        if (filter) {

            AddColumnFilter(grid, "UserName", "substringof", filter)

        }

 

        // get filter value we will apply in the grid filters


        filter = $("#UserMailFilter").val();

        if (filter) {

            AddColumnFilter(grid, "Email", "substringof", filter)

        }

 

        if ($("#UserUnapprovedFilter").is(':checked')) {

            // reach the column by its name

            AddColumnFilter(grid, "IsApproved", "eq", false)

        }

 

        if ($("#UserLockedFilter").is(':checked')) {

            // reach the column by its name

            AddColumnFilter(grid, "IsLockedOut", "eq", true)

        }

 

        // apply custom filtering then columns filters menus are modified


        ApplyGridFilters(grid);

    }

using these generic tool functions :

function ClearColumnsFilters(columns) {
    $.each(columns, function () {
        this.filters = null;
    });
}

function ApplyGridFilters(grid) {
    grid.filter(grid.filterExpr());
}

function DeleteMenuFilters(gridname) {
    // for all grids menufilter

    if (gridname)
        $('#' + gridname + ' .t-grid-filter').data('filter', null);
    else
        $('.t-grid-filter').data('filter', null);
}

function GridRebind(gridname) {
    var Grid = $('#' + gridname).data('tGrid');
    Grid.rebind();
}


function ClearFilters(gridname) {

    var grid = $('#' + gridname).data('tGrid');
    var columns = grid.columns;

    DeleteMenuFilters(gridname)
    ClearColumnsFilters(columns);

    // apply custom filtering
    ApplyGridFilters(grid);
}


function AddColumnFilter(grid, colName, operator, value) {

    var column = grid.columnFromMember(colName);

    // check value validity
    if (grid.isValidFilterValue(column, value)) {
        if (column.filters == null)
            column.filters = [];
        column.filters.push({ operator: operator, value: value });
    }
}

This can probably be achieved using DatePicker...

- Frederic

[Rosen]

Hello Jose,

I have attached a small sample which demonstrates a possible implementation of the requested functionality.

All the best,
Rosen
the Telerik team

[Sujono]

Hii Rosen,

Can u help with this converted to razor :

.ToolBar(toolBar => toolBar.Template(() =>
                        {%>
                            Orders from:
                            <%=Html.Telerik().DatePicker().Name("StartDate") %>
                            to:
                            <%=Html.Telerik().DatePicker().Name("EndDate") %>
                            <a class="t-button" id="filter-btn">filter</a>
                        <%}))

Thx.

[Sujono]

Ok, got the code for razor.

@{
    Html.Telerik().Grid<OrderModel>()
        .Name("GridJava")
        .ToolBar(toolBar => toolBar.Template(
            @<text>
                Orders from :
                @(Html.Telerik().DatePicker().Name("StartDate"))
                <a class="t-button" id="filter-btn">filter</a>
            </text>))
        .Columns(columns =>
            {
                columns.Bound(o => o.ID);
                columns.Bound(o => o.CustomerName);
                columns.Bound(o => o.EmployeeName);
                columns.Bound(o => o.CustomerID);
                columns.Bound(o => o.OrderDate).Format("{0:d}");
            })
            .DataBinding(dataBinding => dataBinding.Ajax().Select("Select", "Home"))
            .ClientEvents(clientEvents => clientEvents.OnDataBinding("dataBinding"))
            .Pageable()
            .Render();
}

<script type="text/javascript">
    function dataBinding(args) {
        var startDate = $("#StartDate").data("tDatePicker").value();
        args.data = $.extend(args.data, {
            startDate: $.telerik.formatString("{0:d}", startDate)
        });
    }

    function attachFilter() {
        $("#filter-btn").click(function () {
            $("#GridJava").data("tGrid").rebind();
        });
    }

    </script>
@(
      Html.Telerik().ScriptRegistrar()
          .OnDocumentReady("attachFilter();")
)