listview - KendoUI ListView の内容をクリックすると消えてしまうのはなぜですか?

Question

このチュートリアルの編集例に従って、自分の Web ページで同様の動作を実現することができましたが、なぜそれが起こるのか理解できない問題があります。[編集] ボタンまたは [削除] ボタンをクリックするたびに、それらのボタンに関連付けられているリストビューの要素がリストから消えます。これは、リストビューを表示するための私の JavaScript 関数です。

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

リストビュー用に定義したテンプレートは、このリンクにあります。最後に、これは私の見解です:

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

リストビューのコンテンツが表示されない理由は何ですか? Kendo UI リストビューコントロールに埋め込まれた動作ですか? この動作を回避するにはどうすればよいですか?

助けてくれてありがとう。

score 1 · Accepted Answer

要素が消える状況がいくつかあります。典型的なものは次のとおりです。

updateDataSource 定義にモードはありません。
定義にはありませんid（またはありませんmodel）。DataSource

modelあなたの DataSource から、定義がないことがわかります。

編集

この例では、モデルを使用してグリッドを定義しましたが、モデル内の定義にコメントを付けidました。editボタンをクリックしてからをクリックするとcancel、行が消えます。

コメントされたid定義:

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

ここで、定義内のコメントを削除しidてテストを繰り返します。行がグリッドから削除されていないことがわかります。

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

編集：

定義にエディションテンプレートがないようです。それusuariosTemplateは次のようなものでなければなりません：

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

また、listView の初期化で余分なオプションを追加するためにコードを変更する必要があります。

usuarios の listView の例 (ハードコードバージョン)。

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

listview - KendoUI ListView の内容をクリックすると消えてしまうのはなぜですか?

1 に答える 1

Related

Reference