PDA

View Full Version : [CLOSED] Inline editing in GridPanel



vijay.sahu
Mar 20, 2013, 8:20 AM
Greetings,

I have a requirement of applying inline editting in a grid panel. Please refer attachment for more details.

On click of 'pencil' icon the respective gridrow will have textboxes and dropdowns whereever applicable and at the 'pencil' icon would be replaced by 'Save' and 'Cancel' buttons.

On 'Save' click, the editted data would be saved in the database and the grid will display the editted data.
On 'Cancel' click, the gridrow will be restored.

Any help for acheiving this requirement would be greatful.

Daniil
Mar 20, 2013, 10:40 AM
Hi @vijay.sahu,

Welcome to the Ext.NET forums!

The two main approaches we can suggest are a ComponentColumn and a RowEditing.
http://examples2.ext.net/#/GridPanel/ComponentColumn/Pin_Editor/
http://examples2.ext.net/#/GridPanel/Plugins/RowEditor/

I think using those controls it is possible to implement exactly the scenario you described.

vijay.sahu
Mar 20, 2013, 11:35 AM
Hi Daniil,

Thanks for the reply. My team has tried implementing the code given in both the links but it is not as per our requirement.

The pin editor sample code is very close to our requirement but the only change we require is we need to show all the edit/pencil buttons right at the beginning and not on hover of the row.

The only problem with row editor sample is that the update/save and cancel buttons are not shown on right hand columns but in the center of the grid.


We have uploaded a sample video which meets our expectations. Please refer the link below
http://122.169.102.111/CAFM/GridInlineAddEditVideo.swf


Hi @vijay.sahu,

Welcome to the Ext.NET forums!

The two main approaches we can suggest are a ComponentColumn and a RowEditing.
http://examples2.ext.net/#/GridPanel/ComponentColumn/Pin_Editor/
http://examples2.ext.net/#/GridPanel/Plugins/RowEditor/

I think using those controls it is possible to implement exactly the scenario you described.

Daniil
Mar 20, 2013, 1:34 PM
Thank you for the video. We don't the same example, but as I said it all should be possible to implement.



The pin editor sample code is very close to our requirement but the only change we require is we need to show all the edit/pencil buttons right at the beginning and not on hover of the row.


Please remove the OverOnly="true" for the last column and change the pinEditors function.

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.DataSource = new object[]
{
new object[] { 1, 1, "Text 1", DateTime.Now.Date },
new object[] { 2, 2, "Text 2", DateTime.Now.Date },
new object[] { 3, 3, "Text 3", DateTime.Now.Date },
new object[] { 4, 4, "Text 4", DateTime.Now.Date },
new object[] { 5, 5, "Text 5", DateTime.Now.Date },
new object[] { 6, 6, "Text 6", DateTime.Now.Date },
new object[] { 7, 7, "Text 7", DateTime.Now.Date },
new object[] { 8, 8, "Text 8", DateTime.Now.Date },
new object[] { 9, 9, "Text 9", DateTime.Now.Date }
};

this.Store1.DataBind();
}
}
</script>

<!DOCTYPE html>

<html>
<head runat="server">
<title>ComponentColumn Pin Editor - Ext.NET Examples</title>

<script>
var pinEditors = function (btn, pressed) {
var columnConfig = btn.column,
record = columnConfig.record,
columns = columnConfig.grid.getView().getHeaderCt().getGridC olumns();

Ext.each(columns, function (column) {
if (column != this && column.showComponent) {
column[pressed ? "showComponent" : "hideComponent"](record);
}
}, this);
};
</script>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" />

<h1>ComponentColumn as Pin Editor</h1>

<ext:GridPanel
ID="GridPanel1"
runat="server"
Title="ComponentColumn Pin Editor"
Width="620"
Height="300">
<Store>
<ext:Store ID="Store1" runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField Name="IntField" Type="Int" />
<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"
OverOnly="true"
DataIndex="IntField"
Pin="true"
Flex="1"
Text="Integer">
<Component>
<ext:NumberField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
OverOnly="true"
DataIndex="ComboField"
Pin="true"
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"
OverOnly="true"
DataIndex="TextField"
Pin="true"
Flex="1"
Text="Text">
<Component>
<ext:TextField runat="server" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Editor="true"
OverOnly="true"
DataIndex="DateField"
Pin="true"
Flex="1"
Text="Date">
<Renderer Format="Date" FormatArgs="'d/m/Y'" />
<Component>
<ext:DateField runat="server" Format="dd/MM/yyyy" />
</Component>
</ext:ComponentColumn>

<ext:ComponentColumn
runat="server"
Width="25"
PinAllColumns="false"
AutoWidthComponent="false">
<Component>
<ext:Button
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>
</form>
</body>
</html>

vijay.sahu
Mar 21, 2013, 8:16 AM
Thanks for the code Daniil. Your code is very close to how the UI should work on load but we have a little more requirement than this.

I did few modifications in your code just to fit in our requirement. I added two buttons 'Save' and 'Cancel' in the last component column and have set them as hidden. Please refer the below mentioned code.


<ext:ComponentColumn ID="ComponentColumn5" runat="server" Width="25" PinAllColumns="false"
AutoWidthComponent="false">
<Component>
<ext:Panel ID="panel1" runat="server">
<Items>
<ext:Button ID="btnEdit" runat="server" ToolTip="Edit" Icon="Pencil" EnableToggle="true">
<Listeners>
<Toggle Fn="pinEditors" />
</Listeners>
</ext:Button>
<%--this button will save the record in db--%>
<ext:Button ID="btnSave" runat="server" ToolTip="Save" Icon="Disk" AllowDepress="true"
Hidden="true" HideMode="Visibility" EnableToggle="true">
</ext:Button>
<%--this button will cancel the edit mode--%>
<ext:Button ID="btnCancel" runat="server" ToolTip="Cancel" Icon="Cancel" AllowDepress="true"
Hidden="true" HideMode="Visibility" EnableToggle="true">
</ext:Button>
</Items>
</ext:Panel>
</Component>
</ext:ComponentColumn>

On click of edit, both save and cancel buttons would become visible and the edit button would be hidden.
On click of save, a direct event would be called which would save the modifications done in db, hide the save and cancel buttons and edit button would be visible.
On click of cancel, both the save and cancel buttons would be hidden and edit button would become visible.

Daniil
Mar 21, 2013, 11:15 AM
To show/hide the Buttons, please use the show/hide methods.

Regarding saving.

Yes, you can call a DirectEvent to save. You will need to pass the changed data via ExtraParams.

Or you can investigate a possibility to use the built-in and comprehensive saving mechanism.
http://examples2.ext.net/#/search/saving