Telerik Forums
Kendo UI for jQuery Forum
0 answers
22 views

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)

Pol
Top achievements
Rank 1
Iron
 asked on 13 Mar 2024
1 answer
27 views
 

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);
}


 

Mihaela
Telerik team
 answered on 13 Mar 2024
1 answer
52 views

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: "&nbsp;",
                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.

Zornitsa
Telerik team
 answered on 16 Aug 2023
1 answer
520 views

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>
Martin
Telerik team
 answered on 16 Feb 2023
1 answer
90 views

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

Uncaught TypeError: o is undefined
    setup kendo.all.js:6566
    create kendo.all.js:6540
    _promise kendo.all.js:7640
    Deferred jQuery
    _promise kendo.all.js:7637
    _send kendo.all.js:7663
    sync kendo.all.js:7395
    saveRow kendo.all.js:66504
    _editUpdateClick kendo.all.js:66169
    jQuery 9
    on kendo.all.js:2882
    _attachEvents kendo.all.js:25930
    init kendo.all.js:25808
    refresh kendo.all.js:56507
    init kendo.all.js:56403
    _createInlineEditor kendo.all.js:66448
    editRow kendo.all.js:66141
    _editable kendo.all.js:65860
    jQuery 8
    on kendo.all.js:2882
    init kendo.all.js:26481
    init kendo.all.js:27173
    init kendo.all.js:28112
    _attachGroupable kendo.all.js:66942
    _groupable kendo.all.js:66927
    _continueInit kendo.all.js:64627
    init kendo.all.js:64618
    plugin/e.fn[d]/< kendo.all.js:2520
    jQuery 2
    d kendo.all.js:2519
    <anonymous> index_room.ts:286
    jQuery 8

 

 


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: "&nbsp;"}
    ];


    roomGrid = $('#rooms').kendoGrid({
        dataSource: gridDataSource,
        sortable: true,
        groupable: true,
        pageable: false,
        editable: "inline",
        selectable: "row",
        columns: gridColumns

    }).data('kendoGrid') as kendo.ui.Grid

Martin
Telerik team
 answered on 22 Feb 2022
1 answer
763 views

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

Patrick | Technical Support Engineer, Senior
Telerik team
 answered on 13 Aug 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?