Kendo Grid：如何在一個單元格中顯示<string>？

Question

我嘗試遍歷列表並將所有元素顯示在列中的單元格中，但我無法使其工作。

這是我到目前爲止。

在電網定義：

columns.Bound(x => x.locationList).Title("Locations Included").ClientTemplate("#= iterate(x.locationList) #"); 

其中x.locationList是

傳入的對象List<string>在<script>：

function iterate(object) { 
     var html = "<ul>"; 

     for (var x = 0; x < object.length; x++) { 
      html += "<li>"; 
      html += object[x]; 
      html += "</li>"; 
     } 

     html += "</ul>"; 
     return html; 
} 

然而，這會導致所有記錄消失。什麼是正確的語法來做到這一點？

文件混淆，大多數例子不適用於我想要的。

Answer 1

你需要讓一列模板用於此目的

請查看下面

How to display formatted HTML data in kendo ui grid column

jQuery的這個答案調用模板

var scriptTemplate = kendo.template($("#MessageBoxTemplate").html()) 
var scriptData = { stringList: yourListofString }; 

的foreach循環內模板

<script id="MessageBoxTemplate" type="text/x-kendo-template"> 
    <div class="class1"> 
     <div>This is <strong>bold </strong>text.</div> 
     <div> </div> 
     <div>This is <em>italics</em> text.</div> 
     <div> </div> 
     <div>This is a <a href="http://google.com/">hyperlink</a>.</div> 
     <div> </div> 
     <div>Bulleted list:</div> 
     <ul> 
      for(var item; item<=stringList.length;item++) 
      { 
      <li>#= item.Age#</li> 
      <li>#= item.Name#</li> 
      <li>#= item.Message#</li> 
      } 
     </ul> 
    </div> 
</script> 

Answer 2

Shaz的解決方案對我無效。不確定我是否使用不同的版本，但缺少一些散列。他們需要定義什麼是JavaScript，什麼不是。

<script id="MessageBoxTemplate" type="text/x-kendo-template"> 
<div class="class1"> 
    <div>This is <strong>bold </strong>text.</div> 
    <div> </div> 
    <div>This is <em>italics</em> text.</div> 
    <div> </div> 
    <div>This is a <a href="http://google.com/">hyperlink</a>.</div> 
    <div> </div> 
    <div>Bulleted list:</div> 
    <ul> 
     #for(var item; item<=stringList.length;item++) 
     {# 
     <li>#= item.Age#</li> 
     <li>#= item.Name#</li> 
     <li>#= item.Message#</li> 
     #}# 
    </ul> 
</div> 

Answer 3

你可能有你的答案已經但是你也不會太遠錯了你實現你都忘了是，如果你的列表是null或空這是大概是吹出來會發生什麼你的網格。

因此改變你的代碼：

function iterate(object) { 
     var html = "<ul>"; 

     for (var x = 0; x < object.length; x++) { 
      html += "<li>"; 
      html += object[x]; 
      html += "</li>"; 
     } 

     html += "</ul>"; 
     return html; 
} 

到

function iterate(object) { 
    var html = "<ul>"; 
    if (object !== null && object.length > 0) { 
     for (var x = 0; x < object.length; x++) { 
      html += "<li>"; 
      html += object[x]; 
      html += "</li>"; 
     } 
    } else { 
     html += "<li>-</li>"; 
    } 
    html += "</ul>"; 
    return html; 
} 

或者你可以這樣做：

function iterate(object) { 
    var html = '<ul>'; 
    if (object !== null && object.length > 0) { 
     object.forEach(function (data) { 
      html += '<li>' + data + '</li>'; 
     }); 
    } else { 
     html += '<li>-</li>'; 
    } 
    html += '</ul>'; 
    return html; 
} 

最後的解決方案是我的首選（我只是覺得它吸塵器閱讀）

顯然其他答案爲您提供了一個解決方案，如果它是更復雜一點，你想展示。

唉希望這有助於反正。

Answer 4

你太親近了！你的字面上只有一個字母，你的Kendo網格被定義在哪裏。只需將x.locationList替換爲locationList即可，傳遞給您的iterate函數，您就可以輕鬆前往！（全線修復如下）

columns.Bound(x => x.locationList).Title("Locations Included").ClientTemplate("#= iterate(locationList) #");