This is a migrated thread and some comments may be shown as answers.

Adding datepicker date range to Grid Toolbar

6 Answers 544 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Christopher Ronak
Top achievements
Rank 1
Christopher Ronak asked on 03 May 2010, 08:59 PM
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

6 Answers, 1 is accepted

Sort by
0
Atanas Korchev
Telerik team
answered on 04 May 2010, 07:57 AM
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.
0
Jose
Top achievements
Rank 2
answered on 21 Mar 2011, 07:50 PM
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?  
0
frederic rybkowski
Top achievements
Rank 1
answered on 22 Mar 2011, 09:23 AM
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
0
Rosen
Telerik team
answered on 22 Mar 2011, 10:59 AM
Hello Jose,

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

All the best,
Rosen
the Telerik team
0
Sujono
Top achievements
Rank 1
answered on 10 Apr 2013, 11:56 AM
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.
0
Sujono
Top achievements
Rank 1
answered on 15 Apr 2013, 07:14 AM
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();")
)
Tags
Grid
Asked by
Christopher Ronak
Top achievements
Rank 1
Answers by
Atanas Korchev
Telerik team
Jose
Top achievements
Rank 2
frederic rybkowski
Top achievements
Rank 1
Rosen
Telerik team
Sujono
Top achievements
Rank 1
Share this question
or