PDA

View Full Version : [OPEN] [#130] RadioGroup SetValue



softmachine2011
Sep 19, 2012, 1:47 PM
Hi,

Related with this thread http://forums.ext.net/showthread.php?14644 I adapted it to v2.1 but it doesn't works and doesn't check any radiobutton.



<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.GridPanel1.GetStore();
store.DataSource = new object[] {
new object[] { "0" },
new object[] { "1" },
new object[] { "2" }
};
store.DataBind();
}
}</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
var commandHandler = function (column, command, record, rowIndex, colIndex) {
switch (command) {
case "edit":
var cell = GridPanel1.getView().getCell(record, column);
Window1.rowIndex = rowIndex;
Window1.show();
Window1.getEl().alignTo(cell);
RadioGroup1.setValue(record.get('test'));
}
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
<Store>
<ext:Store runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="test" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" Text="Test" DataIndex="test">
<Commands>
<ext:ImageCommand CommandName="edit" Icon="TableEdit" />
</Commands>
<Listeners>
<Command Fn="commandHandler" />
</Listeners>
</ext:Column>
</Columns>
</ColumnModel>
</ext:GridPanel>
<ext:Window ID="Window1" runat="server" Title="Edit" Hidden="true">
<Items>
<ext:RadioGroup ID="RadioGroup1" runat="server" ColumnsNumber="1">
<Items>
<ext:Radio runat="server" BoxLabel="0" InputValue="0" />
<ext:Radio runat="server" BoxLabel="1" InputValue="1" />
<ext:Radio runat="server" BoxLabel="2" InputValue="2" />
</Items>
</ext:RadioGroup>
</Items>
<Listeners>
<Hide Handler="GridPanel1.getStore().getAt(this.rowIndex).set('te st', RadioGroup1.getValue().inputValue);" />
</Listeners>
</ext:Window>
</form>
</body>
</html>


What I have to pass to setValue method?

Daniil
Sep 19, 2012, 3:29 PM
Hi,

I can suggest to set:

GroupName="RadioGroup1"
for the RadioGroup.

Then replace

RadioGroup1.setValue(record.get('test'));
wtih

RadioGroup1.setValue({
RadioGroup1 : record.get('test')
});
and

<Hide Handler="GridPanel1.getStore().getAt(this.rowIndex).set('te st', RadioGroup1.getValue().inputValue);" />
with

<Hide Handler="GridPanel1.getStore().getAt(this.rowIndex).set('te st', RadioGroup1.getValue().RadioGroup1);" />
or

<Hide Handler="GridPanel1.getStore().getAt(this.rowIndex).set('te st', RadioGroup1.getChecked()[0].inputValue);" />

See also
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.RadioGroup-method-setValue
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.CheckboxGroup-method-getValue
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.CheckboxGroup-method-getChecked

softmachine2011
Sep 21, 2012, 9:59 AM
Well I thought that this example could be related with my final issue.

My case is the following, I have a gridpanel like this:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ext.Net Example</title>
<script type="text/javascript">
function checkHandler() {
return false;
}
</script>
<script runat="server">
public class SampleClass
{
public int Id { get; set; }
public string Name { get; set; }
public int State { get; set; }
}
protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
Store store = this.grid1.GetStore();
store.DataSource = new SampleClass[] {
new SampleClass { Id=33,Name="Object with State 0",State=0 } ,
new SampleClass { Id=45,Name="Object with State 1",State=1 } ,
new SampleClass { Id=52,Name="Object with State 2",State=2 }
};
store.DataBind();
}
}
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />
<ext:Viewport runat="server" Layout="FitLayout">
<Items>
<ext:GridPanel ID="grid1" runat="server" Header="false" Border="false">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button runat="server" Text="Sample button"></ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<Store>
<ext:Store ID="store1" runat="server">
<Model>
<ext:Model runat="server" IDProperty="Id">
<Fields>
<ext:ModelField Name="Id" Type="Int" />
<ext:ModelField Name="Name" Type="String" />
<ext:ModelField Name="State" Type="Int" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel runat="server">
<Columns>
<ext:Column runat="server" DataIndex="Id" Text="Id" Hidden="true" Hideable="false" />
<ext:Column runat="server" DataIndex="Name" Text="Name" Width="200">
<Renderer Handler="return Ext.util.Format.htmlEncode(value);" />
</ext:Column>
<ext:ComponentColumn runat="server" DataIndex="State" Width="250" Text="State">
<Component>
<ext:RadioGroup runat="server" ID="State" GroupName="State">
<Items>
<ext:Radio runat="server" InputValue="0" BoxLabel="State0">
<Listeners>
<Change Fn="checkHandler" />
</Listeners>
</ext:Radio>
<ext:Radio runat="server" InputValue="1" BoxLabel="State1">
<Listeners>
<Change Fn="checkHandler" />
</Listeners>
</ext:Radio>
<ext:Radio runat="server" InputValue="2" BoxLabel="State2">
<Listeners>
<Change Fn="checkHandler" />
</Listeners>
</ext:Radio>
</Items>
</ext:RadioGroup>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
<SelectionModel>
<ext:RowSelectionModel runat="server" SingleSelect="true" />
</SelectionModel>
</ext:GridPanel>
</Items>
</ext:Viewport>
</form>
</body>
</html>


And Radiogroup isn't databinding value as expected to check correct radio. This example binds store via c#, in my scenario store is bind by an ajaxproxy, I don't know if the solution could be different.

How could I perform it in v2.1?

Daniil
Sep 21, 2012, 12:40 PM
I am afraid there is no way to achieve it at the moment without overriding the ComponentColumn JavaScript class.

We will look how to add RadioGroup/CheckboxGroup support for ComponentColumn. But, unfortunately, I can't guarantee we will implement it and, also, I can't provide with any time frame. But it would definitely be a useful feature. Thank you for the question!

softmachine2011
Sep 26, 2012, 4:30 PM
Returning to the case...

Is there any way now, with a combobox or another column type or something similar to edit a integer value inline without clicking column to edit the value and only clicking directly to the control, and later save all modified rows with ajaxproxy sync method?

Or if you have got any idea it will be appreciated.

Thanks

Daniil
Sep 26, 2012, 7:45 PM
Please see the first column:
http://examples2.ext.net/#/GridPanel/ComponentColumn/Editor/

softmachine2011
Sep 27, 2012, 9:26 AM
Thanks Daniil.

Finally I use the combobox option in this example.

Daniil
Jan 18, 2013, 12:07 PM
We will look how to add RadioGroup/CheckboxGroup support for ComponentColumn. But, unfortunately, I can't guarantee we will implement it and, also, I can't provide with any time frame. But it would definitely be a useful feature.

Created a feature Issue.
https://github.com/extnet/Ext.NET/issues/130

But still no guarantee that we will implement it. So, not a priority. But it is definitely something which would be great to have built-in.