When object in datasource somethimes is empty in kendo grid

1 Answer 930 Views

Grid

Ola asked on 26 Aug 2021, 12:08 PM | edited on 26 Aug 2021, 01:23 PM

I have a object that looks like this:

"employees":[
  {"lastName":"Doe"},
  {"firstName":"Anna" },
  {"firstName":"Peter", "lastName":"Jones"}
]

As you can see sometimes one of the properties is missing, sometimes lastname may be missing and other times firstname is missing.

The problem is when I use kendo grid (Jquery UI) because defining the columns I set something similar

$("#grid").kendoGrid({
  columns: [{
    field: "firstName",
    title: "Firstname",
    template: "Firstname: #:firstName#"
  },{
    field: "lastName",
    title: "Lastname" 
    template: "Lastname: #:lastName#"
  }

Because sometime the firsname is NULL and the same with lastName. The problem comes in the template. So how can I handle this?
I am not able to edit the datasource because it comes from a external api.

Here is an exampleof the replicated issue: https://dojo.telerik.com/uPUdiYOC

Code:

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

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [ {
    field: "firstName",
    template: "<strong>#: firstName # </strong>"
  }],
  dataSource: [   {"lastName":"Doe"},
  {"firstName":"Anna" },
  {"firstName":"Peter", "lastName":"Jones"} ]
});
</script>
</body>
</html>

1 Answer, 1 is accepted

answered on 30 Aug 2021, 08:47 PM

Hi Ola,

The Kendo UI template for the Kendo UI Grid can be configured to set a value if the firstName or lastName fields are null. In the case regarding the given Kendo UI Dojo, here is one way the column.template can be modified:

      $("#grid").kendoGrid({
        columns: [ 
          {
            field: "firstName",
            template: "<strong>#: data.firstName != null ? data.firstName : ' ' #</strong>"
          },{
            field: "lastName",
            template: "<strong>#: data.lastName != null ? data.lastName : ' ' #</strong>"
          }
        ],
        //...
      });

Please take a look at this Progress Kendo UI Dojo which has the templates included in the updated Grid and let me know if you have any questions.

Regards,
Patrick
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.