kendo-ui - グリッドが空の場合、カスタム ポップアップ エディターが開かない

Question

HTML テンプレートを作成し、ポップアップ エディターでそのテンプレートを使用しています。グリッドに少なくとも 1 つのレコードがある場合は完全に機能しますが、グリッドにデータがない場合、追加ボタンをクリックするとカスタム ポップアップ エディターは開きません。エラーは表示されませんが、ポップアップ エディターが開きません。この問題の解決策をご存知の方はいらっしゃいますか? 編集 これは私が使用したテンプレートです。

<script id="teamEditorTemplate" type="text/x-kendo-template">
    <form  method="POST">
 <table>
            <tr>
                <td><div >
                        Area Prefix:                
                    </div></td>
                <td><div>
                        <input name="area_prefix" class="k-input k-textbox" style="text-align: left" id="area_prefix" required  validationMessage="Please Enter Area Prefix"/>                        
                    </div></td>
            </tr>
             <tr>
                <td><div >
                        Area Name:                
                    </div></td>
                <td><div>
                        <input name="area_name" class="k-input k-textbox" style="text-align: left" id="area_name" required  validationMessage="Please Enter Area Name"/>                        
                    </div></td>
            </tr>
             <tr>
                <td><div >
                        Source:                
                    </div></td>
                <td><div>
                        <input name="source" style="text-align: left" id="source" required  validationMessage="Please Select Source"/>                        
                    </div></td>
            </tr>
             <tr>
                <td><div >
                        Country Name:                
                    </div></td>
                <td><div>
                        <input name="vox_country_id" style="text-align: left" id="vox_country_id" required  validationMessage="Please Select Country"/>                        
                    </div></td>
            </tr>

   </table>
    </form>    
</script>

剣道UIコードはこちら

$("#grid").kendoGrid({
            dataSource: dataSource,
           pageSize: 10,
             serverPaging: true,
            serverSorting: true,
            sortable:true,
                pageable: { 
                            refresh: true,
                             pageSizes:[10,20,50,100]
                        },
            height: 400,
            toolbar: [{ name: "create", text: "Add New Area" }],
            columns: [
                { field:"area_prefix", title: "Area Prefix",width:70 },
                { field: "area_name", title:"Area Name",width:90},
                { field: "source", title:"Source",width:70, template: '#= getsourceName(source) #'},
                 { field: "vox_country_id", width:70,template: '#= getCountryName(vox_country_id) #'},
                { command: ["edit", "destroy"], title: "Action",width:53}],
            editable: {
                mode: "popup",            
                template: $("#teamEditorTemplate").html(),
                update: true,  
                add:true,
                destroy: true,

                confirmation: "Are you sure you want to remove ?"
            },
            edit: function(e) {
                if(!e.model.id){
                    $(e.container).parent().find('.k-window-title').html("Add Area Details");
                    $(e.container).parent().find('.k-grid-update').html("Save");
                }
             }
        });