Model not initialized in grid popup editor.

[DominionZA]

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>
                    <td id="@tdId"  width="100px">
                        @column.ColumnCode
                    </td>
                </tr>
            </table>
        }
    }
</div>

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.

TIA

[Petur Subev]

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.

http://docs.kendoui.com/getting-started/framework/mvvm/bindings/value

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

I hope this helps.


Kind Regards,
Petur Subev
Telerik

[DominionZA]

Thanks Petur. Checking out your sample now.

[DominionZA]

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

@Html.LabelFor(x=>x.Name)
<br />
@Html.EditorFor(x=>x.Name)
<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).