部分ビューでは、このように Kendo Splitter 内で宣言された Kendo Grid があります。
@(Html.Kendo().Splitter()
.Name("adminSplitter")
.Orientation(SplitterOrientation.Horizontal)
.Panes(p =>
{
p.Add()
.HtmlAttributes(new
{
id = "adminLeftHandPane"
})
.Resizable(false)
.Size("150px")
.Content(@<text>
@(Html.Kendo().Grid<AdministrativeTask>()
.Name("grdAdminTasks")
.ClientRowTemplate("<tr class=\"gridRow\"><td style=\"cursor:pointer\"><img src=\"#=ImageUrl#\" style=\"height: 16px; width: 16px;\" /> #=Title#</td></tr>")
.Columns(c => c.Bound(i => i.Action)
.Title("Administrative Tasks"))
.Selectable(s => s.Mode(GridSelectionMode.Single))
.DataSource(ds => ds.Ajax().Read("LoadAdministrativeTasks", "Admin").ServerOperation(false))
.Events(e => e.Change("change"))
)
</text>);
p.Add()
.HtmlAttributes(new
{
id = "adminRightHandPane"
})
.Content(@<text>
<div id="adminRightHandPaneContent"></div>
</text>)
;
}
)
)
この同じ部分ビューでは、私のスクリプトは次のようになります
<script>
function change() {
var row = this.select();
var item = this.dataItem(row);
$.ajax({
url: '/' + item.Controller + '/' + item.Action,
contentType: 'application/html; charset=utf-8',
type: 'GET',
dataType: 'html',
cache: false,
})
.success(function (result) {
// Display the section contents.
$('#adminRightHandPaneContent').html(result);
})
.error(function (xhr) {
$('#adminRightHandPaneContent').html("ERROR: <br><br>" + xhr.responseText);
//alert(xhr.responseText);
});
}
$(document).ready(function () {
alert($('.gridRow'));
$(".gridRow").hover(
function () {
alert("hit");
$(this).addClass("highlightRow");
},
function() {
$(this).removeClass("highlightRow");
}
);
});
部分ビューが読み込まれると、Jquery が行を見つけたことを知らせる "[object Object]" というアラートが表示されます。ただし、問題の行にカーソルを合わせると、「ヒット」警告メッセージが表示されないため、この時点で続行方法がわかりません。
ユーザーが行の上にカーソルを置いたときに行を強調表示しようとしています。私は何を間違っていますか？