PDA

View Full Version : [CLOSED] [#31] ComboBox item not getting selected when Used inside the panel in Editor Functionality of Grid



alscg
Jan 29, 2013, 11:10 AM
I have hard coded lstObject which is set as Data Source of the Grid Store.
In DestComponentColumn I have used Panel which contain two component that is DestCombo and DestText.

Code is running sucessfully and getting the desired User Interface as you can see in the attachment.

ISSUE:- Items of SourceComboBox is getting selected properly but item is not getting selected for the DestCombo which I have highlighted in the attached screen. 5494

Its getting selected when I remove panel from the Component column.But my need is to show either text box or combo box based on some condition.For achieving this I have used panel inside component column as Component column doesnt allow more than one component in it.




<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
List<object[]> lstObject = new List<object[]>();
lstObject.Add(new object[] {1,1});
lstObject.Add(new object[] {2,2});
lstObject.Add(new object[] {3,3});

this.GridStore.DataSource = lstObject;
this.GridStore.DataBind();
}

}
</script>

<script type="text/javascript">

var DestinationRenderer= function (column, cmp, record) {
if (record.get('DestComboField') == '0') {
cmp.componentLayout.owner.items.items[0].hide();
} else {
cmp.componentLayout.owner.items.items[1].hide();
}
};

var InsertRecord = function (e) {

var grid = <%= MapFieldGridPanel.ClientID %>;
var position = 0;
position = (grid.store.data.items.length);
grid.store.insert(position, {});
grid.getView().focusRow(position);
}

var DeleteRecord = function (column, cmp, record) {
//debugger;
var grid = <%= MapFieldGridPanel.ClientID %>;
grid.store.remove(record);

}

</script>

<!DOCTYPE html>

<html>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>MapFieldValues</title>


</head>
<body>
<div>
<ext:ResourceManager runat="server" />

<ext:GridPanel ID="MapFieldGridPanel"
runat="server"
Title="ComponentColumn Editor"
Width="600"
Height="400">
<Store>
<ext:Store ID="GridStore" runat="server">
<Model>
<ext:Model ID="MapModel" runat="server">
<Fields>
<ext:ModelField Name="SourceComboField" Type="Int" />
<ext:ModelField Name="DestComboField" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="SourceColumnModel" runat="server">
<Columns>
<ext:ComponentColumn ID="SourceComponentColumn"
runat="server"
Editor="true"
DataIndex="SourceComboField"
Flex="1"
Text="Source Field Value">
<Component>
<ext:ComboBox ID="SourceComboBox" runat="server">
<Items>
<ext:ListItem Text="1" Value="1" Mode="Raw" />
<ext:ListItem Text="2" Value="2" Mode="Raw" />
<ext:ListItem Text="3" Value="3" Mode="Raw" />
<ext:ListItem Text="4" Value="4" Mode="Raw" />
<ext:ListItem Text="5" Value="5" Mode="Raw" />
</Items>
</ext:ComboBox>
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="DestComponentColumn"
runat="server"
Editor="true"
DataIndex="DestComboField"
Flex="1"
Text="Destination Field Value" Visible="true">
<Component>
<ext:Panel ID="DestinationPanel" runat="server">
<Items>
<ext:ComboBox ID="DestCombo" runat="server">
<Items>
<ext:ListItem Text="1" Value="1" Mode="Raw" />
<ext:ListItem Text="2" Value="2" Mode="Raw" />
<ext:ListItem Text="3" Value="3" Mode="Raw" />
</Items>

</ext:ComboBox>
<ext:TextField ID="DestText" runat="server" />
</Items>
</ext:Panel>

</Component>
<Listeners >
<Bind Fn="DestinationRenderer"></Bind>
</Listeners>
</ext:ComponentColumn>

<ext:CommandColumn ID="AddCommandColumn" runat="server">
<Commands>
<ext:GridCommand CommandName="add" Icon="Add">

</ext:GridCommand>

</Commands>
<Listeners>
<Command Fn="InsertRecord"></Command>
</Listeners>
</ext:CommandColumn>

<ext:CommandColumn ID="DeleteCommandColumn" runat="server">
<Commands>
<ext:GridCommand CommandName="delete" Icon="Delete">
</ext:GridCommand>
</Commands>
<Listeners>
<Command Fn="DeleteRecord"></Command>
</Listeners>
</ext:CommandColumn>

</Columns>
</ColumnModel>
</ext:GridPanel>
</div>
</body>
</html>

Daniil
Jan 29, 2013, 11:58 AM
Hi @alscg,

Editor="true" mode doesn't support a Panel to be a ComponentColumn's Component.

You could try to set up a value manually.

var DestinationRenderer= function (column, cmp, record) {
if (record.get('DestComboField') == '0') {
cmp.items.get(0).hide();
cmp.items.get(1).setValue(record.get("DestComboField"));
} else {
cmp.items.get(1).hide();
cmp.items.get(0).setValue(record.get("DestComboField"));
}
};

Also you will need to listen a Change event of the fields to update a record's field, because Editor="true" won't work.

Daniil
Jan 29, 2013, 3:10 PM
We have a ticket to improve ComponentColumn functionality.

Maybe, we will be able to cover your case as well. Unfortunately, no any time frame for this ticket.

alscg
Feb 05, 2013, 3:09 PM
HI,

I have converted this code into EXT.NET MVC and bind it with the Model. But I am getting the attached error.I am not getting the proper solution.

5550



<%:this.Html.X().Store(Html.X().Store().ID("StoreSrcCombo")
.Model(Html.X().Model().ID("SrcModel")
.Fields(
new ModelField("ID", ModelFieldType.String),
new ModelField("Name", ModelFieldType.String)
)
).DataSource(Model[0])
)

%>
<%:this.Html.X().Store(Html.X().Store().ID("StoreDestCombo")
.Model(Html.X().Model().ID("DestModel")
.Fields(
new ModelField("ID", ModelFieldType.String),
new ModelField("Name", ModelFieldType.String)
)
).DataSource(Model[1])
)
%>

<%:this.Html.X().GridPanel()
.ID("MapFieldGridPanel")
.Header(false)
.Border(false)
.Height(400)
.Width(822)
.Cls("x-custom")
.Store(Html.X().Store().ID("GridStore")
.Model(Html.X().Model().ID("MapModel")
.Fields(
new ModelField("SourceComboField", ModelFieldType.String),
new ModelField("DestComboField", ModelFieldType.String)
)
).DataSource(Model[2])
)
.ColumnModel(
Html.X().ComponentColumn()
.ID("SourceComponentColumn")
.Editor(true)
.DataIndex("SourceComboField")
.Width(350)
.Height(47)
.Text("Source Field Value")
.Component(Html.X().ComboBox()
.ID("SourceComboBox")
.StoreID("StoreSrcCombo")
.DisplayField("Name")
.ValueField("ID")
. Width(310)),
Html.X().ComponentColumn()
.ID("DestComponentColumn")
.Editor(true)
.DataIndex("SourceComboField")
.Width(320)
.Height(47)
.Text("Source Field Value")
.Component(Html.X().Panel()
.ID("DestinationPanel")
.Border(false)
.Items(
Html.X().ComboBox()
.StoreID("StoreDestCombo")
.DisplayField("Name")
.ValueField("ID")
. Width(348),

Html.X().TextField()
. Width(348))
)
.Listeners(ls => ls.Bind.Fn = "DestinationRenderer"),
Html.X().CommandColumn()
.ID("AddCommandColumn")
.Width(35)
.Commands(Html.X().GridCommand()
.CommandName("add")
.Icon(Icon.Add)
.OverCls("x-add"))
.Listeners(ls => ls.Command.Fn = "InsertRecord"),
Html.X().CommandColumn()
.ID("DeleteCommandColumn")
.Width(35)
.Commands(Html.X().GridCommand()
.CommandName("delete")
.Icon(Icon.Delete)
.OverCls("x-add"))
.Listeners(ls => ls.Command.Fn = "DeleteRecord")
)
%>

Vladimir
Feb 06, 2013, 11:44 AM
Did you add resource manager?
Please post full view code

alscg
Feb 06, 2013, 12:12 PM
Did you add resource manager?
Please post full view code

I was using <ext:ResourceManager ID="ResourceManager1" runat="server" />
Now I have changed to <%:Html.X().ResourceManager(ViewBag.ManagerConfig as MvcResourceManagerConfig)%>
Now its not giving error.
Thanks.

Daniil
Feb 06, 2013, 1:51 PM
Hi @alscg,

I see the first time such a syntax "<%: %>". Please clarify what is this? What for and how to use?

Also why don't you use "@"?

Example .cshtml View

<!DOCTYPE html>

<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@Html.X().ResourceManager()
</body>
</html>

alscg
Feb 07, 2013, 5:15 AM
Hi @alscg,

I see the first time such a syntax "<%: %>". Please clarify what is this? What for and how to use?

Also why don't you use "@"?

Example .cshtml View

<!DOCTYPE html>

<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@Html.X().ResourceManager()
</body>
</html>


Please refer http://haacked.com/archive/2011/01/06/razor-syntax-quick-reference.aspx

For the code I took reference of http://mvc.ext.net/#/GridPanel_ComponentColumn/Editor/
Since we are using ASPX engine for our MVC project,so converted the code from Razor to Web Form Equivalent.

In .cshtml file you are using @ and for the .aspx we are using <%: %>

Hope we are taking the correct approach.Please suggest.

Daniil
Feb 07, 2013, 6:07 AM
Understand, thank you.

Please note that in ASPX you can use the common markup.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<html>
<head runat="server">
<title>Ext.NET v2 Example</title>
</head>
<body>
<ext:ResourceManager runat="server" />
</body>
</html>

Here is an example of using the WebForm view engine in MVC.
http://mvc.ext.net/#/Items/ASPX_Engine/

Daniil
Feb 14, 2013, 10:37 AM
We have a ticket to improve ComponentColumn functionality.

Maybe, we will be able to cover your case as well. Unfortunately, no any time frame for this ticket.

We have committed the improvement to SVN trunk. It will be also available with the v2.2 release.

Please take a look at the example.

Example

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.Data = new object[]
{
new object[] { 0, 1 },
new object[] { 1, "text" },
new object[] { 2, DateTime.Now },
new object[] { 3, "Item4" },
new object[] { 4, true }
};
}
}
</script>

<!DOCTYPE html>

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

<h1>Multiple Editors</h1>

<ext:GridPanel
runat="server"
Title="Multiple Editors"
Width="400"
Height="180">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="Index" Type="Int" />
<ext:ModelField Name="Value">
<Convert Handler="if(record.data.Index == 2){return Ext.Date.parse(value, 'Y-m-d\\TH:i:s');} else {return value;}" />
</ext:ModelField>
</Fields>
</ext:Model>
</Model>
<Reader>
<ext:ArrayReader />
</Reader>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:RowNumbererColumn runat="server" />

<ext:ComponentColumn runat="server" Flex="1" Editor="true" DataIndex="Value">
<Component>
<ext:NumberField runat="server" />
<ext:TextField runat="server" />
<ext:DateField runat="server" />
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Item1" />
<ext:ListItem Text="Item2" />
<ext:ListItem Text="Item3" />
<ext:ListItem Text="Item4" />
<ext:ListItem Text="Item5" />
</Items>
</ext:ComboBox>
<ext:Checkbox runat="server" />
</Component>
<Listeners>
<BeforeBind Handler="e.config = e.config[e.record.data.Index];" />
</Listeners>
<Renderer Handler="metadata.style='color:gray;'; return '[none]';" />
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>

</form>
</body>
</html>

alscg
Feb 15, 2013, 6:29 AM
Thanks for the update..it will really help.

alscg
Mar 12, 2013, 5:28 PM
Following are almost same code as Initially posted code by me,but this one is in Razor.I am getting the desired UI.
As you can see below code,in first component column there is StoreSrcCombo and in second component column I am using panel in which there is StoreDestCombo and a textbox.Only one of them gets visible at a time.

When I want to fetch all data then on OK button I am calling mappingRecord function.I am getting all the value from the grid by looping into
grid.store.data.item[0].raw[0].

Issue is while fetching data whatever user enter into the blank text box its not getting populated in grid.store.data.item[0].raw[0].
Even if You select another value in Combobox.It doesnt get reflected. 5799
Please refer attachment5798

My requirement is to get all the data on OK button,I think we need to handle the change event,I am using the updated DLL.



@Model object[]
<script>
var DestinationRenderer = function (column, cmp, record) {
debugger;
if (record.get('DestComboField') == "") {
cmp.componentLayout.owner.items.items[0].hide();
cmp.items.get(1).setValue(record.get("DestComboField"));
} else {
cmp.componentLayout.owner.items.items[1].hide();
cmp.items.get(0).setValue(record.get("DestComboField"))
}
};

var InsertRecord = function (e, cmp) {
var grid = App.MapFieldGridPanel;
var position = 0;
var recordCount = grid.store.data.items.length;
if (recordCount > 0) {
$(".x-grid-table tbody tr:nth-child(2) td:nth-child(4) .x-grid-cell-inner").css("display", "inline");
}
position = (grid.store.data.items.length);
grid.store.insert(position, {});
grid.getView().focusRow(position);
};

var DeleteRecord = function (column, cmp, record) {
Ext.Msg.confirm('Delete', 'Are you sure you want to delete the record(s)?',
function (btn) {
if (btn == 'yes') {
debugger;
var grid = App.MapFieldGridPanel;
var recordCount = record.stores[0].data.length;
if (recordCount == 2) {
grid.store.remove(record);
$(".x-grid-table tbody tr:nth-child(2) td:nth-child(4) .x-grid-cell-inner").css("display", "none");
} else {
grid.store.remove(record);
}
}
});
};

var mappingRecord = function () {
debugger;
var grid = App.MapFieldGridPanel;
};

</script>

@(Html.X().Store(Html.X().Store().ID("StoreSrcCombo")
.Model(Html.X().Model().ID("SrcModel")
.Fields(
new ModelField("ID", ModelFieldType.String),
new ModelField("Name", ModelFieldType.String)
)
).DataSource(Model[0])
)

)
@(Html.X().Store(Html.X().Store().ID("StoreDestCombo")
.Model(Html.X().Model().ID("DestModel")
.Fields(
new ModelField("ID", ModelFieldType.String),
new ModelField("Name", ModelFieldType.String)
)
).DataSource(Model[1])
))

@(Html.X().GridPanel()
.ID("MapFieldGridPanel")
.Border(false)
.Height(400)
.HideHeaders(false)
.Split(true)
.Width(778)
.Cls("x-custom")
.Store(Html.X().Store().ID("GridStore")
.Model(Html.X().Model().ID("MapModel")
.Fields(
new ModelField("SourceComboField", ModelFieldType.String),
new ModelField("DestComboField", ModelFieldType.String)
)
).DataSource(Model[2])
)
.ColumnModel(
Html.X().ComponentColumn()
.ID("SourceComponentColumn")
.Editor(true)
.DataIndex("SourceComboField")
.Width(350)
.Height(47)

.Component(Html.X().ComboBox()
.ID("SourceComboBox")
.StoreID("StoreSrcCombo")
.DisplayField("Name")
.ValueField("ID")
. Width(305)),
Html.X().ComponentColumn()
.ID("DestComponentColumn")
.Editor(true)
.DataIndex("DestComboField")
.Width(358)
.Height(47)

.Component(Html.X().Panel()
.ID("DestinationPanel")
.Border(false)
.Items(
Html.X().ComboBox()
.StoreID("StoreDestCombo")
.DisplayField("Name")
.ValueField("ID")
. Width(340),

Html.X().TextField()
. Width(340).ID("txtDest") ))
.Listeners(ls => ls.Bind.Fn = "DestinationRenderer"),
Html.X().CommandColumn()
.ID("AddCommandColumn")
.Width(35)
.Commands(Html.X().GridCommand()
.CommandName("add")
.Icon(Icon.Add)
.OverCls("x-add"))
.Listeners(ls => ls.Command.Fn = "InsertRecord"),
Html.X().CommandColumn()
.ID("DeleteCommandColumn")
.Width(35)
.Commands(Html.X().GridCommand()
.CommandName("delete")
.Icon(Icon.Delete)
.OverCls("x-add"))
.Listeners(ls => ls.Command.Fn = "DeleteRecord")
)
)
@( Html.X().Button().ID("Btn").Text("OK").Handler("mappingRecord").Width(100))


Controller


public ActionResult MapFieldValue(string containerId)
{
Ext.Net.MVC.PartialViewResult pr = new Ext.Net.MVC.PartialViewResult();
pr.ContainerId = containerId;
pr.ViewName = "MapFieldValue";
pr.ClearContainer = true;
pr.RenderMode = RenderMode.RenderTo;


List<object[]> lstObject = new List<object[]>();
lstObject.Add(new object[] { "A", "B" });
lstObject.Add(new object[] { "B", "A" });
lstObject.Add(new object[] { "C", "" });
pr.Model = new object[] { Department.GetAll(), Department.GetDestAll(), lstObject};
return pr;
}

public class Department
{
public string ID { get; set; }
public string Name { get; set; }

public static List<Department> GetAll()
{
return new List<Department>
{
new Department {ID = "A", Name = "A"},
new Department {ID = "B", Name = "B"},
new Department {ID = "C", Name = "C"}
};
}

public static List<Department> GetDestAll()
{
return new List<Department>
{
new Department {ID = "A", Name = "A"},
new Department {ID = "B", Name = "B"}
};
}
}

Daniil
Mar 13, 2013, 5:58 AM
As I said previously Editor="true" doesn't work with a Panel. It expects a field.

You can use a BeforeBind listener as I demonstrated in the sample.

alscg
Mar 13, 2013, 6:44 AM
So as suggested by you,I am not using Panel now and trying to convert my code accordingly.





<ext:ComponentColumn runat="server" Flex="1" Editor="true" DataIndex="Value">
<Component>
<ext:NumberField runat="server" />
<ext:TextField runat="server" />
<ext:DateField runat="server" />
<ext:ComboBox runat="server">
<Items>
<ext:ListItem Text="Item1" />
<ext:ListItem Text="Item2" />
<ext:ListItem Text="Item3" />
<ext:ListItem Text="Item4" />
<ext:ListItem Text="Item5" />
</Items>
</ext:ComboBox>
<ext:Checkbox runat="server" />
</Component>
<Listeners>
<BeforeBind Handler="e.config = e.config[e.record.data.Index];" />
</Listeners>
<Renderer Handler="metadata.style='color:gray;'; return '[none]';" />
</ext:ComponentColumn>
</form>
</body>
</html>

I also want to have two component in my component column.So I have written following code in Razor



Html.X().ComponentColumn()
.ID("DestComponentColumn")
.DataIndex("DestComboField")
.Editor(true)
.Width(358)
.Height(47)
.Component(

Html.X().ComboBox()
.StoreID("StoreDestCombo")
.DisplayField("Name")
.ValueField("ID")
.Width(340),

Html.X().TextField()
.Width(340).ID("txtDest")
)


Its not allowing me to have two component in my component column.

Daniil
Mar 13, 2013, 6:52 AM
Do you need two fields to be visible at the same time?

alscg
Mar 13, 2013, 7:30 AM
Do you need two fields to be visible at the same time?

I was achieving my requirement by taking two component in a Panel and by DestinationRenderer checking the condition and hiding one of them.
It was working perfectly,but now as Editor= true not working,but I have to achieve the same.

In previously posted code you can see I have two component column in the grid,in first column I have only one combo box and in second I have two component.
But in second component column only one of them will visible at a time.Its like mapping first column data to second column.If first column combo has three item and second column has two item then on the third row second column will have text box,just like in
attached image.5801

And on OK button I have to fetch all the selected data.




var DestinationRenderer = function (column, cmp, record) {
debugger;
if (record.get('DestComboField') == "") {
cmp.componentLayout.owner.items.items[0].hide();
cmp.items.get(1).setValue(record.get("DestComboField"));
} else {
cmp.componentLayout.owner.items.items[1].hide();
cmp.items.get(0).setValue(record.get("DestComboField"))
}
};

.Component(Html.X().Panel()
.ID("DestinationPanel")
.Border(false)
.Items(
Html.X().ComboBox()
.StoreID("StoreDestCombo")
.DisplayField("Name")
.ValueField("ID")
. Width(340),

Html.X().TextField()
. Width(340).ID("txtDest") ))
.Listeners(ls => ls.Bind.Fn = "DestinationRenderer")

Daniil
Mar 13, 2013, 9:31 AM
If you need to show a single editor - TextField or ComboBox - in the column, not the two ones at the same.

Please use a BeforeBind listener.

Using another approach with a Panel you will have to implement editing logic manually. It will be much complicated.

alscg
Mar 13, 2013, 10:04 AM
If you need to show a single editor - TextField or ComboBox - in the column, not the two ones at the same.

Please use a BeforeBind listener.

Using another approach with a Panel you will have to implement editing logic manually. It will be much complicated.

If I am not going to use the Panel,then as I can see the multiple component into the component model in your sample code,that is giving error while I have converted in Razor.Component Column is not taking more than one component inside it.

I cannot use another component column in the Grid Panel,becoz I want either textbox or the combo in that particular column.
Then how will I use BeforeBind Listner in this case?

Daniil
Mar 13, 2013, 11:40 AM
Please use a Builder which applies an Action.

Example

<!DOCTYPE html>

<html>
<head>
<title>Ext.Net.MVC v2 Example</title>
</head>
<body>
@Html.X().ResourceManager()

@(Html.X().GridPanel()
.Height(200)
.Store(Html.X().Store()
.Fields("test")
.Data(new object[]
{
new { test = "test1" },
new { test = "test2" },
new { test = "test3" },
new { test = "test4" }
})
)
.ColumnModel(
Html.X().Column().Text("Test").DataIndex("test"),
Html.X().ComponentColumn()
.Component(c =>
{
c.Add(new TextField());
c.Add(new ComboBox());
}
)
.Listeners(events =>
events.BeforeBind.Handler = "e.config = e.config[e.rowIndex % 2];"
)
)
)
</body>
</html>

We added the two overloaded variants of builder. After updating from SVN trunk it will be possible.

Example

Html.X().ComponentColumn()
.Component(
Html.X().TextField(),
Html.X().ComboBox()
)
.Listeners(events =>
events.BeforeBind.Handler = "e.config = e.config[e.rowIndex % 2];"
)