KendoUI Загрузить шаблон виджета

Question

Я пытаюсь настроить HTML-код, используемый виджетами kendoUpload, но я не могу заставить его работать.

Я следил за демонстрацией на своем веб-сайте, читал документацию, но по-прежнему получаю шаблон по умолчанию (иначе, мой пользовательский шаблон не применяется вообще).

Javascript и шаблон:

$("#files").kendoUpload({ 
      async: { 
       saveUrl: Configuration.BaseUrl + "/portaluserquote/SourceFileUpload", 
       removeUrl: Configuration.BaseUrl + "/portaluserquote/RemoveSourceFileUpload", 
       autoUpload: true 
      }, 
      template:"<span class='k-progress'></span>"+ 
       "<div class='file-wrapper'>"+ 
        "<span class='file-icon #=addExtensionClass(files[0].extension)#'></span>"+ 
        "<h4 class='file-heading file-name-heading'>Name: #=name#</h4>"+ 
        "<h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>"+ 
        "<button type='button' class='k-upload-action'></button>"+ 
       "</div>", 

      multiple: true 

     }); 

Скриншот с генерируемым DOM:

Любые идеи?

Answer 1

Проблема была связана с версией кендо. Как только я обновился до последней версии, шаблоны для kendoUpload работали.

Я считаю, что эта функция была добавлена ​​позже.

Answer 2

Вы помещаете непосредственно HTML вместо того, чтобы ссылаться на него kendo.template. Согласно documentation, он должен быть шаблоном. :

$("#files").kendoUpload({ 
    async: { 
     saveUrl: Configuration.BaseUrl + "/portaluserquote/SourceFileUpload", 
     removeUrl: Configuration.BaseUrl + "/portaluserquote/RemoveSourceFileUpload", 
     autoUpload: true 
    }, 
    template:kendo.template("<span class='k-progress'></span>"+ 
     "<div class='file-wrapper'>"+ 
      "<span class='file-icon #=addExtensionClass(files[0].extension)#'></span>"+ 
      "<h4 class='file-heading file-name-heading'>Name: #=name#</h4>"+ 
      "<h4 class='file-heading file-size-heading'>Size: #=size# bytes</h4>"+ 
      "<button type='button' class='k-upload-action'></button>"+ 
     "</div>"), 
    multiple: true 
});