Null values showing on grid - by design?

[Lee]

I'm using JSON as my data transport type. When I pass in values that are null, the word "null" appears in the grid. Is this by design? Seems like it should show nothing.

[Dimo]

Hi Lee,

The Grid internally uses a templating engine, which at some stage performs string concatenations. When you concatenate null and some string, the null value is transformed into a "null" string.

You can avoid seeing the null values by modifying the data that is serialized to the client, or iterating through all cells and removing the null string manually.

All the best,
Dimo
the Telerik team

[Lee]

Thanks for the prompt reply.

Seems to be undesired behavior to me but, fair enough.

[Brian Vallelunga]

I think there should be an option on the grid to format nulls as empty strings by default. This is a really common scenario that should just work.

[Jakob Zetterström]

IMHO, through 2012.1.423, this is by far the ugliest and most pain-inducing bug in the whole Kendo framework. Just my 2c. :-)

[Darrel]

I am using the following solution.

Create the following javascript function:

function isnull(a, b) {

    b = b || '';
     return a || b;

}

Create a row template using the function in the field place holders.

<script id="rowTemplate" type="text/x-kendo-tmpl">

<tr>

    <td>

        #= isnull(Tel, "") #

    <td>

        #= isnull(Fax, "") #

    </td>

</tr>

</script>

[Jakob Zetterström]

@Darrel: Sure, I use a similar solution with column templates. The real trouble for me starts when you do inline grid cell editing: Although the model value is null, cell editors get loaded with a "null" string value instead, which is a pain to separate from 'real' user input, especially in my scenarios where editor values can be further processed on the client side before syncing to the server. If anyone has a general solution to that (or this bug finally gets fixed, saving me lots of extra coding), I'd be most obliged. Thanks for your suggestion anyway.

[Mac]

I agree that showing 'null' instead of an empty string is a terrible way to go. Can we get an option to show empty strings instead of nulls?

[Chris]

Still a 'null' string disaster NOW after Form Post and back (while ModelState.IsValid = false), 
dataItem's column value becomes 'null' string (next Form Post - [Required] passed unexpectedly).

Is there have a global option (like kendo.culture) to turn null to '' default/automatically ?
  
  <script type="text/javascript">
 
    kendo.culture("xx-XX");

  </script>

Best regards

Chris

 

 

[Stefan]

Hello, Chris,

Since R1 2018, the Grid is treating null values as empty strings and not showing it in the Grid.

Also, if the value null is typed inside a field, it will be converted from the string null to the value null.

It was introduced after fixing this case:

https://github.com/telerik/kendo-ui-core/issues/3668

Please advise if the same result occurs after using the latest version.

If the issue still occurs, please send us an example reproducing it and we will gladly investigate further.

Regards,
Stefan
Progress Telerik

[Michael]

Hi,

I am currently using the grid with batch editing and using Telerik.UI.for.AspNet.Core (2018.2.620).  Within that grid I have a column called comments that is still showing "null" when it should show nothing (empty string) when rendering.  Should this have been fixed with the latest version of the software?  Screenshots attached.

 

[Michael]

Hi, I am currently using Telerik.UI.for.AspNet.Core (2018.2.620) and in the grid I am using for batch editing shows "null" when it should be an empty string.  Should this have been corrected in this version? (sorry if this is a double post, but the site crashed on me on my first attempt)

[Stefan]

Hello, Michael,

If the 2018.2.620 version is used then the null values should not be displayed.

Could you please ensure that the scripts are updated as well and there are no cached files.

If the issue still occurs, please provide an example reproducing it and I will gladly investigate.

Additionally, if providing an example is not possible at the time, a workaround would be to use a ClientTemplate and return an empty string if the value is null:

https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-display-checkboxes-in-ajax-bound-grids

Regards,
Stefan
Progress Telerik

[Michael]

Hi Stefan,

 

I copied the js and styles folders from Program Files (x86)\Progress\Telerik UI for ASP.NET Core R2 2018 to the \wwwroot\lib\kendo-ui\ folder on my project, cleaned my project, recompiled and ran the project and still get the same error. I then opened it in the browser being used by Visual Studio and also Chrome to verify it wasn't a browser issue, but the null still shows up.

Below is the code for the grid - Please advise.

<div id="divDataGrid">
        @(Html.Kendo().Grid<FDMDCT.Models.ScadaErrorModel>
        ()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ID).Hidden(false);
            columns.Bound(c => c.ScadaDailyID).Hidden(false);
            columns.Bound(c => c.Bwp_Userid).Hidden(false);
            columns.Bound(c => c.Bwp_region).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Region").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
            columns.Bound(c => c.Bwp_Area).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Area").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;font-weight:700;" });
            columns.Bound(c => c.Fdm_Scada_Link).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Scada Link").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
            columns.Bound(c => c.Assetnum).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Asset").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
            columns.Bound(c => c.Asset_Description).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Asset Description").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
            columns.Bound(c => c.Reading_date).Format("{0:MM/dd/yyyy}").Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Reading Date").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
            columns.Bound(c => c.Error_type).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Error Type").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
            columns.Bound(c => c.Comments).Width(300).ClientTemplate("#=Comments#<span data-valmsg-for='Comments'></span>");
            //change the column below to a checkbox
            //columns.Bound(c => c.ErrorCorrected).ClientTemplate("<input type='checkbox' disabled='true' value='#= errorCorrected #' " + " # if (errorCorrected) { #" + "checked='checked'" + "# } #" + "/>" );
            columns.Bound(c => c.Operating_hrs).Title("Operating Hours").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Operating_hrs#<span data-valmsg-for='Operating_hrs'></span>");
            columns.Bound(c => c.Ttl_downtime_hrs).Title("Downtime Hours").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Ttl_downtime_hrs#<span data-valmsg-for='Ttl_downtime_hrs'></span>");
            columns.Bound(c => c.Oil_to_comp_cyl).Title("Compressor Cylinder Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_to_comp_cyl#<span data-valmsg-for='Oil_to_comp_cyl'></span>");
            columns.Bound(c => c.Oil_to_cc_hand).Title("Crankcase Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_to_cc_hand#<span data-valmsg-for='Oil_to_cc_hand'></span>");
            columns.Bound(c => c.Oil_new_cc_ren).Title("Crankcase Auto Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_new_cc_ren#<span data-valmsg-for='Oil_new_cc_ren'></span>");
            columns.Bound(c => c.Oil_to_pwr_cyl).Title("Power Cylinder Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_to_pwr_cyl#<span data-valmsg-for='Oil_to_pwr_cyl'></span>");
            columns.Bound(c => c.Electricity_used).Title("Electricity Used (Kwh)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Electricity_used#<span data-valmsg-for='Electricity_used'></span>");
            columns.Bound(c => c.Fuel_consumed).Title("Fuel Consumed (mcf)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Fuel_consumed#<span data-valmsg-for='Fuel_consumed'></span>");
            columns.Bound(c => c.Hrspwr_hrs).Title("Horsepower Hours").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Hrspwr_hrs#<span data-valmsg-for='Hrspwr_hrs'></span>");
            columns.Bound(c => c.Avg_unit_rpm).Title("RPM - Average Engine Speed").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Avg_unit_rpm#<span data-valmsg-for='Avg_unit_rpm'></span>");
            columns.Bound(c => c.Engine_starts_attempts).Title("Start Attempts").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Engine_starts_attempts#<span data-valmsg-for='Engine_starts_attempts'></span>");
            columns.Bound(c => c.Engine_starts_success).Title("Start Successes").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Engine_starts_success#<span data-valmsg-for='Engine_starts_success'></span>");
            columns.Bound(c => c.Engine_starts_failed).Title("Start Failures").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Engine_starts_failed#<span data-valmsg-for='Engine_starts_failed'></span>");
            columns.Bound(c => c.Startup_duration).Title("Startup Duration (min)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Startup_duration#<span data-valmsg-for='Startup_duration'></span>");
            columns.Bound(c => c.Thruput_mmcf).Title("Throughput / Capacity (mmscf)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Thruput_mmcf#<span data-valmsg-for='Thruput_mmcf'></span>");
        })
        .ToolBar(toolbar =>
        {
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()
        .Filterable()
        .Pageable()
        .AutoBind(true)
        .Scrollable(scrollable => scrollable.Height(700))
        .Reorderable(reorderable => reorderable.Columns(true))
        .Resizable(resizable => resizable.Columns(true))
        .ColumnResizeHandleWidth(20)
        .ColumnMenu()
        .Navigatable()
        .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events
            .Error("error_handler")
            .RequestEnd("requestEnd")
            .Sync("validateMe")
        )
        .Model(model =>
        {
            //set the fields to non-editable here
            model.Id(p => p.ID);
            model.Field(p => p.ID).Editable(false);
            model.Field(p => p.Fdm_Scada_Link).Editable(false);
            model.Field(p => p.Bwp_Userid).Editable(false);
            model.Field(p => p.ScadaDailyID).Editable(false);
            model.Field(p => p.Bwp_region).Editable(false);
            model.Field(p => p.Bwp_Area).Editable(false);
            model.Field(p => p.Assetnum).Editable(false);
            model.Field(p => p.Asset_Description).Editable(false);
            model.Field(p => p.Reading_date).Editable(false);
            model.Field(p => p.Error_type).Editable(false);
        })
        .Read(read => read.Action("Fill_Grid", "ScadaErrors").Data("sendAntiForgery")
        .Data("getSearchParameters"))
        .Update(update => update.Action("Update_Grid", "ScadaErrors").Data("sendAntiForgery"))
        )
        )

[Michael]

Hi Stefan

I copied over the files from the following location Program Files (x86)\Progress\Telerik UI for ASP.NET Core R2 2018 to this location in my project \wwwroot\lib\kendo-ui, cleaned my project, recompiled, and debugged, but I still show the same error.  I even opened up the site in Chrome in case IE was caching something and the null still showed up.  Below is the code for the grid.  Let me know if you need anything else.

<div id="divDataGrid">
        @(Html.Kendo().Grid<FDMDCT.Models.ScadaErrorModel>
        ()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(c => c.ID).Hidden(false);
            columns.Bound(c => c.ScadaDailyID).Hidden(false);
            columns.Bound(c => c.Bwp_Userid).Hidden(false);
            columns.Bound(c => c.Bwp_region).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Region").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
            columns.Bound(c => c.Bwp_Area).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Area").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;font-weight:700;" });
            columns.Bound(c => c.Fdm_Scada_Link).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Scada Link").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
            columns.Bound(c => c.Assetnum).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Asset").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
            columns.Bound(c => c.Asset_Description).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Asset Description").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal;" });
            columns.Bound(c => c.Reading_date).Format("{0:MM/dd/yyyy}").Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Reading Date").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
            columns.Bound(c => c.Error_type).Filterable(ftb => ftb.Multi(true).CheckAll(true)).Title("Error Type").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
            columns.Bound(c => c.Comments).Width(300).ClientTemplate("#=Comments#<span data-valmsg-for='Comments'></span>");
            //change the column below to a checkbox
            //columns.Bound(c => c.ErrorCorrected).ClientTemplate("<input type='checkbox' disabled='true' value='#= errorCorrected #' " + " # if (errorCorrected) { #" + "checked='checked'" + "# } #" + "/>" );
            columns.Bound(c => c.Operating_hrs).Title("Operating Hours").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Operating_hrs#<span data-valmsg-for='Operating_hrs'></span>");
            columns.Bound(c => c.Ttl_downtime_hrs).Title("Downtime Hours").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Ttl_downtime_hrs#<span data-valmsg-for='Ttl_downtime_hrs'></span>");
            columns.Bound(c => c.Oil_to_comp_cyl).Title("Compressor Cylinder Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_to_comp_cyl#<span data-valmsg-for='Oil_to_comp_cyl'></span>");
            columns.Bound(c => c.Oil_to_cc_hand).Title("Crankcase Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_to_cc_hand#<span data-valmsg-for='Oil_to_cc_hand'></span>");
            columns.Bound(c => c.Oil_new_cc_ren).Title("Crankcase Auto Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_new_cc_ren#<span data-valmsg-for='Oil_new_cc_ren'></span>");
            columns.Bound(c => c.Oil_to_pwr_cyl).Title("Power Cylinder Oil Usage (gal)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Oil_to_pwr_cyl#<span data-valmsg-for='Oil_to_pwr_cyl'></span>");
            columns.Bound(c => c.Electricity_used).Title("Electricity Used (Kwh)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Electricity_used#<span data-valmsg-for='Electricity_used'></span>");
            columns.Bound(c => c.Fuel_consumed).Title("Fuel Consumed (mcf)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Fuel_consumed#<span data-valmsg-for='Fuel_consumed'></span>");
            columns.Bound(c => c.Hrspwr_hrs).Title("Horsepower Hours").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Hrspwr_hrs#<span data-valmsg-for='Hrspwr_hrs'></span>");
            columns.Bound(c => c.Avg_unit_rpm).Title("RPM - Average Engine Speed").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Avg_unit_rpm#<span data-valmsg-for='Avg_unit_rpm'></span>");
            columns.Bound(c => c.Engine_starts_attempts).Title("Start Attempts").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Engine_starts_attempts#<span data-valmsg-for='Engine_starts_attempts'></span>");
            columns.Bound(c => c.Engine_starts_success).Title("Start Successes").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Engine_starts_success#<span data-valmsg-for='Engine_starts_success'></span>");
            columns.Bound(c => c.Engine_starts_failed).Title("Start Failures").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Engine_starts_failed#<span data-valmsg-for='Engine_starts_failed'></span>");
            columns.Bound(c => c.Startup_duration).Title("Startup Duration (min)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Startup_duration#<span data-valmsg-for='Startup_duration'></span>");
            columns.Bound(c => c.Thruput_mmcf).Title("Throughput / Capacity (mmscf)").HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }).ClientTemplate("#=Thruput_mmcf#<span data-valmsg-for='Thruput_mmcf'></span>");
        })
        .ToolBar(toolbar =>
        {
            toolbar.Save();
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()
        .Filterable()
        .Pageable()
        .AutoBind(true)
        .Scrollable(scrollable => scrollable.Height(700))
        .Reorderable(reorderable => reorderable.Columns(true))
        .Resizable(resizable => resizable.Columns(true))
        .ColumnResizeHandleWidth(20)
        .ColumnMenu()
        .Navigatable()
        .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .PageSize(20)
        .ServerOperation(false)
        .Events(events => events
            .Error("error_handler")
            .RequestEnd("requestEnd")
            .Sync("validateMe")
        )
        .Model(model =>
        {
            //set the fields to non-editable here
            model.Id(p => p.ID);
            model.Field(p => p.ID).Editable(false);
            model.Field(p => p.Fdm_Scada_Link).Editable(false);
            model.Field(p => p.Bwp_Userid).Editable(false);
            model.Field(p => p.ScadaDailyID).Editable(false);
            model.Field(p => p.Bwp_region).Editable(false);
            model.Field(p => p.Bwp_Area).Editable(false);
            model.Field(p => p.Assetnum).Editable(false);
            model.Field(p => p.Asset_Description).Editable(false);
            model.Field(p => p.Reading_date).Editable(false);
            model.Field(p => p.Error_type).Editable(false);
        })
        .Read(read => read.Action("Fill_Grid", "ScadaErrors").Data("sendAntiForgery")
        .Data("getSearchParameters"))
        .Update(update => update.Action("Update_Grid", "ScadaErrors").Data("sendAntiForgery"))
        )
        )

[Michael]

Hi Stefan,

 

I figured it out using the ClientTemplate, although it would be nice if it just worked without using the template.  What do you think I could be doing wrong that it's not working with the latest version?  The code I used below is what I used in case anyone else runs into this issue.

"#if (Comments==null){# #=''# #} else {# #=Comments# #};#<span data-valmsg-for='Comments'></span>"

 

[Stefan]

Hello, Michael,

I can suggest checking the following article about updating with contains the required steps and some troubleshooting approaches:

https://docs.telerik.com/kendo-ui-mvc/introduction#upgrade-to-newer-versions

The article is for the MVC widgets but it is applicable for the Core widgets as well.

If this still does not resolves the issue, I hope that the workaround will be acceptable for now.

Regards,
Stefan
Progress Telerik