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
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
0
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.
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
The
using these generic tool functions :
This can probably be achieved using DatePicker...
- Frederic
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
Hello Jose,
Rosen
the Telerik team
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 :
Thx.
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();")
)