I am trying to sort alphabetically string values inside the multi filter combobox in Kendo Grid to filter. Now it shows randomly there is no any order in mvc. Here is the code
columns.Bound(c => c.EmpName).Title("Employee Name") .Filterable(filterable => filterable .Multi(true)
I am trying to create a multifilter from enum data type column using the ItemTemplate. But ItemTemplate Javascript function is not being called and data is not being shown in combobox. Please can you give me a help. Here is the code
Enum Records
public enum EmpTypes { [Display(Name = "Service")] Service = 0, [Display(Name = "Sales")] Sales = 1, [Display(Name = "Purchase")] Purchase = 2, [Display(Name = "Office")] Office = 3 }
Kendo Grid
columns.Bound(c => c.EmpTypes).Title("Type")
.Filterable(filterable => filterable
.Multi(true)
.UI(“”).DataSource(s=>s.Read(r=>r.Action(“GetEmpTypes”,”Report”)))
.ItemTemplate(“typetemplate”));
<script>
function typetemplate(e)
{
alert('Test');
}
</script>
Public ActionResult GetEmpTypes()
{
List<EmpType> emptypes = new List<EmpType>();
emptypes.Add(EmpType.Sales)
emptypes.Add(EmpType.Report)
return Json(emptypes,JsonRequestBehavior.AllowGet);
}
Hello community, how are you?
I need to replicate a filter like the one in this image. This is inside a kendoGrid filter, but I can't replicate something similar with MultiSelect and CheckboxGroup.
Supposedly this function is what makes this filter look like that:
function categoryDropdownEditor(container, options) {
$('<input required data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
dataSource: fk_categoriesDatasource,
dataTextField: "category",
dataValueField: "id",
filter: "contains",
minLength: 1
});
}
My kendoGrid is configured like this:
$("#grid").kendoGrid({
dataSource: dataSourceGrid,
autoBind: true,
scrollable: true,
sortable: true,
filterable: true,
groupable: true,
resizable: false,
loaderType: "skeleton",
pageable: {
refresh: true,
numeric: false,
input: true,
previousNext: true,
alwaysVisible: true
},
noRecords: {
template: function (e) {
return "No hay datos disponibles.";
}
},
columns: [
{
title: "Categoría",
field: "category_id",
dataTextField: "category",
dataValueField: "id",
editor: categoryDropdownEditor,
filterable: {multi: true},
dataSource: {
transport: {
read: {
url: apibaseurl + endpoint + "/categories",
type: "GET",
dataType: "json",
beforeSend: addToken,
},
},
schema: {
data: "data",
total: "total",
model: {
id: "id",
fields: {
category: {type: 'string'},
}
}
},
},
},
{
command: [
"edit",
{
name: " ",
iconClass: "k-icon k-i-more-vertical",
}
],
title: " ",
width: 210
}],
editable: "popup",
});
I apologize if it is not understood or if I forgot to put something, it is my first post here.
Thank you very much for your attention.
Jonathan.
Hi, I recently created a grid with a multiselect filter and noticed that the selected values are not showing if the user selects more than one item and then filters. I could reproduce the behaviour in a short dojo script which comes from the telerik examples.
Is there any reason for this behaviour or did I forget something that makes the filter control fail? If this is a bug, is there a workaround?
In the example, the field that contains the filter is "Name" (2nd column).
<!DOCTYPE html>I have a grid that I'm trying to enable inline editing. Whenever I attempt to update a row error is thrown in the console. I've tried moving the editor into a separate editor with no luck. I removed the configuration column so there was just the Room displayName and the same thing happens so it is not an issue with the Multi-Select.
I am currently using Kendo UI v2021.1.330
In Chrome the error happens when the edit control loses focus and is
kendo.all.js:6566 Uncaught TypeError: Cannot read properties of undefined (reading 'data')
at init.setup (kendo.all.js:6566:106)
at init.create (kendo.all.js:6540:34)
at Object.<anonymous> (kendo.all.js:7640:42)
at Function.Deferred (jquery.min.js:2:29289)
at init._promise (kendo.all.js:7637:26)
at init._send (kendo.all.js:7663:44)
at init.sync (kendo.all.js:7395:60)
at init._change (kendo.all.js:8041:26)
at init.d (jquery.min.js:2:3873)
at init.trigger (kendo.all.js:164:37)
In Firefox the error happens when clicking update and is
function generateTemplate(configs) :string{
var arryDisplayNames = configs.map(function (a) { return a.displayName; });
var result = arryDisplayNames.join(", ");
return result;
}
let configurationDataSource = new kendo.data.DataSource({
serverFiltering: true,
transport: {
read: {
url: '/api/config',
data: function (opt) {
return {
roomId: 0
}
}
},
},
schema: {
model: {
id: "id",
fields: {
//id: { type: "number" },
displayName: { type: "string"}
}
}
}
})
let gridDataSource: kendo.data.DataSource = new kendo.data.DataSource({
autoSync: true,
transport: {
read: {
url: '/api/rooms/',
type: 'get',
dataType: 'json',
data: {
buildingid: roomBuildingId
}
},
update: {
url: '/api/rooms/',
type: 'post',
dataType: 'json'
}
},
schema: {
model: {
id: "RoomId",
fields: {
roomId: { type: 'number' },
buildingId: { type: 'number' },
displayName: { type: 'string' },
restricted: { type: 'boolean' },
isActive: { type: 'boolean' },
configurations: { type: 'object' },
owners: { type: 'object' },
}
}
}
});
let gridColumns: kendo.ui.GridColumn[] = [
{ field: "displayName", title: "Room" },
{
field: "configurations",
title: "Configurations",
editor: function (container,options) {
var input = $("<input name='Configurations' id='Configurations' >");
// append to the editor container
input.appendTo(container);
// initialize a multiselect
input.kendoMultiSelect({
dataTextField: "displayName",
dataValueField: "id",
dataSource: configurationDataSource // bind it to the brands array
}).appendTo(container);
},
template: "#= generateTemplate(configurations) #"
},
{ command: ["edit"], title: " "}
];
roomGrid = $('#rooms').kendoGrid({
dataSource: gridDataSource,
sortable: true,
groupable: true,
pageable: false,
editable: "inline",
selectable: "row",
columns: gridColumns
}).data('kendoGrid') as kendo.ui.Grid
Hope I picked the right forum section..
we maintain and program a rather large app using kendo ui and jquery based around c# code..
For a certain task I need to unselect some rows from the selection the user has done previously. But a google search only delivers results on "select grid row programmatically"
The grid in question allows multi-select of entire rows. How can I unselect certain rows based on the content of certain data-fields within said rows?
Thanks in advance