Search code examples
kendo-uikendo-gridkendo-asp.net-mvc

Kendo Grid Row With Drop Downs

I am new to Kendo grid, using Kendo for JQuery as part of a C# MVC project. Currently, I have a grid that allows users to edit it by entering numbers/text.

A new requirement is to add a Yes/No or True/False dropdown row.

How can this be done?

enter image description here

I would like each field to be a dropdown showing "Yes" or "No" or maybe a checkbox for true/false would be ok?

Existing code:

$("#MyGrid").kendoGrid({
    dataSource: myDataSource,
    columns: columns,
    editable: ('@hasEditRights' === 'True') ? { mode: "incell", confirmation: false } : false,
    autoBind: false,
    noRecords: true,
    columnMenu: false,
    groupable: true,
    navigatable: true,
    reorderable: true,
    resizable: true,
    scrollable: true,
    sortable: {
        initialDirection: "asc",
        mode: "multiple"
    },
    selectable: "multiple, cell",
    allowCopy: {
        delimeter: "\t"
    },
    toolbar: kendo.template($("#MyToolBar").html()),
    search: {
        fields: ["Name"]
    }
    ...

To add to my problems, the columns and rows are built dynamically from what is provided by the database fetch. I am interested in adding a row across all columns with Yes/No or True/False.

columns: columns

So I would not want to specify the column or row names in the frontend code, as if they add a new entry into the database it would also need to be added into the front end.

I think the answer might be to use a column template? However, that would mean specifying each field in the database table in the template. So if the backend is updated, the frontend will need to be updated.

Any help appreciated!

Solution

  • You will need to specify the column type in the data returned by back-end to be able to know which columns are those with options in front-end. Then you can iterate through columns and adjust each type if needed. If you want to use an input inside a row cell, use column.editor setting.

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.2.1/default/default-ocean-blue.css"/>

    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
  let columnsFromBackend = [{
    field: 'name',
    title: 'Name'
  },{
    title: 'Send Notification',
    field: 'notify',
    backendType: 'yesno',
  }, {
    title: 'Active',
    field: 'active',
    backendType: 'checkbox',
  }];
  
  const dataFromBackend = [
    { name: "Jane Doe", active: true, notify: 'Y' }, 
    { name: "John Doe", active: false, notify: 'N' }
  ];
  
  columnsFromBackend.forEach(column => {
    if (column.backendType) {
      if (column.backendType === 'yesno') {
        column.template = "#= data['" + column.field + "'] === 'Y' ? 'Yes' : 'No' #";
        column.editor = function(container, options) {
          const $input = $('<input data-field="' + column.field + '">').appendTo(container);
          
          $input.kendoDropDownList({
            value: options.model[column.field],
            dataSource: [{ text: 'Yes', value: 'Y' }, { text: 'No', value: 'N' }],
            dataTextField: 'text',
            dataValueField: 'value',
            change: function(model, event) {
              const widget = event.sender;
              const fieldName = widget.element.data('field');
              const value = widget.value();
              model.set(fieldName, value);
            }.bind(null, options.model)
          });
        };
      }
      else if (column.backendType === 'checkbox') {
        column.template = "#= data['" + column.field + "'] ? '✅' : '⛔️' #";
      }
    }
  });
  
$("#grid").kendoGrid({
  columns: columnsFromBackend,
  editable: true,
  dataSource: dataFromBackend
});
</script>
</body>
</html>

    Dojo