Model not initialized in grid popup editor.

4 posts, 1 answers
  1. Answer
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 02 Oct 2013 Link to this post

    I am having an issue trying to render a check listbox in a grid popup custom editor.
    The popup renders with no problem but I get an error when trying to iterate through my collection to render the check boxes.

    Custom editor code.
    @model Smartrail.UI.ViewModels.DisplayPanelViewModel
    <div id="columnsList" style="height: 110px; overflow: auto;border:solid; width:150px;">
        @if (Model.Columns != null)
            foreach (var column in Model.Columns)
                var checkBoxId = "chk" + column.Id;
                var tdId = "td" + column.Id;
                <table width="100%">
                    <tr >
                        <td width="20px">
                            <input type="checkbox" id="@checkBoxId" value="@column.Id" />
                        <td id="@tdId"  width="100px">

    Error Message
    Object reference not set to an instance of an object.
    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
    Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.
    Source Error:
    Line 4: 
    Line 5:  <div id="columnsList" style="height: 110px; overflow: auto;border:solid; width:150px;">
    Line 6:      @foreach (var names in Model.Columns)
    Line 7:      {
    Line 8:          var checkBoxId = "chk" + names.Id;
    Source File: d:\Dev\Accutrak\Smartrail02\SourceCode\trunk\SmartrailWeb\Areas\DisplayPanel\Views\Setup\_ColumnsTab.cshtml    Line: 6

    The Model in the foreach loop is not initialized and the related collections are null. The above error is because Model.Columns is null. 
    I can see everything fine in the grid, and if I comment out the above code (to prevent the error), all my other controls render fine showing values from the same Model. I am not understanding why my Model is not initialized when trying to look through the collection.

    Do I somehow need to pass the Columns collection from the grid to the popup when it renders? If so - how?

    I have sat for 3 hours trying to figure this out as I try to not use the forums if I can help it (due to long times taken to respond, and most of the time responses just ending in "please post a working example" when the code is already self explanatory). I am however stuck in a corner and starting to take flack for late delivery. I literally consume many many hours trying to get KendoUI to work as I need it to, with almost no help from support ): I just don't have time to also have to create examples when the supplied code should be sufficient.

  2. Petur Subev
    Petur Subev avatar
    1882 posts

    Posted 04 Oct 2013 Link to this post

    Hello Michael,

    When using the KendoUI Grid with ajax binding - the editor template is serialized to string and send to the client where it is re-used when displaying the popup window for the different records - when you press edit you can see that no request is going to the server.

    Thus said the editor template is invoked initially with an empty model this is why you can access a real model and its properties. What we suggest in scenarios like this is to implement the logic inside of the template based on the different bindings - that serialized template is bound to the model that you are about to edit.

    To demonstrate how to deal with checkboxes I prepared a sample project.

    I hope this helps.

    Kind Regards,
    Petur Subev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET AJAX banner
  4. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 04 Oct 2013 Link to this post

    Thanks Petur. Checking out your sample now.
  5. DominionZA
    DominionZA avatar
    49 posts
    Member since:
    Jul 2007

    Posted 04 Oct 2013 Link to this post

    Hi Petur,

    Unfortunately your sample does not help me with my problem.
    I see your Person.cshtml editor template does NOT dynamically generate the check boxes which is what I am trying to do. I need to generate the checkboxes from a database table (in my code this is Model.Columns) and then set which are checked based on a users selection in another table.

    Your code is

    @model KendoMVCWrappers.Models.Person
    <br />
    <br />
       <label><input type="checkbox" value="1"  data-bind="checked: Relatives" />Test 1</label>
       <label><input type="checkbox" value="2"  data-bind="checked: Relatives" />Test 2</label>
       <label><input type="checkbox" value="3"  data-bind="checked: Relatives" />Test 3</label>
       <label><input type="checkbox" value="4"  data-bind="checked: Relatives" />Test 4</label>
       <label><input type="checkbox" value="5"  data-bind="checked: Relatives" />Test 5</label>
       <label><input type="checkbox" value="6"  data-bind="checked: Relatives" />Test 6</label>
       <label><input type="checkbox" value="7"  data-bind="checked: Relatives" />Test 7</label>
       <label><input type="checkbox" value="8"  data-bind="checked: Relatives" />Test 8</label>
       <label><input type="checkbox" value="9"  data-bind="checked: Relatives" />Test 9</label>
    Which is great is you have a pre-defined list of checkboxes to show.
    In my case, the options can vary which is why I use a foreach (var column in Model.Columns)... to generate my checkboxes. I can't though because - as you explained - it is null.

    Would it help if I used a ViewBag object to hold the list of checkboxes to display and render using that? IE: Look through the ViewBag object instead of the model?

    EDIT: I populated a ViewData.Columns object and it works fine for rendering the checkboxes. Now to just make it work the way I want. Thanks for the help Petur. I will revert if I get stuck again (which I am sure will happen).
Back to Top
UI for ASP.NET AJAX banner