Grid Foreign Key Column With Popup Editor Template MVVM Don't Bind With Null Values

[Travis]

I am rolling out a grid to allow end users to update database values.  It needs to be able to sort, group, and filter, which I've never been able to get to work with custom editor templates so I'm using the "values" property to initialize the Foreign Key columns as dropdown lists.  I am using a popup editor template, not in line grid editing.  The grid is bound to an external datasource using a kendoDataSource in the viewModel.

As long as there is data being passed to a field, everything works great.  I can create/edit things just fine and dandy.  The issue is some of these columns can be null, and if a value is null when I popup the editor and change the value from null to something, the binding doesn't work and the new value doesn't update the view model and doesn't get passed to the "update" function.  (Note: this doesn't seem to be specific to the editor popup, when I change things to edit in-line the same issue occurs.)

For example:  I have an "AssignedDrafter" field. 

It is initialized in datasource.schema.model.fields like so:

AssignedDrafter: { type: "number", nullable: true }

It is in kendoGrid.columns like so:

field: "AssignedDrafter", title: "Assigned Drafter", width: 175, values: ARS.kendoHelpers.makeValues(amplify.store(ARS.ls.config.Types.ActiveEmployees), "FullName", "EmployeeID")

I am using amplifyjs to store local data since the end users can be at remote sites where internet is only accessable over a high latency satellite hop, and I have a function which converts the Json data being stored into an appropriate array of { text: FullName, value: EmployeeID } objects.

I bind to the data in the popup editor like so:

<div class="col-xs-6">
                   <div class="col-xs-4">
                       <label for="AssignedDrafter" class="labelCenter">Assigned Drafter</label>
                       <span class="k-invalid-msg" data-for="AssignedDrafter" />
                   </div>
                   <div class="col-xs-8">
                       <input name="AssignedDrafter"
                              data-text-field="text"
                              data-value-field="value"
                              data-bind="value:AssignedDrafter, source: activeEmployeeValues"
                              data-role="dropdownlist"
                              class="maxwidth"/>
                   </div>
               </div>

On Create, Delete, and Read everything works as I would expect, even if the AssignedDrafter is null.  The issue is when I am editing an existing record and the value is null.  The dropdownlist appears as normal, with the first option displayed.  I select a different option and click Update and the popup closes, but no update occurs.  I investigated further and it appears that the update event doesn't fire.  OK, so I went in and edited a text field on the record and then updated the AssignedDrafter field and then set a breakpoint to see what was getting passed back to the controller.  The edit for the text field came through, but the edit for the AssingedDrafter field did not, the value being passed was "null".

The weirder thing is that if I go into the database and manually insert a value, then come back to the kendo grid and update the AssignedDrafter field to a different person, the update goes through just fine.  

I have several other drop down lists on this grid that all behave exactly the same.

It appears that the binding doesn't work if the value being passed is null.  I've got a workaround in place where I pass a placeholder value ("-1") for nulls, but it is a hack and uncessearily complicates the code quite a bit.  It seems like maybe I am doing something wrong?  Has anyone successfully gotten foreign key columns to work with null values?

[Georgi Krustev]

Hello Travis,

I would suggest you check our code library devoted on the same subject. Even though it uses ASP.NET MVC wrappers, the approach is applicable to Kendo UI Grid too. The important thing in this case is to set the valuePrimitive option to true and use the custom MVVM value binding that will allow to bind the nullable value correctly.

Regards,
Georgi Krustev
Telerik