This question is locked. New answers and comments are not allowed.
Cookie Monster
Top achievements
Rank 1
Cookie Monster
asked on 11 Mar 2010, 03:02 AM
Hello,
Could you please advise how can I limit filtering to be just one at a time ? (similar to single-column sorting)
Could you please advise how can I limit filtering to be just one at a time ? (similar to single-column sorting)
5 Answers, 1 is accepted
0
Hello Cookie Monster,
This is achievable with some JavaScript. Paste the following after your grid declaration (assuming the Name of the grid is set to "Grid"):
<% Html.Telerik().ScriptRegistrar().OnDocumentReady("overrideFilterClick();"); %>
<script type="text/javascript">
function overrideFilterClick() {
var grid = $('#Grid').data('tGrid');
var filterClick = grid.filterClick;
grid.filterClick = function() {
$.each(this.columns, function() {
this.filters = [];
});
filterClick.apply(this, arguments);
}
}
</script>
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 achievable with some JavaScript. Paste the following after your grid declaration (assuming the Name of the grid is set to "Grid"):
<% Html.Telerik().ScriptRegistrar().OnDocumentReady("overrideFilterClick();"); %>
<script type="text/javascript">
function overrideFilterClick() {
var grid = $('#Grid').data('tGrid');
var filterClick = grid.filterClick;
grid.filterClick = function() {
$.each(this.columns, function() {
this.filters = [];
});
filterClick.apply(this, arguments);
}
}
</script>
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
Cookie Monster
Top achievements
Rank 1
answered on 12 Mar 2010, 12:53 AM
Thanks, Atanas .
That worked perfectly fine.
I have couple more questions.
1) Is it possible to change default selected filtering option in the filtering dialog ?
For example, for 'string' type the default selected in the first one 'Is equal to'. Can I change it somehow to be 'Contains' for 'strings' ?
2) Is it possible somehow to use construction like this:
columns.Bound(u => u.Id).ClientTemplate(Html.ActionLink("login", "LoginAs", new { u.Id, u.FirstName, u.LastName, u.Email }, new { @class = "arrow-left" }))
Cause ActionLink outputs client 'string' itself, I just have troubles accessing 'User' object whithin that method...
That worked perfectly fine.
I have couple more questions.
1) Is it possible to change default selected filtering option in the filtering dialog ?
For example, for 'string' type the default selected in the first one 'Is equal to'. Can I change it somehow to be 'Contains' for 'strings' ?
2) Is it possible somehow to use construction like this:
columns.Bound(u => u.Id).ClientTemplate(Html.ActionLink("login", "LoginAs", new { u.Id, u.FirstName, u.LastName, u.Email }, new { @class = "arrow-left" }))
Cause ActionLink outputs client 'string' itself, I just have troubles accessing 'User' object whithin that method...
0
Hello Cookie Monster,
1) Not without modifying the source code (telerik.grid.js if you are interested - change the order in the localization object)
2) You can check the client template section in the columns help topic. You can also check the client-side templates demo. In a word you can embed client-side expressions <#= #> in the string which specifies the client-side template. Those will be evaluated on the client-side. This however is currently not supported:
columns.Bound(c => c.CustomerID).ClientTemplate(Html.ActionLink("Home", "Index", new {id= "<#= ContactName#>"}).ToString());
Fortunately to add support for this is very easy:
If you apply those changes you would be able to do:
columns.Bound(u => u.Id).ClientTemplate(Html.ActionLink("login", "LoginAs", new { id = "<#= Id #>", firstName = "<#= FirstName #>' , lastName = "<#= LastName #>", email = "<#= u.Email #>" }, new { @class = "arrow-left" }))
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.
1) Not without modifying the source code (telerik.grid.js if you are interested - change the order in the localization object)
2) You can check the client template section in the columns help topic. You can also check the client-side templates demo. In a word you can embed client-side expressions <#= #> in the string which specifies the client-side template. Those will be evaluated on the client-side. This however is currently not supported:
columns.Bound(c => c.CustomerID).ClientTemplate(Html.ActionLink("Home", "Index", new {id= "<#= ContactName#>"}).ToString());
Fortunately to add support for this is very easy:
- Open telerik.grid.js and find this code: column.template.replace
- Update the code to unescape(column.template).replace
If you apply those changes you would be able to do:
columns.Bound(u => u.Id).ClientTemplate(Html.ActionLink("login", "LoginAs", new { id = "<#= Id #>", firstName = "<#= FirstName #>' , lastName = "<#= LastName #>", email = "<#= u.Email #>" }, new { @class = "arrow-left" }))
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
telaron
Top achievements
Rank 1
answered on 23 Mar 2010, 08:44 AM
Hi,
I used the solution below for single filtering on "asynchronous" binding. Howerver, the filtering works fine but there were styling issues - All the filterable columns icons changed/highlighed to active colour when I click "filter" - it doesn't indicate which column is filtering
Html.Telerik().Grid(Model)
.Name("UserGrid")
.Columns(columns => {...})
.DataBinding(binding => binding.Ajax().Select(...))
.Filterable()
Html.Telerik().ScriptRegistrar().OnDocumentReady("overrideFilterClick();");
<script type="text/javascript">
function overrideFilterClick() {
var grid = $('#Grid').data('tGrid');
var filterClick = grid.filterClick;
grid.filterClick = function() {
$.each(this.columns, function() {
this.filters = [];
});
filterClick.apply(this, arguments);
}
}
Can you please advise on how to resolve this issue
Thank you
I used the solution below for single filtering on "asynchronous" binding. Howerver, the filtering works fine but there were styling issues - All the filterable columns icons changed/highlighed to active colour when I click "filter" - it doesn't indicate which column is filtering
Html.Telerik().Grid(Model)
.Name("UserGrid")
.Columns(columns => {...})
.DataBinding(binding => binding.Ajax().Select(...))
.Filterable()
Html.Telerik().ScriptRegistrar().OnDocumentReady("overrideFilterClick();");
<script type="text/javascript">
function overrideFilterClick() {
var grid = $('#Grid').data('tGrid');
var filterClick = grid.filterClick;
grid.filterClick = function() {
$.each(this.columns, function() {
this.filters = [];
});
filterClick.apply(this, arguments);
}
}
Can you please advise on how to resolve this issue
Thank you
0
Chris
Top achievements
Rank 1
answered on 24 Feb 2011, 11:17 PM
@telaron: There is a bug in the posted code.
If you examine the Telerik grid source, it calls the jQuery toggleClass method with two parameters 't-active-filter' and !!column.filters.
In the posted code, you need to set the column's filters object to a falsy value (I recommend undefined).
Also, you need to clear the inputs on all the *other* filters you may or may not have.
For example:
var filterClickOverride = function (fn) {
return function () {
$.each(this.columns, function () {
this.filters = undefined;
});
$(this.element)
.find('.t-filter-options')
.not($(arguments[0].currentTarget).closest('.t-filter-options'))
.find('input[type="text"], select')
.val('');
fn.apply(this, arguments);
};
};
var setSingleFilterMode = function (elementIdSelector) {
var grid = $(elementIdSelector).data('tGrid');
grid.filterClick = filterClickOverride(grid.filterClick);
};
If you examine the Telerik grid source, it calls the jQuery toggleClass method with two parameters 't-active-filter' and !!column.filters.
In the posted code, you need to set the column's filters object to a falsy value (I recommend undefined).
Also, you need to clear the inputs on all the *other* filters you may or may not have.
For example:
var filterClickOverride = function (fn) {
return function () {
$.each(this.columns, function () {
this.filters = undefined;
});
$(this.element)
.find('.t-filter-options')
.not($(arguments[0].currentTarget).closest('.t-filter-options'))
.find('input[type="text"], select')
.val('');
fn.apply(this, arguments);
};
};
var setSingleFilterMode = function (elementIdSelector) {
var grid = $(elementIdSelector).data('tGrid');
grid.filterClick = filterClickOverride(grid.filterClick);
};