Geek asks and answers

Kendo Grid: How to display the <string> list in one cell?

I tried iterating through the list and displaying all the elements in the cell in the column, but I had problems with its operation.

Here is what I still have.

In the grid definition:

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

where x.locationListis List<string>in the transferred object.

In <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;
}

However, this causes all entries to disappear. What is the correct syntax for this?

The documentation is confusing and most of the examples are not relevant to what I'm trying to do.

+3
source share
4 answers

, , , , , , , , , , , , .

, :

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;
}

to

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;
}

- ( )

, , , .

, .

+1

! , . x.locationList locationList iterate, ! ( )

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

To do this, you need to create a column template.

see this answer below

How to display formatted HTML data in a kendo ui grid column

JQuery to call a template

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

Foreach Loop inside the template

<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>
0
source

Shaz's solution did not help me. Not sure if I'm using a different version, but I don't have enough hashes. They are needed to determine what javascript is and what is not.

<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>

0
source

More articles:


All Articles