I’ve followed the editing example from this tutorial, and managed to achieve a similar

Question

0

Asked: June 18, 20262026-06-18T06:50:36+00:00 2026-06-18T06:50:36+00:00

I’ve followed the editing example from this tutorial, and managed to achieve a similar

0

I’ve followed the editing example from this tutorial, and managed to achieve a similar behavior for my web page, but there’s a problem which I don’t understand why it happens. Every time I click on the Edit button or Delete button, the element on the List View associated to those buttons disappears from the list. This is my javascript function for displaying the List View:

function swapDiv(e) {
    selection = e.value;
    var url = '';
    switch (selection) { //check from which endpoint I will be loading the contents for the list view
        case 'Usuarios':
            url = "http://127.0.0.1:81/SismosService.svc/usuario/index";
            template = '#usuariosTemplate';
            break;
        case 'Regiones':
            url = "http://127.0.0.1:81/SismosService.svc/region/index";
            template = '#regionesTemplate';
            break;
        case 'Clusters':
            url = "http://127.0.0.1:81/SismosService.svc/cluster/index";
            template = '#clustersTemplate';
            break;
        case 'Dispositivos':
            url = "http://127.0.0.1:81/SismosService.svc/dispositivo/index";
            template = '#dispositivosTemplate';
            break;
        case 'Eventos':
            url = "http://127.0.0.1:81/SismosService.svc/evento/index";
            template = '#eventosTemplate';
            break;
    }
    $.ajax({ //make the ajax call to load the contents for the list view
        url: url,
        success: function (data) {
            var src = null;
            if (template == '#eventosTemplate')
            {
                src = getEventosArray(data); //the controls displayed for this kind of data are different from the rest
            }
            else
            {
                src = data.Response; 
            }
            var ds = new kendo.data.DataSource({
                data: src
            });
            $('#listView').kendoListView({ //create the kendo ui list view
                dataSource: ds,
                template: kendo.template($(template).html())
            });
        },
        error: function (data) {
            console.log('Error: ' + JSON.stringify(data));
        }
    });
    //animate the div where the list view and other controls are displayed
    $('#selectionBar').animate({
        left : '189'
    }, 500);
    $('#dataBar').animate({
        left: '0'
    }, 500);
    $('#myMap').animate({
        left : '370'
    }, 500);
}

The templates I defined for the List View are in this link. Finally this is my View:

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.common.min.css")%>" rel="stylesheet" type="text/css" />
    <link href="<%: Url.Content("~/Content/kendo/2012.3.1114/kendo.default.min.css")%>" rel="stylesheet" type="text/css" />
    <script src="http://code.jquery.com/jquery-1.7.min.js" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/kendo/2012.3.1114/kendo.web.min.js")%>"></script>
    <script src="<%: Url.Content("~/Scripts/jquery.signalR-1.0.0-rc1.min.js")%>" type="text/javascript"></script>
    <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.3"></script>
    <script src="<%: Url.Content("~/Scripts/index/templateLoader.js")%>" type="text/javascript"></script>
    <script src="<%: Url.Content("~/Scripts/index/main.js")%>" type="text/javascript"></script>

<%-- here goes my templates but for space reasons and to provide a more clean reading I put the templates separately --%>


</head>
<body onload="GetMap();">
    <div id="canvasDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: transparent; left: 10px; ">
        <div id="mainDiv" style="position: absolute; top: 0px; left: 0; width: 100%; height: 100%; background-color: transparent; left: 10px; ">
            <div id="leftBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:20">
                <button id="btnUsuarios" value="Usuarios" style="position: absolute;left: 10px; right: 10px; top: 10px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)">Usuarios</button><br />
                <button id="btnRegiones" value="Regiones" style="position: absolute;left: 10px; right: 10px; top: 70px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)">Regiones</button><br />
                <button id="btnClusters" value="Clusters" style="position: absolute;left: 10px; right: 10px; top: 130px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)">Clusters</button><br />
                <button id="btnDispositivos" value="Dispositivos" style="position: absolute;left: 10px; right: 10px; top: 190px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)">Dispositivos</button><br />
                <button id="btnEventos" value="Eventos" style="position: absolute;left: 10px; right: 10px; top: 250px; width: auto; height: 50px" class="k-button" onclick="swapDiv(this)">Eventos</button><br />
            </div>
            <div id="selectionBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:9">
                <div class="k-toolbar k-grid-toolbar">
                    <button class="k-button k-button-icontext k-add-button" onclick="swapToNewData(this)"><span class="k-icon k-add"></span>Agregar</button>
                </div>
                <div id="listView" style="background-color: transparent; position: absolute; top: 40px; left: 0px; right: 0px; width:auto; height:auto" ></div>
            </div>
            <div id="dataBar" style="border: thin solid #666666; position: absolute; top: 0px; left: 0; width: 180px; height: 100%; background-color: white; left: 10px; overflow:auto; z-index:8">
                <div id="dataView" style="background-color: transparent; position: absolute; top: 40px; bottom:0px; left: 0px; right: 0px; width:auto; height:auto" ></div>
            </div>
            <div id='myMap' style="border: thin solid black; position: absolute; display: block; min-height: 100%; top: 0px; left: 189px; width: 88%; "></div>
        </div>
    </div>
</body>
</html>

What’s the reason for the contents of my List View to disappear? is it a behavior embedded in the Kendo UI List View control? How can I avoid this behavior?

Thanks for any help.

Report

Leave an answer
Cancel reply

You must login to add an answer.

Need An Account,

1 Answer

Editorial Team · Answer 1 · 2026-06-18T06:50:37+00:00

There are a few circumstances that make the elements disappear. Typical are:

There is no update mode in the DataSource definition.
There is no id (or even model) in the DataSource definition.

From your DataSource I see that there is no model definition.

EDIT

In this example I have defined a Grid with a model but I have commented the id definition in the model. If you click on edit button and then cancel, you will see the row disappear.

Commented id definition:

schema   : {
    model: {
        // id    : "symbol",
        fields: {
            symbol: { type: "string" },
            price : { type: "number" },
            shares: { type: "number" },
            total : { type: "number" }
        }
    }
},

Now, remove the comment in the id definition and repeat the test, you will see that now the row is not removed from the grid.

schema   : {
    model: {
        id    : "symbol",
        fields: {
            symbol: { type: "string" },
            price : { type: "number" },
            shares: { type: "number" },
            total : { type: "number" }
        }
    }
},

EDIT:

Seems that you are missing the edition template in your definition. For usuariosTemplate it should be something like:

<script type="text/x-kendo-tmpl" id="usuariosTemplateEdit">
    <div class="product-view">
        <dl>
            <dt>Usuario</dt>
            <dd>
                <input type="text" data-bind="value:Nombre" name="Nombre" required="required"/>
                <input type="text" data-bind="value: ApellidoP" name="ApellidoP" required="required" />
                <input type="text" data-bind="value: ApellidoM" name="ApellidoM" required="required" />
            </dd>
        </dl>
        <div class="edit-buttons">
            <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span>Save</a>
            <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>
        </div>
    </div>
</script>

and you should also change your code for adding the extra option in the listView initialization:

Example of the listView for usuarios (hardcode version).

$('#listView').kendoListView({
    dataSource  : ds,
    template    : kendo.template($('#usuariosTemplate').html()),
    editTemplate: kendo.template($('#usuariosTemplateEdit').html())
});

Sign Up

Sign In

Forgot Password

The Archive Base Latest Questions

I’ve followed the editing example from this tutorial, and managed to achieve a similar

Leave an answerCancel reply

1 Answer

Leave an answer
Cancel reply