0

Kendo UI tabStrip ウィジェットを使用して、次の 2 つのことを行います。

1) タブのコンテンツがすぐに表示されないため、最初のタブを自動選択します。

2) もちろん、特定の条件下で、最初のタブの contentUrl を交換します。

面白いことに、Html で k-content-urls ディレクティブを使用すると、最初のタブでコンテンツがすぐに読み込まれます。

元/

<div kendo-tab-strip  k-content-urls="['myTemplate.html', 'myTemplate2.html']">

しかし、私はこのようにしたくありません。次のように、以下のアプローチを好みますk-options="settings.tabOptions"

コントローラー コードの tabOptions と、その下の HTML マークアップは次のとおりです。 

 settings.tabOptions = {
            animation: { open: { effects: "fadeIn" } },
            select: function (e) {
                console.log("Selected: " + e.item.innerText);
                // NOT WORKING..
                e.sender.dataSource.options.data[0].contentUrl = "../myNewTemplate.html"
            },
            change: function (e) {
                console.log("Changed: ");
            },
            activate: function (e) {
                console.log("Activated: " + e.item.innerText);
            },
            show: function (e) {
                console.log("Shown: " + e.item.innerText);
            },
            contentLoad: function (e) {
                console.log("Content loaded in " + e.item.innerText);                
            },
            dataTextField: "title",
            dataContentUrlField: "contentUrl",
            dataSource: [{
                title: "Formatting",
                contentUrl: '../app/shared/include/grid-config/gad-config-grid-prop.html'
            },
            {
                title: "Dimensions",
                contentUrl: '../app/shared/include/grid-config/gad-config-grid-dimen.html'
            },
            {
                title: "Risk Measures",
                contentUrl: '../app/shared/include/grid-config/gad-config-grid-riskmeasures.html'
            }],
            error: function (e) {
                console.log("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
            }
        };
 <div id="Gadgettabs" kendo-tab-strip="tabstrip" k-options="settings.tabOptions">        
        <ul> 
            <li class="k-state-active">Formatting</li>
            <li>Dimensions</li>
            <li>Risk Measures</li>
        </ul>               
    </div>

ここでも、最初のタブのコンテンツをすぐに表示する必要があります。また、最初のタブのコンテンツを動的に変更する方法も理解します。

前もって感謝します...

ボブ

**** 更新 **** 上記のイベントで contentUrl を動的に変更しようとしていますが、うまくいきselect:ません。

4

1 に答える 1

1

最終的な解決策:

注：ng-controllerディレクティブで「controller as」構文を使用していない場合（私のように）、コントローラーコードで"settings."オブジェクトを置き換えてください。"$scope."そしてもちろん、html では を削除するだけ"settings."です。

// KENDO TABSTRIP
settings.urls = ['../app/shared/include/grid-config/gad-config-grid-prop.html', '../app/shared/include/grid-config/gad-config-grid-dimen.html', '../app/shared/include/grid-config/gad-config-grid-riskmeasures.html'];
if ($scope.widget.gadgetType == "chart") {
	settings.urls[0] = '../app/shared/include/barchart-config/gad-config-barchart-prop.html';
};        
settings.tabOptions = {
	//animation: { open: { effects: "fadeIn" } },           
	select: function (e) {
		console.log("Selected: " + e.item.innerText);
	},
	change: function (e) {
		console.log("Changed: ");
	},
	activate: function (e) {
		console.log("Activated: " + e.item.innerText);
	},
	show: function (e) {
		console.log("Shown: " + e.item.innerText);
	},
	contentLoad: function (e) {
		console.log("Content loaded in " + e.item.innerText);                
	},            
	error: function (e) {
		console.log("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
	}
};
<div id="Gadgettabs" kendo-tab-strip="settings.tabStrip"
         k-rebind="settings.urls"
         k-content-urls="settings.urls"
         k-options="settings.tabOptions" >
        <ul> 
            <li class="k-state-active">TAB1</li>
            <li>TAB2</li>
            <li>TAB3</li>
        </ul>               
    </div>

于 2015-03-16T15:11:19.020 に答える