This is a migrated thread and some comments may be shown as answers.

CannotSerializeObjectNonSerializable Error

2 Answers 8 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 12 Apr 2019, 03:22 PM

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

2 Answers, 1 is accepted

Sort by
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 12 Apr 2019, 03:31 PM

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);
0
Alex Hajigeorgieva
Telerik team
answered on 17 Apr 2019, 10:18 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
TreeList
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Alex Hajigeorgieva
Telerik team
Share this question
or