PDA

View Full Version : [CLOSED] gridpanel columns interaction



marco.morreale
Feb 12, 2013, 7:55 AM
Hi,

I have a gridpanel with some ComponentColumns.
One column (named "Boolean") contains a checkbox and the following one (named "ComboBox") contains a combobox.

I would like the following behaviour:
the combobox is disabled by default; when the checkbox is checked, the combobox becomes enabled.

please, can you provide an example of that?

This is my "sandbox":

.aspx


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="Ext.Net.Examples.Test1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head runat="server">
<title>ComponentColumn Editor - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>ComponentColumn as Editor</h1>

<ext:GridPanel
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="IntField" Type="Int" />
<ext:ModelField Name="BooleanField" Type="Boolean" />
<ext:ModelField Name="ComboField" Type="Int" />
<ext:ModelField Name="TextField" Type="String" />
<ext:ModelField Name="DateField" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="IntField"
Flex="1"
Text="Integer">
<Component>
<ext:NumberField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="BooleanField"
Text="Boolean"
>
<Component>
<ext:Checkbox runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="ComboField"
Flex="1"
Text="ComboBox">
<Component>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
<ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
<ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
<ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
<ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
<ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
<ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
<ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
<ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
</Items>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="TextField"
Flex="1"
Text="Text">
<Component>
<ext:TextField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="DateField"
Flex="1"
Text="Date">
<Component>
<ext:DateField runat="server" />
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<Buttons><ext:Button
runat="server"
Text="Aggiungi intervento"
Icon="Add"
OnDirectClick="btnAddService_Click"
>
<DirectEvents>
<Click>
<EventMask Msg="please, wait..." ShowMask="true" UseMsg="true"></EventMask>
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:GridPanel>
</form>
</body>
</html>




.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using Ext.Net;

namespace Ext.Net.Examples
{
public partial class Test1 : System.Web.UI.Page
{
public static List<object> myList;

protected void Page_Load(object sender, EventArgs e)
{

if (!X.IsAjaxRequest)
{
myList = new List<object>();

for (int i = 1; i < 10; i++)
{
myList.Add(new object[] { i,false, i, "Text " + i, DateTime.Now.Date });
}

this.Store1.DataSource = myList;

this.Store1.DataBind();
}
}

protected void btnAddService_Click(object sender, DirectEventArgs e)
{
this.Store1.CommitChanges();

Intervento intervento = new Intervento();
myList.Add(new object[] { 11,false, 11, "Text 11", DateTime.Now.Date });

this.Store1.DataSource = myList;

this.Store1.DataBind();
}

}
}


Thanks in advance.

M

Daniil
Feb 12, 2013, 10:49 AM
Hi Marco,

Please set up:

<BeforeBind Handler="e.config[0].disabled = !e.record.data.BooleanField;" />
for the ComponentColumn with ComboBox.

And this

<Edit Handler="item.grid.getView().refreshNode(e.rowIdx);" Delay="100" />
for the ComponentColumn with Checkbox.

marco.morreale
Feb 12, 2013, 1:32 PM
Hi Daniil,
I got an error running the code: 'e' is undefined.

Morever "BeforeBind" doesn't seem to be a supported event (did you mean Bind?).

Here is the .aspx code completed with you suggestions. Maybe I misunderstood:



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test1.aspx.cs" Inherits="Ext.Net.Examples.Test1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head runat="server">
<title>ComponentColumn Editor - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>ComponentColumn as Editor</h1>

<ext:GridPanel
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="IntField" Type="Int" />
<ext:ModelField Name="BooleanField" Type="Boolean" />
<ext:ModelField Name="ComboField" Type="Int" />
<ext:ModelField Name="TextField" Type="String" />
<ext:ModelField Name="DateField" Type="Date" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="IntField"
Flex="1"
Text="Integer">
<Component>
<ext:NumberField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="BooleanField"
Text="Boolean"
>
<Component>
<ext:Checkbox runat="server" />
</Component>
<Listeners>
<Edit Handler="item.grid.getView().refreshNode(e.rowIdx);" Delay="100" />
</Listeners>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="ComboField"
Flex="1"
Text="ComboBox">
<Component>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
<ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
<ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
<ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
<ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
<ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
<ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
<ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
<ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
</Items>
</ext:ComboBox>
</Component>
<Listeners>
<BeforeBind Handler="e.config[0].disabled = !e.record.data.BooleanField;" />
</Listeners>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="TextField"
Flex="1"
Text="Text">
<Component>
<ext:TextField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="DateField"
Flex="1"
Text="Date">
<Component>
<ext:DateField runat="server" />
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<Buttons><ext:Button
runat="server"
Text="Aggiungi intervento"
Icon="Add"
OnDirectClick="btnAddService_Click"
>
<DirectEvents>
<Click>
<EventMask Msg="please, wait..." ShowMask="true" UseMsg="true"></EventMask>
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:GridPanel>
</form>
</body>
</html>

Daniil
Feb 12, 2013, 1:43 PM
No, I meant BeforeBind. Just it was recently added to SVN.

Please update from the trunk.

marco.morreale
Feb 12, 2013, 3:20 PM
Do you mean release Ext.NET 2.1?

I updated but still "BeforeBind" is not accepted.

Is there any workaround to avoid an upgrade to major release?

M

Daniil
Feb 12, 2013, 4:28 PM
I meant SVN trunk.

For the 2.1 release please try this:

<Bind Handler="cmp.setDisabled(!record.data.BooleanField);" />

P.S. Please put code behind directly into an ASPX page wrapping in

<script runat ="sever">

It will allow to have a standalone ASPX page to easily copy, paste and run. Thank you.

marco.morreale
Feb 13, 2013, 8:19 AM
Hi Daniil,
the trick works now but I have a bad side effect:

In my real gridpanel there are other combox componentcolumns.
When I click the checkbox all values set in the other checkbox in the line are lost.

M

Daniil
Feb 13, 2013, 10:16 AM
Please provide a test case to reproduce. We will investigate.

marco.morreale
Feb 13, 2013, 10:42 AM
Hi Daniil,
is quite hard tome reproduce such case.

Please, try to add a component column with AjaxProxy like this:



<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="MarcaId"
Text="Marca"
Width="170"
>
<Component>

<ext:ComboBox
ID="cbMarca"
runat="server"
ValueField="new_marcaId"
DisplayField="new_descrizione"
TypeAhead="true"

MatchFieldWidth="false"
PageSize="10"
HideBaseTrigger="false"
MinChars="1"
Width="170"
ForceSelection="true"
AllowBlank="false"
EmptyText="seleziona una marca"
>
<Store>
<ext:Store runat="server" AutoLoad="false" PageSize="10">
<Proxy>
<ext:AjaxProxy Url="../WebServices/Marca.ashx" >
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" TotalProperty="total" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model >
<ext:Model runat="server" IDProperty="new_marcaId" >
<Fields>
<ext:ModelField Name="new_marcaId" />
<ext:ModelField Name="new_descrizione" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn


if you select a value in this column and then check the checkbox the selection is lost (combobox turns empty).
M

Daniil
Feb 13, 2013, 12:34 PM
Please try to blur the ComboBox first after selecting before clicking the Checkbox. Does the value still reset?

marco.morreale
Feb 13, 2013, 1:11 PM
Yes, it does.

Just checking/unchecking the checkbox does reset the combobox columns.

Daniil
Feb 13, 2013, 1:16 PM
Ok, please provide a standalone ASPX page to reproduce.

Also please provide Marca.ashx.

marco.morreale
Feb 13, 2013, 1:41 PM
.aspx


<%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">


public static List<object> myList;

protected void Page_Load(object sender, EventArgs e)
{

if (!X.IsAjaxRequest)
{
myList = new List<object>();

for (int i = 1; i < 10; i++)
{
myList.Add(new object[] { i,false, i,i, "Text " + i, DateTime.Now.Date });
}

this.Store1.DataSource = myList;

this.Store1.DataBind();
}
}

protected void btnAddService_Click(object sender, DirectEventArgs e)
{
this.Store1.CommitChanges();

myList.Add(new object[] { 11,false, 11,11, "Text 11", DateTime.Now.Date });

this.Store1.DataSource = myList;

this.Store1.DataBind();
}


</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head runat="server">
<title>ComponentColumn Editor - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>ComponentColumn as Editor</h1>

<ext:GridPanel
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="IntField" Type="Int" />
<ext:ModelField Name="BooleanField" Type="Boolean" />
<ext:ModelField Name="ComboField" Type="Int" />
<ext:ModelField Name="ComboField2" Type="Int" />
<ext:ModelField Name="TextField" Type="String" />
<ext:ModelField Name="DateField" Type="Date" />
<ext:ModelField Name="SelectField2" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:ComponentColumn runat="server" Editor="true" DataIndex="MarcaId" Text="Marca"
Width="170">
<Component>
<ext:ComboBox ID="cbMarca" runat="server" ValueField="new_marcaId" DisplayField="new_descrizione"
TypeAhead="true" MatchFieldWidth="false" PageSize="10" HideBaseTrigger="false"
MinChars="1" Width="170" ForceSelection="true" AllowBlank="false" EmptyText="seleziona una marca">
<Store>
<ext:Store runat="server" AutoLoad="false" PageSize="10">
<Proxy>
<ext:AjaxProxy Url="../WebServices/Marca.ashx">
<ActionMethods Read="POST" />
<Reader>
<ext:JsonReader Root="data" TotalProperty="total" />
</Reader>
</ext:AjaxProxy>
</Proxy>
<Model>
<ext:Model runat="server" IDProperty="new_marcaId">
<Fields>
<ext:ModelField Name="new_marcaId" />
<ext:ModelField Name="new_descrizione" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="ComboField2"
Flex="1"
Text="ComboBox2">
<Component>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
<ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
<ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
<ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
<ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
<ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
<ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
<ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
<ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
</Items>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>


<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="IntField"
Flex="1"
Text="Integer">
<Component>
<ext:NumberField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="BooleanField"
Text="Boolean"
>
<Component>
<ext:Checkbox runat="server" />
</Component>
<Listeners>
<Edit Handler="item.grid.getView().refreshNode(e.rowIdx);" Delay="100" />
</Listeners>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="ComboField"
Flex="1"
Text="ComboBox">
<Component>
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Item 1" Value="1" Mode="Raw" />
<ext:ListItem Text="Item 2" Value="2" Mode="Raw" />
<ext:ListItem Text="Item 3" Value="3" Mode="Raw" />
<ext:ListItem Text="Item 4" Value="4" Mode="Raw" />
<ext:ListItem Text="Item 5" Value="5" Mode="Raw" />
<ext:ListItem Text="Item 6" Value="6" Mode="Raw" />
<ext:ListItem Text="Item 7" Value="7" Mode="Raw" />
<ext:ListItem Text="Item 8" Value="8" Mode="Raw" />
<ext:ListItem Text="Item 9" Value="9" Mode="Raw" />
</Items>
</ext:ComboBox>
</Component>
<Listeners>
<Bind Handler="cmp.setDisabled(!record.data.BooleanField);" />
</Listeners>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="TextField"
Flex="1"
Text="Text">
<Component>
<ext:TextField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
DataIndex="DateField"
Flex="1"
Text="Date">
<Component>
<ext:DateField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn runat="server" Editor="true" DataIndex="SelectField2"
Text="SelectBox">
<Component>
<ext:SelectBox ID="SelectBox1" runat="server" DisplayField="state" ValueField="abbr"
EmptyText="Select a state...">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="abbr" />
<ext:ModelField Name="state" />
<ext:ModelField Name="nick" />
</Fields>
</ext:Model>
</Model>
<Listeners>
<Load Handler="#{SelectBox1}.setValue(record.data.TextField);" ></Load>
</Listeners>
</ext:Store>
</Store>
</ext:SelectBox>
</Component>
</ext:ComponentColumn>


</Columns>
</ColumnModel>
<Buttons><ext:Button
runat="server"
Text="Aggiungi intervento"
Icon="Add"
OnDirectClick="btnAddService_Click"
>
<DirectEvents>
<Click>
<EventMask Msg="please, wait..." ShowMask="true" UseMsg="true"></EventMask>
</Click>
</DirectEvents>
</ext:Button>
</Buttons>
</ext:GridPanel>
</form>
</body>
</html>



Marca.ashx requires other components that are to complex to include.
Please, can you simplify it, returning some sample data? I am non able to.
Thanks in advance.
Marco

Marca.ashx


using System.Web;
using System.Web.Services;
using Ext.Net;

using Xrm;

namespace Ext.Net.Examples
{
/// <summary>
/// Summary description for $codebehindclassname$
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Marca : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/json";

int start = 0;
int limit = 10;
string sort = string.Empty;
string dir = string.Empty;
string query = string.Empty;

if (!string.IsNullOrEmpty(context.Request["start"]))
{
start = int.Parse(context.Request["start"]);
}

if (!string.IsNullOrEmpty(context.Request["limit"]))
{
limit = int.Parse(context.Request["limit"]);
}

if (!string.IsNullOrEmpty(context.Request["sort"]))
{
sort = context.Request["sort"];
}

if (!string.IsNullOrEmpty(context.Request["dir"]))
{
dir = context.Request["dir"];
}

if (!string.IsNullOrEmpty(context.Request["query"]))
{
query = context.Request["query"];
}

DataWebService wsData = new DataWebService();

Paging<object> records = wsData.MarcaPaging(start, limit, sort, dir, query);

context.Response.Write(string.Format("{{total:{1},data:{0}}}", JSON.Serialize(records.Data), records.TotalRecords));
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

geoffrey.mcgill
Feb 13, 2013, 4:37 PM
Hi,

I tried to run your sample, but multiple Exceptions were thrown. I gave up after trying to fix the first three.

Please simplify your sample. We should be able to copy/paste your code directly into a local test project and run, without having to modify your sample to fix Exceptions.

Daniil
Feb 14, 2013, 4:52 AM
Marca.ashx requires other components that are to complex to include.
Please, can you simplify it, returning some sample data? I am non able to.


It could be replaced with something like this.

object[] records = new object[]
{
new
{
id = "id 1",
description = "description 1"
},
new
{
id = "id 2",
description = "description 2"
},
};

context.Response.Write(string.Format("{{total:{1},data:{0}}}", JSON.Serialize(records), records.Length));

Hope this helps you to prepare a runnable sample.