Feb 28, 2013, 3:28 PM
[CLOSED] Select dataview row when page loads
Following the example of the Feed Viewer, I would like to use a DataView for a west panel menu, and I would like for it to show the first row as selected when the page first loads. Here is the code as I have it, and you should notice that the first row is not being selected. I may just need another pair of eyes to see what I'm leaving out.
When you select one of the rows with the cursor, the appropriate css should apply to the element.
Controller:
When you select one of the rows with the cursor, the appropriate css should apply to the element.
Controller:
public ActionResult DataView()
{
return View();
}
[HttpPost]
public ActionResult GetData()
{
List<object> data = new List<object>
{
new {id = 1, year = "2001"},
new {id = 2, year = "2002"},
new {id = 3, year = "2003"},
new {id = 4, year = "2004"},
new {id = 5, year = "2005"}
};
return new DirectResult(data);
}@{
ViewBag.Title = "DataView";
}
<style>
.west-list {
padding: 0 3px 0 3px;
}
.west-list-item {
margin-top: 3px;
padding-left: 20px;
font-size: 11px;
line-height: 20px;
cursor: pointer;
background: url(../images/bullet.png) no-repeat 0 2px;
border: 1px solid #fff;
}
.west-list .x-item-selected {
font-weight: bold;
color: #15428B;
background-color: #DFE8F6;
border: 1px dotted #A3BAE9;
}
.west-list-item-hover {
background-color: #eee;
}
</style>
@(Html.X().Panel()
.Layout(LayoutType.Fit)
.Width(150)
.Title("Season")
.Cls("west-panel")
.Items(items =>
{
items.Add(
Html.X().DataView()
.ID("SeasonDataView")
.SingleSelect(true)
.TrackOver(true)
.Cls("west-list")
.ItemSelector(".west-list-item")
.OverItemCls("west-list-item-hover")
.Store(Html.X().Store()
.ID("SeasonStore")
.AutoLoad(true)
.Proxy(
Html.X().AjaxProxy()
.Url(Url.Action("GetData"))
.ActionMethods(action =>
{
action.Read = HttpMethod.POST;
})
.Reader(
Html.X().JsonReader().Root("result")
)
)
.Model(
Html.X().Model()
.Fields(
new ModelField("id", ModelFieldType.Int),
new ModelField("year")
)
)
)
.Tpl(
Html.X().XTemplate()
.Html(
@<tpl for=".">
<div class="west-list-item">
{year}
</div>
</tpl>
)
)
.Listeners(l =>
{
l.ViewReady.Handler = "this.getSelectionModel().select(this.store.first());";
})
);
}
)
)
