PDA

View Full Version : [CLOSED] Set color for ComboBoxFor items.



PriceRightHTML5team
Sep 02, 2013, 9:41 AM
Hi
Mine is a Asp.net MVC 4 (razor engine) application.
I have a ComboBoxFor component in my form panel.
as per values in the model

var data= @Html.Raw(Json.Encode(Model.xyzList));
i have to set color to the ComboBoxFor items.

How to set color to the ComboBoxFor items?

Daniil
Sep 02, 2013, 1:16 PM
Hi @PriceRightHTML5team,

I think you can achieve it using a ComboBox ListConfig's ItemTpl. Here is an example of using it.
http://examples2.ext.net/#/Form/ComboBox/Custom_Drop_Down_List/

It makes sense for MVC as well.

PriceRightHTML5team
Sep 03, 2013, 6:07 AM
Hi Daniil

following is my markup for comboboxfor


X.ComboBoxFor(c => c.CsvTotalxyzList)
.QueryMode(DataLoadMode.Local)
.Editable(false)
.EmptyText(RP.ERRSelect).ID("Cmbxyz").Editable(false).Width(300)
.Items(
from p in Model.xyzlist
select new Ext.Net.ListItem { Text = p.xyz_DESC, Value = p.xyz_CD.ToString() }
)
.Listeners(l => { l.Select.Fn = "callRefreshView"; l.BoxReady.Fn = "ChangeColor"; l.DirtyChange.Fn = "SetDirty"; })
.LabelCls("fieldLabelTop")

How should i apply ListConfig's ItemTpl keeping the "Text" and "Value" feature intact, so as to get the selected listItem value in model and script as well.

Kindly provide the appropriate markup.

Daniil
Sep 03, 2013, 1:38 PM
How should i apply ListConfig's ItemTpl keeping the "Text" and "Value" feature intact, so as to get the selected listItem value in model and script as well.


I am afraid I don't understand the question.

I am posting here an example.

Example

@{
var X = Html.X();
}

<!DOCTYPE html>
<html>
<head>
<title>Ext.Net.MVC v2 Example</title>

<script>
var getStyle = function (comboBox, item) {
if (item.field1 === "2") {
return "color: green;";
}
};
</script>
</head>
<body>
@X.ResourceManager()

@(X.ComboBox()
.Items(
X.ListItem().Text("Item 1").Value("1"),
X.ListItem().Text("Item 2").Value("2"),
X.ListItem().Text("Item 3").Value("3")
)
.ListConfig(X.BoundList()
.ItemTpl(X.XTemplate()
.Html(@<text>
<div class="list-item" style="{[ getStyle(this, values) ]}">
{field2}
</div>
</text>)
)
)
)

</body>
</html>

PriceRightHTML5team
Sep 04, 2013, 6:40 AM
Thanks Daniil