What's New?

[CLOSED] RowEditor - Insert New Row

  1. #1
    Oct 05, 2010, 12:42 AM

    [CLOSED] RowEditor - Insert New Row

    I am using the RowEditor plugin with my grid. I was able to make it work for Update and Delete using store event -
    GridBeforeChanged - to perform saves
    However After adding a new row, and cliking on Save in RowEditor, the GridBeforeChanged will not get fired unless I add a listener for AfterEdit in RowEditor that calls grid.save().

    So I am checking to see if that is the correct way to approach this. Here is my code. Thanks

    as a note, I am using 2 commandcolumn - one for Delete and for Change



    <%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Roles.aspx.cs"Inherits="Roles" %>
<%@RegisterAssembly="Ext.Net"Namespace="Ext.Net"TagPrefix="ext" %>
<%@RegisterAssembly="Ext.Net.UX"Namespace="Ext.Net.UX"TagPrefix="ux" %>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>Roles</title>
 
<ext:ResourcePlaceHolderID="ScriptContainer1"runat="server"Mode="ScriptFiles">
<linkhref='<%= ResolveUrl("~/css/validation.css") %>'rel="stylesheet"type="text/css"/>
</ext:ResourcePlaceHolder>
 
<styletype="text/css">
.dirty-row {
background: #FFFDD8;
}
 
.new-row {
background: #c8ffc8;
} 
</style>
　
<ext:XScriptID="XScript1"runat="server">
<scripttype="text/javascript">
    var commandHandler = function(command, record, row) {
if (record != null) {
//Ext.Msg.alert(command, record.RoleId);
}
else {
//Ext.Msg.alert(command, "-1");
}
var url = "";
switch (command) {
case"Delete":
var grid = #{grid2};
grid.getRowEditor().stopEditing(); 
 
if (Ext.Msg.confirm('Delete...', String.format('Delete Role - {0}', record.RoleName), function(btn) {
if (btn == 'yes')
{ grid.deleteSelected(); grid.save(); }
//{ grid.deleteSelected(); }
}
)
);
break;
case"Add":
var grid = #{grid2};
grid.getRowEditor().stopEditing();
grid.insertRecord(0, {
RoleId : "00000000-0000-0000-0000-000000000000",
RoleName : "Role"
});
//grid.insertRecord();
 
grid.getView().refresh();
grid.getSelectionModel().selectRow(0);
grid.getRowEditor().startEditing(0);
break;
case"Edit":
if (record != null) {
//var colIndex = 1;
//var rowIndex = grid2.store.indexOf(record);
//grid2.getColumnModel().setEditable(colIndex, true);
//grid2.startEditing(rowIndex, colIndex);
}
var grid = #{grid2}; 
grid.getRowEditor().stopEditing(); 
grid.getSelectionModel().selectRow(row); 
grid.getRowEditor().startEditing(row); 
 
break;
}
}
</script>
</ext:XScript>
 
</head>
<body>
<formid="form1"runat="server">
<scripttype="text/javascript">
var getRowClass = function (record) {
if (record.newRecord) {
return"new-row";
}
 
if (record.dirty) {
return"dirty-row";
}
}
</script>
 
<ext:ResourceManagerID="ResourceManager1"runat="server"Theme="Gray"/>
 
<ext:StoreID="store1"runat="server"AutoLoad="true"AutoSave="false"ShowWarningOnFailure="false"
SkipIdForNewRecords="false"RefreshAfterSaving="None"OnRefreshData="GridRefresh"
OnAfterDirectEvent="AfterUpdate"OnBeforeStoreChanged="GridBeforeChanged">
<Reader>
<ext:JsonReaderIDProperty="RoleId">
<Fields>
<ext:RecordFieldName="RoleId"/>
<ext:RecordFieldName="RoleName"/>
<ext:RecordFieldName="Description"/>
</Fields>
</ext:JsonReader>
</Reader>
<Listeners>
<LoadExceptionHandler="var e = e || {message: response.responseText}; alert('Load failed: ' + e.message);"/>
<SaveHandler=" Ext.net.Notification.show({
iconCls : 'icon-information', 
html : arg.message, 
title : 'Roles', 
hideDelay : 5000
});"/>
<CommitFailedHandler="store1.rejectChanges();"/>
</Listeners>
<SortInfoField="RoleName"Direction="ASC"/>
</ext:Store>
 
<ext:ViewportID="Viewport1"runat="server"Layout="Fit">
<Items>
<ext:PanelID="pnlOuter"runat="server"Title=" "Header="false"BodyStyle="padding:0px 0px 0px 0px;"
ButtonAlign="Center"Layout="Fit">
<Items>
<ext:GridPanelID="grid2"runat="server"AutoScroll="true"TrackMouseOver="true"
StripeRows="true"AutoExpandColumn="Description"ClicksToEdit="1"StoreID="store1">
<ColumnModelID="ColumnModel1"runat="server">
<Columns>
<ext:ColumnHeader="Role Name"ColumnID="RoleName"DataIndex="RoleName"Width="180">
<Editor>
<ext:TextFieldID="TextField1"runat="server"/>
</Editor>
</ext:Column>
<ext:ColumnHeader="Description"ColumnID="Description"DataIndex="Description"Width="280">
<Editor>
<ext:TextFieldID="TextField2"runat="server"/>
</Editor>
</ext:Column>
<ext:CommandColumnWidth="110"Header="Actions"Align="Center"MenuDisabled="true"
Resizable="false"Editable="false">
<Commands>
<ext:GridCommandCommandName="Edit"Text="Change">
<ToolTipText="Change"/>
</ext:GridCommand>
<ext:CommandSeparator/>
<ext:GridCommandCommandName="Delete"Text="Delete">
<ToolTipText="Delete"/>
</ext:GridCommand>
</Commands>
</ext:CommandColumn>
</Columns>
</ColumnModel>
<View>
<ext:GridViewID="GridView1"runat="server"MarkDirty="true">
<GetRowClassFn="getRowClass"/>
</ext:GridView>
</View>
<SelectionModel>
<ext:RowSelectionModelID="RowSelectionModel1"runat="server"SingleSelect="true"MoveEditorOnEnter="true">
<DirectEvents>
<RowSelectOnEvent="grid_RowSelectedChanged">
<ExtraParams>
<ext:ParameterName="RecID"Value="this.getSelected().data['RoleId']"Mode="Raw"/>
</ExtraParams>
<EventMaskShowMask="false"/>
</RowSelect>
</DirectEvents>
<Listeners>
<%-- 
<RowSelect Handler="alert('RowSelect'); " /> 
--%>
</Listeners>
</ext:RowSelectionModel>
</SelectionModel>
<Plugins>
<ext:RowEditorrunat="server"SaveText="Save"onRowDblClick="={Ext.emptyFn}"onRowClick="={Ext.emptyFn}"
ClicksToEdit="1"MonitorValid="true">
<Listeners>
<AfterEditHandler="#{grid2}.save();"Delay="100"/>
</Listeners>
</ext:RowEditor>
<ext:GridFilters>
<Filters>
<ext:StringFilterDataIndex="RoleName"/>
</Filters>
</ext:GridFilters>
</Plugins>
<LoadMaskShowMask="true"/>
<SaveMaskShowMask="true"/>
<Listeners>
<CommandHandler="#{grid2}.getSelectionModel().selectRow(rowIndex);commandHandler(command,record.data,rowIndex);"/>
</Listeners>
<TopBar>
<ext:ToolbarID="Toolbar2"runat="server">
<Items>
<ext:ButtonID="ToolbarButton2"runat="server"Text="Add"AutoPostBack="false"Icon="Add">
<Listeners>
<ClickHandler="commandHandler('Add', null, null);"Delay="100"/>
</Listeners>
</ext:Button>
<ext:ToolbarSeparator/>
<ext:ButtonID="ToolbarButton3"runat="server"Text="Refresh"AutoPostBack="false"
Icon="ArrowRefresh">
<Listeners>
<ClickHandler="#{grid2}.reload();"/>
</Listeners>
</ext:Button>
<ext:ToolbarSeparator/>
</Items>
</ext:Toolbar>
</TopBar>
<BottomBar>
<ext:PagingToolbarID="PagingToolbar1"runat="server"PageSize="20"StoreID="store1"
DisplayInfo="true"AutoWidth="true"/>
</BottomBar>
</ext:GridPanel>
</Items>
</ext:Panel>
</Items>
</ext:Viewport>
 
</form>
</body>
</html>
    Last edited by Daniil; Oct 06, 2010 at 3:03 PM. Reason: [CLOSED]
  2. #2
    Oct 05, 2010, 9:34 AM
    Hi idrissb,

    The code that you provided is not runnable. Needing space characters are missed there.
    Please try to copy your code to NotePad before posting on the forum. It should solve the issue.

    Calling the GridPanel's save method in the AfterEdit handler looks as a good solution.

    Also please note that invoking of selectRow method before startEditing is unnecessary thing.

    //grid.getSelectionModel().selectRow(row); //unnecessary

grid.getRowEditor().startEditing(row);
  3. #3
    Oct 05, 2010, 1:36 PM
    I won't repost since you think my solution is good unless it would help you test the insert scenario. it seems to me that the event should fire on insert as well without having to call AfterEdit.

    Also one more point, I tried setting AutoSave="true" in store, and it does fire the event however, it is fires twice, once as soon as the row editor becomes visible and then again when you click Save which I believe is an issue.

    I will be happy to repost sample if it helps.

    thanks

    Idriss
  4. #4
    Oct 05, 2010, 2:16 PM
    When AutoSave is true the event is fired twice when a row is added (.insertRecord()) and when this row is edited.

    I think the best way in your case is setting AutoSave to false (or just remove this property) and calling the .save() method always when it needs.
    Also it would help to make logic more clear.
  5. #5
    Oct 05, 2010, 6:53 PM
    thanks.
    please mark as solved
    idriss
  6. #6
    Oct 05, 2010, 7:11 PM
    Hi,

    Please note that you can set AllowBlank="false" for required RecordField, in this case the save request (if you have AutoSave="true") will not be initiated until the record is valid
    Please see
    https://examples1.ext.net/#/GridPanel/Update/AutoSave/

Similar Threads

  1. [CLOSED] How I insert a button in ext.net.Notification?
    By supera in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 20, 2012, 5:50 PM
  2. [CLOSED] enable INSERT Key
    By rnfigueira in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Apr 18, 2011, 6:08 PM
  3. [CLOSED] Insert only the icon
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 01, 2011, 4:13 PM
  4. [CLOSED] insert record
    By 78fede78 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 12, 2010, 4:08 PM
  5. [CLOSED] Insert Record into grid
    By sharif in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 08, 2010, 2:16 PM

Posting Permissions