Aug 20, 2015, 2:12 PM
[CLOSED] Apply “styles†to a combobox items
Hi !!!
My problem is this: I should apply “styles†to a combobox items, for each item must be created a SQL to the database, to determine the style to be configured.
So, i need to know "if it’s possible to have a direct method returning to value from the code behind the JavaScript call to ?"
I implemented the following example to illustrate my problem
Regards.
My problem is this: I should apply “styles†to a combobox items, for each item must be created a SQL to the database, to determine the style to be configured.
So, i need to know "if it’s possible to have a direct method returning to value from the code behind the JavaScript call to ?"
I implemented the following example to illustrate my problem
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store1.DataSource = new object[]
{
new {DisplayField1 = "One", ValueField1 = 1},
new {DisplayField1 = "Two", ValueField1 = 2},
new {DisplayField1 = "Three", ValueField1 = 3},
new {DisplayField1 = "Four", ValueField1 = 4},
new {DisplayField1 = "Five", ValueField1 = 5},
};
Store1.DataBind();
}
}
[DirectMethod]
public int ReturnQuery(string pstrValue)
{
return (int.Parse(pstrValue) > 2 ? 1 : 0);
}
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Edit Form View - Ext.NET Examples</title>
<style type="text/css">
.list-item
{
font:normal 11px tahoma, arial, helvetica, sans-serif;
padding:3px 10px 3px 10px;
border:1px solid #fff;
border-bottom:1px solid #eeeeee;
white-space:normal;
color:#555;
}
.list-item-red
{
font:normal 11px tahoma, arial, helvetica, sans-serif;
padding:3px 10px 3px 10px;
border:1px solid #fff;
border-bottom:1px solid #eeeeee;
white-space:normal;
color: red;
font-weight: bold;
}
</style>
<script type="text/javascript">
var getCssClass = function (combo, values)
{
var value = values[combo.valueField];
var rango = App.direct.ReturnQuery(value);
if (rango == 1)
{
return 'list-item-red';
}
else
{
return 'list-item';
}
};
</script>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Window ID="FormWindow" runat="server"
Title="Form View"
Width="440"
Height="310"
BodyPadding="15"
Resizable="false"
Closable="false"
Layout="Fit">
<Items>
<ext:FormPanel ID="FormPanel1" runat="server"
Border="false"
Layout="Form">
<Items>
<ext:ComboBox ID="ComboBox1" runat="server"
Name="Name4"
MsgTarget="Side"
ValueField="ValueField1"
DisplayField="DisplayField1"
FieldLabel="Field ComboBox1" >
<Store>
<ext:Store ID="Store1" runat="server" AutoLoad="false" >
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="ValueField1"/>
<ext:ModelField Name="DisplayField1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="{[ getCssClass(App.ComboBox1, values)]}">
<h3>{DisplayField1}</h3>
{ValueField1}
</div>
</Html>
</ItemTpl>
</ListConfig>
</ext:ComboBox>
</Items>
</ext:FormPanel>
</Items>
</ext:Window>
</form>
</body>
</html>
I accept suggestions, ideas or commentsRegards.
Last edited by Daniil; Aug 23, 2015 at 8:42 AM.
Reason: [CLOSED]