Questions on Kendo UI for jQuery Forum

3 questions

1 answer

27 views

Trying to create a multi filter column using the ItemTemplate and from the Enum Data, But ItemTemplate function is not being called

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>

Action Method in MVC controller

Public ActionResult GetEmpTypes()
{
 List<EmpType> emptypes = new List<EmpType>();
emptypes.Add(EmpType.Sales)
emptypes.Add(EmpType.Report)
return Json(emptypes,JsonRequestBehavior.AllowGet);
}

ComboBox

Filter

Grid

MultiSelect

answered on 13 Mar 2024

1 answer

520 views

Kendo Grid Multiselect filter, selected values are not displayed if more than 1

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>
<html>
<head>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-ocean-blue.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>
<div id="grid"></div>
<script>
var data = [
{ id: 1, name: "Fred", key: 1, value: "Green" },
{ id: 2, name: "Jed", key: 11, value: "Jorgensen" },
{ id: 3, name: "Red", key: 2, value: "Blah" },
{ id: 4, name: "Ted", key: 23, value: "Bleh" },
{ id: 5, name: "Ed", key: 3, value: "Toast" },
{ id: 6, name: "Zed", key: 4, value: "Smith" },
{ id: 7, name: "Ed", key: 41, value: "Johnson" }
];

$(function() {
var names = _.sortBy(_.uniq(_.pluck(data, "name")), function(n) { return n; });

function createMultiSelect(element) {
element.kendoMultiSelect({
dataSource: names
});
}

var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
fields: {
id: { type: "number" },
name: { type: "string" },
key: { type: "number" },
value: { type: "string" }
}
}
}
});

var grid = $("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
filterable: true,
columns: [
{field: "id", title: "Id"},
{
field: "name",
title: "Name",
filterable: {
ui : createMultiSelect,
extra: false
}
},
{field: "key", title: "Key"},
{ field: "value", title: "Value"}
]
});
});
</script></body>
</html>

Filter

Grid

MultiSelect

answered on 16 Feb 2023

1 answer

320 views

KendoUi Font icons are not loading

Actually we have kendoUi in angularjs project. which ic giving error in developer console like server not responding 404 error for webcomponentsicon.ttf and webcomponentsicon.woff. because of this icons are not loading. can anyone please help me to clear this issue