Adding a detailTemplate to a kendoGrid in cshtml

Question

I have a kendoGrid and I'd like to implement a detailTemplate.

But when I try to do so nothing is being display and I don't have any errors so I have no clue why it's not working.

After loading my .csv file this is how the kendoGrid looks like :

Now I'd like to add a detailRowTemplate to my kendoGrid so when I click on the row it displays new information like so :

I've looked at this link for the documentation but i struggle to implement what they did to what I'm doing because the approach is a little bit different :

documentation link

This is the code that i'm running at that I've tried :

<script id="sptDeviceImportDetailsTemplate" type="text/x-kendo-template">
    <span>@Html.Raw(LibResources.Device_Description)</span>
</script>
<div data-scroll="auto" data-bind="kendoGrid: { data: devices,
     useKOTemplates: true,
     pageable: { pageSize : 5 },
     sortable : true,
     dataBound : library.kendoGrid.displaySmartPager,
     columns: [{title : '@Html.Raw(LibResources.Company_Name)' ,field : 'CompanyName()' },
     {title : '@Html.Raw(LibResources.Device_Name)' ,field : 'Name()' },
     {title : '@Html.Raw(LibResources.Device_DeviceCode)' ,field : 'DeviceCode()' },
     {title : 'ModelName' ,field : 'ModelName()' },
     {title : '@Html.Raw(LibResources.Device_TreeLevelNodeNames)' ,field : 'LevelNodePath()' },
     {title : '@LibResources.Equipment_Identifiant.Replace("'", "&apos;")' ,field : 'IdEquipment()' },
     {title : '@Html.Raw(LibResources.NetworkServer_EnumRadioProtocol)' ,field : 'radioProtocol()' },
     {title : '@Html.Raw(LibResources.DeviceNetworkServer_IdRadio)' ,field : 'idRadio()' },
     {title : ' ' ,field : 'CompanyName()' ,width : 50 ,headerTemplate: '<span class=\'filter\'></span>'} ], detailTemplate: kendo.template($("#template").html()) }">
</div>

But when I run this with the detail template this is what I have :

And even after I load my .csv files nothing is being displayed