CannotSerializeObjectNonSerializable Error

[Joel]

I get the following error constantly when attempting to use the TreeLIst.  I'm using the Google Chrome browser and hitting the F12 button to expose the errors.  At the very least, please wrap the error so it doesn't go uncaught.  Best case would be to throw a useful error message a developer could work around.

Logging.ts:203 AI: CannotSerializeObjectNonSerializable message:"Attempting to serialize an object which does not implement ISerializable" props:"{name:baseData}"

o.warnToConsole @ Logging.ts:203
kendo.all.js:120332 Uncaught TypeError: (e.name || e).toLowerCase is not a function
    at init._button (kendo.all.js:120332)
    at init._buildCommands (kendo.all.js:120327)
    at init._td (kendo.all.js:120245)
    at d (jquery.min.js:2)
    at init._tds (kendo.all.js:120175)
    at init._trs (kendo.all.js:120093)
    at init._render (kendo.all.js:119638)
    at init.refresh (kendo.all.js:118289)
    at init.d (jquery.min.js:2)
    at init.trigger (kendo.all.js:124)
dc.services.visualstudio.com/v2/track:1 Failed to load resource: the server responded with a status of 400 (Invalid instrumentation key)

 

 

My TreeList:

@using GsiPortal.Configuration
@{ Layout = null; }

@*Syntax Help here:  https://docs.telerik.com/kendo-ui/framework/templates/overview*@
<script id="icon-template" type="text/x-kendo-template">
    <div class='group-icon'
         style='background-image: url(@Url.Content("#: ImageUrl #"));'></div>
    <div class='group-name'>#: Name #</div>
</script>

@(Html.Kendo().TreeList<GsiPortal.Models.Group>()
              .Name("treelist")
              .Columns(columns =>
              {
                  columns.Add().Field(e => e.Name).TemplateId("icon-template");
                  columns.Add().Field(e => e.Description);
                  columns.Add().Field(p => p.PersonCount);
                  columns.Add().Command(c => { c.Custom().Text("Details").Name("detailButton").ClassName("detailButton").Click("toDetails"); }).Width(Glossary.ButtonWidth);
                  columns.Add().Command(c => { c.Custom().Text("Create").Name("createButton").ClassName("createButton").Click("toCreate"); }).Width(Glossary.ButtonWidth);

                  if (!Model.GetBoolValue(Glossary.Keys.Group.IsHideFilter))
                  {
                      columns.Add().Command(c => { c.Custom().Text("Filter").ClassName("filterButton").Click("toFilter"); }).Width(Glossary.ButtonWidth);
                  }
              })
              .DataSource(dataSource => dataSource
                  .ServerOperation(false)
                  .Read(read => read.Action("IndexJson", "Groups").Data("getData"))
                  .Model(m =>
                  {
                      m.Id(f => f.Id);
                      m.ParentId(f => f.ParentId);
                      m.Expanded(true);
                      m.Field(f => f.Name);
                  })
                  .Events(events => events.Error("onError"))
             ).Events(evt => evt.DataBound("treeListBound"))
)

<script>
    function treeListBound(e) {
        var treeList = e.sender;
        var items = treeList.items();

        for (i = 0; i < items.length; i++) {
            var dataItem = treeList.dataItem(items[i]);

            if (dataItem.IsHideCreate) {
                $(items[i]).find(".createButton").hide();
            }

            if (dataItem.IsHideDetails) {
                $(items[i]).find(".detailButton").hide();
            }

            if (dataItem.IsHideFilter) {
                $(items[i]).find(".filterButton").hide();
            }
        }
    }
</script>

<style>
    .group-icon {
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-size: 40px 44px;
        background-position: center center;
        vertical-align: middle;
        line-height: 41px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
    }

    .group-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 41px;
        padding-left: 10px;
    }
</style>

[Joel]

I found how to clear this error which should allow you to reproduce this easier.  I didn't have the .Name("filterButton") in the command.  The error likely happened because the <script> looks for that control name.  Help me improve my code.  It seems I shouldn't call .hide() unless I successfully found something.  Can you show me how to test this [$(items[i]).find(".filterButton").hide();] line before I call  hide?

Change this:

columns.Add().Command(c => { c.Custom().Text("Filter").ClassName("filterButton").Click("toFilter"); }).Width(Glossary.ButtonWidth);

To this:

columns.Add().Command(c => { c.Custom().Text("Filter").Name("filterButton").ClassName("filterButton").Click("toFilter"); }).Width(Glossary.ButtonWidth);

[Alex Hajigeorgieva]

Hello, Joel,

To check if there are any elements that meet the selector, you can use the length property of the result:

var filterBtn = $(items[i]).find(".filterButton");
if (dataItem.IsHideFilter && filterBtn.length) {
   filterBtn.hide();
}

Kind Regards,
Alex Hajigeorgieva
Progress Telerik