PDA

View Full Version : [CLOSED] Select dataview row when page loads



jpadgett
Feb 28, 2013, 3:28 PM
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:


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


View:


@{
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() );";
})
);
}
)
)

Vladimir
Feb 28, 2013, 3:46 PM
You need to select after store data loading
try to move code from ViewReady to Load listener of Store (can be required to add small delay to Load listener, Delay="100")

jpadgett
Feb 28, 2013, 4:02 PM
Here is my updated View:


@{
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")
)
)
.Listeners(l =>
{
l.Load.Delay = 2000;
l.Load.Handler = "#{SeasonViewData}.getSelectionModel().select(this. first());";
})
.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>
)
)
);
}
)
)




It throws the following js error: Line: 16
Error: Unable to get value of the property 'getSelectionModel': object is null or undefined

jpadgett
Feb 28, 2013, 4:04 PM
Ooops! Nevermind - I had #{SeasonViewData} instead of #{SeasonDataView}.

Corrected and the listener worked.

Thanks!