PDA

View Full Version : [CLOSED] pin editor for checkbox



otouri
Jan 23, 2013, 2:18 PM
Hello i have the folowing grid panel where i would like to be able to edit all the rows using the pin editor.

using the sample provided herehttp://examples2.ext.net/#/GridPanel/ComponentColumn/Pin_Editor/.i was able to implement the following sample.

Unfortunately when I pin the row for edit i am not able to edit the check box.
Can you help please:



<ext:GridPanel ID="GridPanel1" runat="server"
Width="620" Height="300" >
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model ID="Model1" runat="server">
<Fields>
<ext:ModelField Name="Label" Type="String" />
<ext:ModelField Name="Value" Type="String" />
<ext:ModelField Name="Active" Type="Boolean">
<Convert Handler="return value === 'Y';" />
</ext:ModelField>
<ext:ModelField Name="Ranking" Type="String" />
</Fields>
</ext:Model>
</Model>
</ext:Store>
</Store>
<ColumnModel ID="ColumnModel1" runat="server">
<Columns>
<ext:ComponentColumn ID="ComponentColumn1" runat="server" Editor="true" OverOnly="true"
DataIndex="Label" Pin="true" Flex="1" Text="Label">
<Component>
<ext:TextField ID="TextField3" runat="server" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="ComponentColumn2" runat="server" Editor="true" OverOnly="true"
DataIndex="Value" Pin="true" Flex="1" Text="Value">
<Component>
<ext:TextField ID="TextField2" runat="server" />
</Component>
</ext:ComponentColumn>
<ext:CheckColumn ID="CheckColumn1" runat="server" Editor="true" OverOnly="true"
DataIndex="Active" Pin="true" Flex="1" Text="Active">

</ext:CheckColumn>
<ext:ComponentColumn ID="ComponentColumn4" runat="server" Editor="true" OverOnly="true"
DataIndex="Ranking" Pin="true" Flex="1" Text="Date">
<Component>
<ext:TextField ID="TextField1" runat="server" />
</Component>
</ext:ComponentColumn>
<ext:ComponentColumn ID="ComponentColumn5" runat="server" Width="25" PinAllColumns="false"
AutoWidthComponent="false" OverOnly="true">
<Component>
<ext:Button ID="Button1" runat="server" ToolTip="Pin editors" Icon="Pencil" AllowDepress="true"
EnableToggle="true">
<Listeners>
<Toggle Fn="pinEditors" />
</Listeners>
</ext:Button>
</Component>
</ext:ComponentColumn>
</Columns>
</ColumnModel>
</ext:GridPanel>

<script type="text/javascript">
var pinEditors = function (btn, pressed) {
var columnConfig = btn.column,
column = columnConfig.column;

if (pressed) {
column.pinOverComponent();
column.showComponent(columnConfig.record, true);
} else {
column.unpinOverComponent();
column.hideComponent(true);
}
};


</script>





protected void Page_Load(object sender, EventArgs e)
{
if (!X.IsAjaxRequest)
{
this.Store1.DataSource = new object[]
{
new object[] { "Account Name", "xxxxx", "Y", "1" },
new object[] { "Account Address", "xxxxx", "Y", "2" },
new object[] { "Bank", "xxxxx", "Y", "3" },
new object[] { "Bank Address", "xxxxx", "Y", "4" },
new object[] { "For Credit To", "xxxxx", "Y", "5" },
new object[] { "SWIFT Code", "xxxxx", "Y", "6" },
new object[] { "SWIFT BIC", "xxxxx", "Y", "7" },
new object[] { "Federal ABA Number", "xxxxx", "Y", "8" },
new object[] { "Account Number", "xxxxx", "Y", "9" },
new object[] { "Further Credit Account", "xxxxx", "Y", "10" },
new object[] { "ACH Routing Number", "xxxxx", "Y", "11" },
};

this.Store1.DataBind();
}
}

Daniil
Jan 23, 2013, 3:09 PM
Hi @otouri,

Pin editor doesn't support CheckColumn.

I can suggest this solution.


<ext:ComponentColumn
runat="server"
Text="Active"
DataIndex="Active"
Editor="true"
OverOnly="true"
Pin="true"
Flex="1">
<Renderer Fn="checkColumnRenderer" />
<Component>
<ext:Checkbox runat="server" />
</Component>
</ext:ComponentColumn>


var checkColumnRenderer = function (value) {
var cssPrefix = Ext.baseCSSPrefix,
cls = [cssPrefix + 'grid-checkheader'];

if (value) {
cls.push(cssPrefix + 'grid-checkheader-checked');
}

return '<div class="' + cls.join(' ') + '">*</div>';
};

otouri
Jan 23, 2013, 3:14 PM
Thank you, that worked.
You may close this thread