PDA

View Full Version : [CLOSED] Apply “styles” to a combobox items



opendat2000
Aug 20, 2015, 2:12 PM
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




<%@ 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 comments

Regards.

Daniil
Aug 20, 2015, 8:23 PM
Hi @opendat2000,

Unfortunately, no, a Template cannot do asynchronous remote requests. It needs all the data right at the moment.

Moreover, even if it were possible, I would recommend not to do that, because it leads to a big performance impact. An individual AJAX request for each item, then an individual SQL request to a database. It looks like a big overhead.

It appears to be the only way - create an additional "rango" ModelField and bind all data in Store1.DataSource. Then use it the getCssClass function instead of App.direct.ReturnQuery().

opendat2000
Aug 21, 2015, 5:31 PM
Daniil, Thank you so much for your help and prompt response.

Following your recommendation I’ve incorporated in the Contro Store the "Range1" column, now, i need to know how to get value “Control” of the store, so it can be operated by the ComboBox and give the style to items ?




<%@ 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, Range1 = 3},
new {DisplayField1 = "Two", ValueField1 = 2, Range1 = 2},
new {DisplayField1 = "Three", ValueField1 = 3, Range1 = 2},
new {DisplayField1 = "Four", ValueField1 = 4, Range1 = 1},
new {DisplayField1 = "Five", ValueField1 = 5, Range1 = 1}
};
Store1.DataBind();
}
}
</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 (store, values)
{
if (values.Range1 > 2)
{
return 'list-item-red';
}

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" />
<ext:ModelField Name="Range1" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ListConfig>
<ItemTpl ID="ItemTpl1" runat="server">
<Html>
<div class="{[ getCssClass(App.Store1, 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 comments

Regards.

Daniil
Aug 21, 2015, 6:03 PM
Please use:

var getCssClass = function (store, values) {
if (values.Range1 > 2) {
return 'list-item-red';
}

return 'list-item';
};

opendat2000
Aug 21, 2015, 7:02 PM
Hi Daniil,

Thanks a lot for your reply, the code line you proposed worked perfectly.

Please close the thread.

Note: I modified the code, to provide in the community.

Saludos
Mauricio.