Dropdown list in Pop-up not sending back correct values

[Just]

I've a grid with a custom template modal window for edit & add. The template has drop down list field defined like below:

<div class="k-edit-label">
            <label for="ColName">Site</label>
</div>
<input name="ColName" data-source="ColNameDataSource" data-text-field="colName" 
      data-value-field="dartSiteName" data-bind="value:ColName" data-role="dropdownlist" />

When I edit a row and change the value of the drop-down it shows correctly in the grid.

But if I Add a row and change the value of the drop down it shows up as [object Object]. Does anyone have any idea what could I be doing wrong?
Thanks.