Grid panel: inserting data via store and objectdatasource fails

[Manni]

I can view and edit existing records in a grid panel, but I cannot create a new record in the database.
Here is my basic example:

Store:

<ext:Store ID="storeTest" runat="server" DataSourceID="odsTest"  ShowWarningOnFailure="true"  RefreshAfterSaving="True">
                <Model>
                      <ext:Model ID="modelTest" runat="server" IDProperty="ID" Name="Test" >
                          <Fields>
                              <ext:ModelField Name="ID" Type="Int"/>       
                              <ext:ModelField Name="IntValue" Type="Int"/>       
                              <ext:ModelField Name="StringValue"  Type="String"/>    
                          </Fields>
                      </ext:Model>
                </Model>
                <Listeners>
                    <Exception Handler="Ext.Msg.alert('Operation failed', operation.getError());" />                
                    <Write Handler="Ext.Msg.alert('Write', 'The data successfully saved');" />
                </Listeners>
  </ext:Store>

The grid panel:

    <ext:GridPanel ID="gridPanelTest"  runat="server"  Title="Test" 
            Frame="true"  StoreID="storeTest"
            Height="600">
            <ColumnModel ID="columnModelTest" runat="server">
                <Columns>
                    <ext:Column ID="Column1" runat="server" DataIndex="ID" Text="ID" Width="100"    />
                    <ext:Column ID="Column2" runat="server" DataIndex="IntValue" Text="IntValue" Width="150">
                        <Editor>
                            <ext:TextField ID="TextField1" runat="server" />
                        </Editor>
                    </ext:Column>
                    <ext:Column ID="Column3" runat="server" DataIndex="StringValue" Text="StringValue" Width="150">
                        <Editor>
                            <ext:TextField ID="TextField2" runat="server" />
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <View>
                <ext:GridView ID="gvTest" runat="server"  >
                    <GetRowClass Handler="return 'x-grid-row-expanded';" />
                </ext:GridView>  
                      
            </View>  
            <SelectionModel>
                <ext:RowSelectionModel ID="RowSelectionModelTest" runat="server" Mode="Multi" />
            </SelectionModel>
            <BottomBar>
                <ext:PagingToolbar ID="PagingToolbarTest" 
                    runat="server"                                              
                    StoreID="storeTest" 
                    DisplayInfo="false" 
                    />
            </BottomBar>
            <TopBar>
                <ext:Toolbar ID="topToolbarTest" runat="server">
                    <Items>
                        <ext:Button ID="btnAddTest" runat="server" Text="Add" Icon="Add">
                        <Listeners>
                            <Click Fn="addTest" />
                        </Listeners>
                    </ext:Button>
                   <ext:Button ID="btnSaveTest" runat="server"  Text="Save" Icon="Disk">
                        <Listeners>
                            <Click Handler="#{storeTest}.sync();" />
                        </Listeners>
                      </ext:Button>
                    </Items>
                </ext:Toolbar>
            </TopBar>
            <Plugins>
                <ext:RowEditing ID="RowEditingTest" runat="server" ClicksToMoveEditor="1" AutoCancel="false" />
            </Plugins>
        </ext:GridPanel>

The javascript:

 <ext:XScript ID="XScript1" runat="server">
      <script type="text/javascript">
            var addTest = function () {
                var grid = #{gridPanelTest};
                grid.editingPlugin.cancelEdit();
                var numrow = grid.getStore().getCount();
                var newRecord = Ext.ModelManager.create({
                    ID: numrow+1,     // database identity started with 1......
                    IntValue: 1234,
                    StringValue: "testing",
                }, 'Test');
                grid.store.insert(numrow, newRecord);
                grid.editingPlugin.startEdit(numrow, 0);
            }
      </script>
</ext:XScript>

And finally the object data source:

  <asp:ObjectDataSource ID="odsTest" runat="server" 
                     InsertMethod="InsertTest" 
                     SelectMethod="SelectTest" 
                     UpdateMethod="UpdateTest"
                     TypeName="Test.Models.Notes">
        <InsertParameters>
            <asp:Parameter Name="IntValue" Type="Int32" />
            <asp:Parameter Name="StringValue" Type="String" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="ID" Type="Int32" />
            <asp:Parameter Name="IntValue" Type="Int32" />
            <asp:Parameter Name="StringValue" Type="String" />
        </UpdateParameters>
    </asp:ObjectDataSource>
    </form>

The InsertMethod is not hit when clicking on the btnSaveTest button. Is the call to #{storeTest}.sync(); supposed to update the store and then trigger the call to the InsertMethode?

Is there a better/cleaner way to implement this?

Any suggestions are greately appreciated!
Manni

[Vladimir]

Saving with data source control works fine for me
For example, see
https://examples2.ext.net/#/GridPane...SqlDataSource/

Please provide full test sample (which we can test without any changes)

[Manni]

Thanks for your response, Vladimir. I had looked at the SqlDataSourceExample before.

I finally got it to work with the following changes:

1. Changed the listener for the btnAddTest button to:

<Click Handler="#{storeTest}.insert(0, new (Test)); #{gridPanelTest}.editingPlugin.startEdit(0, 0);" />

2. Added code to retrieve the newly inserted ID and made it available in the store to avoid the "Status Code: 200Status Text: BADRESPONSE: Syntax error {serviceResponse:{success:false,message:"System.Ex ception: Key value is not defined for inserted record..." error:

private string insertedValue;

protected void storeTest_AfterRecordInserted(object sender, Ext.Net.AfterRecordInsertedEventArgs e)
{
    if (!string.IsNullOrEmpty(insertedValue))
    {
         e.Keys.Add("ID", insertedValue);
         insertedValue="";
     }
}

protected void odsTest_Inserted(object sender, ObjectDataSourceStatusEventArgs e)
{
    insertedValue = e.ReturnValue.ToString();
}

3. I also added the ID to the InsertParameters in the store. I found this rather strange but without it, I got the Key value is not defined for inserted record.. as well.

  <asp:ObjectDataSource ID="odsTest" runat="server" InsertMethod="InsertTest" SelectMethod="SelectTest" TypeName="Test.Models.Notes" UpdateMethod="UpdateTest" OnInserted="odsTest_Inserted">
        <InsertParameters>
            <asp:Parameter Name="ID" Type="Int32" />
            <asp:Parameter Name="IntValue" Type="Int32" />
            <asp:Parameter Name="StringValue" Type="String" />
        </InsertParameters>
        <UpdateParameters>
            <asp:Parameter Name="ID" Type="Int32" />
            <asp:Parameter Name="IntValue" Type="Int32" />
            <asp:Parameter Name="StringValue" Type="String" />
        </UpdateParameters>
    </asp:ObjectDataSource>

I would appreciate any suggestions to improve the code or pointing out any pitfalls or mistakes that I am not aware of.
Thanks.
Manni

[Vladimir]

ID field is not required in InsertParameters
What signature of InsertTest method?

[watteeuw]

Seems you are filling the ID "manually" in AddTest script

Try remove IDProperty="ID" from store.
Otherwise seems that the store considers the record as complete and the insert to database is not fired.

[Manni]

@Vladimir:

ID field is not required in InsertParameters
What signature of InsertTest method?

I agree that the ID should not be required as it is not with ASP.NET. I will investigate further and remove the ID also from the method.

 public int InsertTest(int ID, int IntValue, string StringValue)

@watteeuw:

Seems you are filling the ID "manually" in AddTest script

Try remove IDProperty="ID" from store.
Otherwise seems that the store considers the record as complete and the insert to database is not fired.

I will try your suggestion and remove the IDProperty from the store. However, I thought this it is required for identify the ID for the update method.

Thank you both for your insight.

[Vladimir]

Why 'int ID' is presented in signature of InsertTest method?
Try to remove it

[Manni]

Why 'int ID' is presented in signature of InsertTest method?
Try to remove it

When I remove it, I get the following error: Status Code: 200Status Text: BADRESPONSE: Syntax error {serviceResponse:{success:false,message:"System.Ex ception: Key value is not defined for inserted record..."

I also removed the IDProperty="ID" from the model as suggested by watteeuw, same error.

Because of this error message, I decided to add int ID to make it work.

[Vladimir]

The problem that you ID is defined as field therefore id is passed to insert method
If you remove id from the field then it will not be passed

[Manni]

If I remove the ID from the ModelField, how would the ID in UpdateParameters then be populated?