Uncaught TypeError: Cannot read property 'lastChild' of undefined

Question

Good day,I have a schedule in which I display events, but I only want to show the schedule after certain steps have been performed.  When I set the display: "none" in css, it gives me the Uncaught TypeError: Cannot read property 'lastChild' of undefined.  I also tried using multiple tabs, but I receive the same error when the schedule is not in the first tab.  I also wondered if it is possible to dynamically create the schedule in javascript.  Please advise me on the matter.Regards.

Vinitha Devi Murugan · Answer

Hi Rikard, Thanks for contacting syncfusion support. The reported problem with “Uncaught TypeError: Cannot read property ‘lastchild’ of undefined” while rendering the schedule dynamically within tab was due to the live update of time in the scheduler when “showTimeIndicator” property is set to true. Scheduler continuously updates the live current system time appropriately on its user interface at a regular interval and therefore, when we initially hide the schedule element - the query selector element gets returned as empty which is the cause of this problem. To overcome this, we recommended two options to follow – either you can off the showTimeIndicator property by setting showTimeIndicator = ’false’ or else if you need showTimeIndicator property, then make use of the tab control’s client-side events ‘created’ and ‘selecting’ to hide and show the schedule dynamically on its initial rendering. We have prepared the sample with tab events, which can be downloaded from the following location. Sample link: http://www.syncfusion.com/downloads/support/forum/139075/ze/ej2coreApplication362036838

 




@using Syncfusion.EJ2.Grids 
@using Syncfusion.EJ2.Schedule 
@using Syncfusion.EJ2.Navigations; 
@{ 
    ViewData["Title"] = "Home Page"; 
 
    var filterSettings = new GridFilterSettings { Type = FilterType.Menu }; 
    var tabHeaderOne = new TabHeader { Text = "Tab One" }; 
    var tabHeaderTWo = new TabHeader { Text = "Tab Two" }; 
    var tabHeaderThree = new TabHeader { Text = "Tab Three" }; 
}

Kindly make use of any of the above suggested ways and let us know, if it resolves your problem and also, if you need any further assistance on this. Regards, M. Vinitha devi.

Rikard Schouwstra · Answer

Thank you very much, it did solve my problem. I would just like to know how to dynamically change the datasource of the schedule if it is possible.

Vinitha Devi Murugan · Answer

Hi Mariusz, Yes it is possible to dynamically change the datasource of the schedule as given in the below code example.

 





var scheduleObj = document.getElementById('Schedule1').ej2_instances[0];       // Create object to schedule 
scheduleObj.eventSettings.dataSource = [ {Id = 4,                                                  // set the datasource to schedule 
                                                                     Subject = "Time-off in lieu", 
                                                                     StartTime = new DateTime(2018, 2, 13, 9, 0, 0), 
                                                                      EndTime = new DateTime(2018, 2, 13, 11, 0, 0)  
                                                                     } 
                                                                    ];    
 scheduleObj.dataBind();

Please try the above code and let us know if you need any further assistance on this. Regards, M. Vinitha devi.

Rikard Schouwstra · Answer

Great thanks, is it also possible to change the datasource of a grid dynamically, with jQuery.ajax() to a new ViewBag instance?

Vinitha Devi Murugan · Answer

Hi Rikard, We can dynamically set the Essential JavaScript 2 Grid dataSource with jquery ajax() call. But you need to return the JSON data from the server action. We have prepared a simple sample based on your query in which we have dynamically set the grid.dataSource with jquery ajax success function. Please refer to the below code example and sample link. [index.cshtml]

. . .

[controller.cs] public ActionResult GetData() { var employee = Employee1Details.GetAllRecords(); var data = employee.ToList(); return Json(data); } Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ajax1804898211 Regards, M.Vinitha devi

line hammer · Answer

This error occurs in Chrome Browser when you read a property or call a method on an undefined object . Uncaught TypeError: Cannot read property of undefined error is probably easiest to understand from the perspective of undefined, since undefined is not considered an object type at all (but its own undefined type instead), and properties can only belong to objects within JavaScript. There are a few variations of this error depending on the property you are trying to access. Sometimes instead of undefined it will say null.

Karthigeyan Krishnamurthi · Answer

Thanks for sharing the information 😊