Is it possible to have a filter menu with options such as Yes, No, Other
I have a grid with a column which could have only 3 values Yes, No or Other. The filter should show radio buttons with these values and two button Filter and Clear. Is this possible?
When I try with field type:"boolean", I get 'Yes' and 'No but how do I add the third radio button 'Other'.
Any help would be appreciated.
Thanks
Kendo has an example of how to do just that here:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
Here is an example of how your filter will probably be set up
filterable: {
//hide second filter option
extra: false,
operators: {
string: {
eq: "Is equal to"
}
}
},
filterMenuInit: function(e) {
//when the filter menu opens find the first dropdown and hide it
//as it has the Is equal to filter in it.
e.container.find(".k-dropdown").eq(0).hide();
}
Here is JSbin that shows how to use some of these features:
http://jsbin.com/qehugexo/2/edit
Update
While I could get radio buttons to show up in the filter window, it was a headache to rig it up and very hacky with the default Kendo stuff. I would suggest using the Kendo Dropdown as show in the demo or just manipulating the filter on the Data source of the Grid itself.
It can be done with code like this:
$(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: "Boston"}], Logic: "and"})
Here is an example of how you could use it.
filterMenuInit: function(e) {
//when filter menu opens toss it cause its lame!
e.container.html("
<input name='radio' type='radio' checked='checked' value='Clear'>Clear</input>
<input name='radio' type='radio' value='London'>London</input>
<input name='radio' type='radio' value='Seattle'>Seattle</input>
");
$("input[type=radio]").click(function(){
if($(this).val() != "Clear") {
$(".k-grid").data("kendoGrid").dataSource.filter({filters: [{field: "City", operator: "eq", value: $(this).val()}], Logic: "and"})
}else {
$(".k-grid").data("kendoGrid").dataSource.filter({})
}
});
}
And an updated JSbin: http://jsbin.com/qehugexo/3/edit
Related
Inside my kendo grid, some column is filtered with a kendo multiselect control. The control has a placeholder.
columns.Bound(p => p.ModuleName).Title("Module").Filterable(filterable => filterable.UI("moduleFilter"));
function moduleFilter(element) {
element.kendoMultiSelect({
placeholder: "Select Module",
dataSource: {
transport: {
read: {
url: "#Url.Page("Module", "ReadAll")",
data: function() {
return kendo.antiForgeryTokens();
}
}
}
}
});
}
In this filter, I have removed some default filter elements for better appearance.
function filterMenuInit(e) {
if(e.field == 'ModuleName') {
e.container.find('[title="Operator"]').remove(); //gives focus to multiselect
e.container.find('.k-filter-help-text').remove();
}
}
The problem is by doing this, the multiselect gets the focus, losing the initial placeholder. Is it possible to make the multiselect lose focus or trick the filter to give the focus to another control? I tried various ideas without success.
I have a panel bar based on a remote data source which all works fine.
One of the attributes in the feed combined with a form field on the screen will determine if either the user can click on a child item in the panelbar and navigate through to the url, or gets a warning dialogue and navigation fails.
I am using the following technique to capture the given json attribute in the feed and associate it with each item in the panel:
$("#panelbar").kendoPanelBar({
dataSource: haRepList,
template: "<span class=''repType'' data-url=''#= item.type #''>#= item.name #</span>",
select: function(panel){
var classId = $(panel.item).find(".repType").data(''url'');
if (classId !== ''undefined'') {
alert(classId);
}
},
dataTextField: ["name", "name"]
});
So when I click on the given item, I get an alert telling me what the type attribute is. I now need to tell the panel "Do not allow the click through url to work" based upon both this value, and another field on the screen.
You could try preventDefault, stopPropagation or simply return false:
$("#panelbar").kendoPanelBar({
dataSource: haRepList,
template: "<span class=''repType'' data-url=''#= item.type #''>#= item.name #</span>",
select: function(panel){
var classId = $(panel.item).find(".repType").data(''url'');
if (classId !== ''undefined'') {
panel.preventDefault();
}
},
dataTextField: ["name", "name"]
});
Here's a link to a working demo where the second panel is conditionally disabled. Hope this helps.
I'm using a kendo grid in the same way as the following demo: http://demos.telerik.com/kendo-ui/grid/filter-row
Is there anyway of adding a debounce time to the string filter inputs so the filter is applied "as the user types"
You can easily achieve this by adding the code in the column you want to filter while typing:
filterable: {
cell: {
operator: "contains",
template: function (args) {
args.element.css("width", "90%").addClass("k-textbox").keydown(function(e){
setTimeout(function(){
$(e.target).trigger("change");
});
});
}
}
}
I've made an example here:
http://dojo.telerik.com/ApukU
$("#ElementId").attr("disabled","disabled");
The Above code only works for the Date pickers which are declared in Html page.
But I want to Disable the kendo Date picker in the kendo Grid Header Filter area.
Here is a simple way of achieving what you want.
Disabled text input on grid filter
I have modified the date cell to have the following:
{
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}",
filterable: {
cell: {
template: function (element) {
element.element.kendoDatePicker({
});
element.element.attr('disabled', 'disabled');
}
}
}
}
You will notice that I have added a template to the cell which will override the default date picker and add my own date picker to the filter row.
Note if you want to do this via the menu you just need to do this at the first element item e.g. element.kendoDatePicker({})
Hope this is what you are after.
For more info on this take a look at this link:
kendo grid filter api
I am using a template for the edit popup. I am trying to force the grid to go into edit mode and show the edit template popup when a link within one of the columns is clicked.
I tried using a command but I am unable to data bind the hyperlink's text to a field declared in the model, in this case to 'CourseType'. Is data binding supported within command columns?
columns: [
{
command: [
{
id: "edit",
title: "School Item",
template: '#=CourseType#',
width: 120
}
]
}
]
If data binding is not supported within a command column, then how do I put the grid into edit mode when the templated field is clicked?
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
I'm not sure why do you want to define the cell as an HTML anchor but there is no problem on making it enter on popup edit mode when clicking on the anchor.
1) Add to your template a class that would allow us to find those cells. Something like:
columns: [
{
field: "CourseType",
title: "School Item",
template: '#=CourseType#'
}
]
where I have include class="ob-edit-popup" to the template.
2) add to your grid definition the option editable: "popup".
3) add the following JavaScript code after the initialization.
$(".ob-edit-popup", grid.tbody).on("click", function (e) {
var row = $(this).closest("tr");
grid.editRow(row);
})
Where grid is the result of:
var grid = $("#grid").kendoGrid({...}).data("kendoGrid");