Modificar TextBox em GridView
Amigos,
Preciso fazer o seguinte Procedimento:
Criei um GridView Com 4 Colunas
Parametro
Valor
Minimo
Max
Cloro
(Aqui vai um textBox)
10
20
Objetivo:
Quando digitar o Valor dentro da TextBox (Coluna Template) a cor de fundo deste textbox deve mudar a partir da informações de Mínimo e máximo.
por exemplo:
Valor : 15
Mínimo : 10
Máximo: 20
Cor de fundo Verde
Valor : 9
Mínimo : 10
Máximo: 20
Cor de fundo Amarelo
Valor : 21
Mínimo : 10
Máximo: 20
Cor de fundo Vermelho
Consegui chegar em uma SUB Javasript, mas não soube como enviar os valores Minimio e máximo e realizar o cálculo.
Code:
<script type="text/javascript" language="javascript">
function ChangeColorFocus(obj, evt)
{
if (evt.type == "focus")
obj.style.borderColor = "#FF4D00";
else if (evt.type == "blur")
obj.style.borderColor = "#0a719c";
}
</script>
Código GridView
<asp:GridView ID="gvAnalise" runat="server" AutoGenerateColumns="False" CellPadding="4"
DataKeyNames="ID" ForeColor="#333333" GridLines="None"
onrowdatabound="gvAnalise_RowDataBound">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Parametro" HeaderText="Parametro" />
<asp:TemplateField HeaderText="Valor">
<ItemTemplate>
<asp:TextBox ID="txtValor" runat="server" onfocus ="ChangeColorFocus(this, event)" onblur ="ChangeColorFocus(this, event)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Minimo" HeaderText="Minimo" />
<asp:BoundField DataField="Maximo" HeaderText="Maximo" />
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
Preciso fazer o seguinte Procedimento:
Criei um GridView Com 4 Colunas
Parametro
Valor
Minimo
Max
Cloro
(Aqui vai um textBox)
10
20
Objetivo:
Quando digitar o Valor dentro da TextBox (Coluna Template) a cor de fundo deste textbox deve mudar a partir da informações de Mínimo e máximo.
por exemplo:
Valor : 15
Mínimo : 10
Máximo: 20
Cor de fundo Verde
Valor : 9
Mínimo : 10
Máximo: 20
Cor de fundo Amarelo
Valor : 21
Mínimo : 10
Máximo: 20
Cor de fundo Vermelho
Consegui chegar em uma SUB Javasript, mas não soube como enviar os valores Minimio e máximo e realizar o cálculo.
Code:
<script type="text/javascript" language="javascript">
function ChangeColorFocus(obj, evt)
{
if (evt.type == "focus")
obj.style.borderColor = "#FF4D00";
else if (evt.type == "blur")
obj.style.borderColor = "#0a719c";
}
</script>
Código GridView
<asp:GridView ID="gvAnalise" runat="server" AutoGenerateColumns="False" CellPadding="4"
DataKeyNames="ID" ForeColor="#333333" GridLines="None"
onrowdatabound="gvAnalise_RowDataBound">
<RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
<Columns>
<asp:BoundField DataField="ID" HeaderText="ID" />
<asp:BoundField DataField="Parametro" HeaderText="Parametro" />
<asp:TemplateField HeaderText="Valor">
<ItemTemplate>
<asp:TextBox ID="txtValor" runat="server" onfocus ="ChangeColorFocus(this, event)" onblur ="ChangeColorFocus(this, event)"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Minimo" HeaderText="Minimo" />
<asp:BoundField DataField="Maximo" HeaderText="Maximo" />
</Columns>
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<EditRowStyle BackColor="#999999" />
<AlternatingRowStyle BackColor="White" ForeColor="#284775" />
</asp:GridView>
Fernando Reis
Curtidas 0
Respostas
Luiz Maia
13/01/2010
Fernando, fiz uma função aqui rapidinho, depois vc implemante mais coisas nela, ok?
<script type="text/javascript" language="javascript">
function ChangeColorFocus(obj)
{
if (obj.value >= 10 && obj.value <= 20)
obj.style.backgroundColor = "green";
if (obj.value < 10)
obj.style.backgroundColor = "yellow";
if (obj.value > 20)
obj.style.backgroundColor = "red";
}
</script>
<input type="text" id="tbValor" onblur="ChangeColorFocus(this)" />
Abraços
Att
Luiz Maia
GOSTEI 0
Fernando Reis
13/01/2010
Luiz,
Testei com os valores fixo e até aqui tudo bem, Funcionou,
Agora oque não consigo é enviar os Valores Maximos e Mínimos para Detalhe
Tentei desta Forma
function ChangeColorFocus(obj,minimo,maximo) {
if (obj.value >= minimo && obj.value <= maximo)
obj.style.backgroundColor = "green";
if (obj.value < minimo)
obj.style.backgroundColor = "yellow";
if (obj.value > maximo)
obj.style.backgroundColor = "red";
}
<asp:TemplateField HeaderText="Valor">
<ItemTemplate>
<asp:TextBox ID="txtValor" runat="server" onblur="ChangeColorFocus(this,<%#Eval("minimo")>,<%#Eval("maximo")>)">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
GOSTEI 0
Fernando Reis
13/01/2010
Luiz,
Até consegui passar os parâmetos, mas ainda tem algo errado, as cores não aparecem como deveria de acordo com o valor digitado,
veja como ficou:
protected void gvAnalise_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
TextBox txt = (TextBox)e.Row.FindControl("txtValor");
txt.Text = ((System.Data.DataRowView)(e.Row.DataItem)).Row.ItemArray[2].ToString();
int minimo = int.Parse(((System.Data.DataRowView)(e.Row.DataItem)).Row.ItemArray[3].ToString());
int maximo = int.Parse(((System.Data.DataRowView)(e.Row.DataItem)).Row.ItemArray[4].ToString());
txt.Attributes.Add("onblur","ChangeColorFocus(this," + minimo + "," + maximo + ")");
}
}
JavaScript
function ChangeColorFocus(obj,minimo,maximo) {
if (obj.value >= minimo && obj.value <= maximo)
obj.style.backgroundColor = "#00FF7F";
else if (obj.value < minimo)
obj.style.backgroundColor = "#FFFFE0";
else if (obj.value > maximo)
obj.style.backgroundColor = "FF0000";
}
GOSTEI 0
Luiz Maia
13/01/2010
Os valores para minimo e maximo variam dentro da Grid?
De uma debugada para ver o que realmente esta sendo passado, outra alternativa e dar um "View Source" na página depois de renderizado o HTML e ver se a Grid foi montada com os valores de minimo e máximo correto.
Para verificar se os valores estão pelo menos chegando no método javascritp corretos, use o alert(minimo) e alert(maximo) dentro do metodo js.
Aguardo
Att
Luiz Maia
GOSTEI 0
Fernando Reis
13/01/2010
Luiz, Bom dia,
Tentei agora como falou,
o Alert de Minimo e maximo estão corretos. eu consigo passar os valores de forma correta para a função,
usando esta linha de pensamento, fiz um alert para o obj.value e este deu problema
apareceu "undefined".
como enviar o valor digitado?
Grato
Tentei agora como falou,
o Alert de Minimo e maximo estão corretos. eu consigo passar os valores de forma correta para a função,
usando esta linha de pensamento, fiz um alert para o obj.value e este deu problema
apareceu "undefined".
como enviar o valor digitado?
Grato
GOSTEI 0
Fernando Reis
13/01/2010
Luiz,
No IE funciona no Firefox Não!!!!!
é Mole.......................................
GOSTEI 0
Luiz Maia
13/01/2010
Ichi, eu so uso IE....
Tenta mudar o metodo js para usar getElementById... talvez funcione no FF tb.
Aguardo
Att
Luiz Maia
GOSTEI 0
Fernando Reis
13/01/2010
Como Assim?
Quase não uso o JavaScript!!!
GOSTEI 0
Luiz Maia
13/01/2010
Recuperar o controle usando:
document.getElementById("txt_texbox").style.....
Talvez desta forma funcione.
GOSTEI 0
Luiz Maia
13/01/2010
E ai Fernando, deu certo?
Abraços
Luiz Maia
GOSTEI 0
Fernando Reis
13/01/2010
No IE , tudo bem,
Com o Firefox, ainda não,
Viou testar e te chamo novamente,
Com o Firefox, ainda não,
Viou testar e te chamo novamente,
GOSTEI 0
Luiz Maia
13/01/2010
ok Fernando,
Vou concluir o chamado, mas assim que tiver alguma outra duvida, pode re-abri-lo, ok?
Abraços
Att
Luiz Maia
GOSTEI 0