Hi Nadia,

Thanks for the code samples.  They helped.  I tried implementing the one that adds a row using a button and nothing happens when I click the button.

I need to add the row to a database then trigger a rebinding to the grid so that the new row is seen on the grid.  When I click the button, nothing happens.  I tried stepping thru the function and the it never gets to the function.

This is my table that adds the data:

 <table style="width: 875px; background-color:#F0F8FF; text-align:left;">
            <tr>
                <td colspan="4" align="left" class="style1">
                    <b>Add New Office:</b>
                </td>
            </tr>
            <tr>
                <td>
                    Address Prefix:
                </td>
                <td>
                    <asp:TextBox ID="txtAddressPrefix" runat="server" Text="" ClientIDMode="Static" />
                </td>
                <td>
                    Address:
                </td>
                <td>
                    <asp:TextBox ID="txtAddress" runat="server" Text="" ClientIDMode="Static" />
                </td>
            </tr>
            <tr>
                <td>
                    Address Suffix:
                </td>
                <td>
                    <asp:TextBox ID="txtAddressSuffix" runat="server" Text="" ClientIDMode="Static" />
                </td>
                <td>
                    City:
                </td>
                <td>
                    <asp:TextBox ID="txtCity" runat="server" Text="" ClientIDMode="Static" />
                </td>
            </tr>
            <tr>
                <td>
                    City Mailing:
                </td>
                <td>
                    <asp:TextBox ID="txtCityMailing" runat="server" Text="" ClientIDMode="Static" />
                </td>
                <td>
                    State:
                </td>
                <td>
                    <asp:TextBox ID="txtState" runat="server" Text="" ClientIDMode="Static" />
                </td>
            </tr>
            <tr>
                <td>
                    Zip:
                </td>
                <td>
                    <asp:TextBox ID="txtZip" runat="server" Text="" ClientIDMode="Static" />
                </td>
                <td>
                    County ID:
                </td>
                <td>
                    <asp:DropDownList ID="ddlCounty" runat="server"
                        DataSourceID="SqlDataSource3"
                        DataValueField="ID"
                        DataTextField="Name" ClientIDMode="Static">
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    Lat:
                </td>
                <td>
                    <asp:TextBox ID="txtLat" runat="server" Text="" ClientIDMode="Static" />
                    <asp:MaskedEditExtender ID="MaskedEditExtender3" runat="server" MaskType="Number"
                        TargetControlID="txtLat" Mask="99\.999999999" AcceptNegative="Left">
                    </asp:MaskedEditExtender>
                </td>
                <td>
                    Long:
                </td>
                <td>
                    <asp:TextBox ID="txtLong" runat="server" Text="" ClientIDMode="Static" />
                    <asp:MaskedEditExtender ID="MaskedEditExtender4" runat="server" MaskType="Number"
                        TargetControlID="txtLong" Mask="99\.999999999" AcceptNegative="Left">
                    </asp:MaskedEditExtender>
                </td>
            </tr>
            <tr>
                <td colspan="4" align="left">
                    <asp:Button ID="btnAddOffice" runat="server" OnClientClick="addRow" Text="Add" ClientIDMode="Static" />
                </td>
            </tr>
        </table>

This is the function that should trigger when the button is clicked:

 function addRow() {
            debugger;
            var txtAddressPrefix = $find("txtAddressPrefix").value;
            var txtAddress = $find("txtAddress").value;
            var txtAddressSuffix = $find("txtAddressSuffix").value;
            var txtCity = $find("txtCity").value;
            var txtCityMailing = $find("txtCityMailing").value;
            var txtState = $find("txtState").value;
            var txtZip = $find("txtZip").value;
            var txtCounty = " ";
            var txtLat = $find("txtLat").value;
            var txtLong = $find("txtLong").value;

            var grid = $find("wdgOffice");

            var rows = grid.get_rows();
            var rowsLength = grid.get_length();
            // Create array of cell values for all values that cannot be null.
            var row = new Array(txtAddressPrefix, txtAddress, txtAddressSuffix, txtCity, txtCityMailing, txtState, txtZip, txtCounty, txtLat, txtLong);

            // Add row.
            rows.add(row);
            var lastRow = rows.get_row(rowsLength);
            var cell = lastRow.get_cell(1);
            grid.get_behaviors().get_editingCore().get_behaviors().get_cellEditing().enterEditMode(cell);
        }

This is the data source of the grid.  I have select and update commands that work.  I would like the insert command to work in the same way, if this is possible.

<asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:CAP06 %>"
        SelectCommand="phyadmGetOffices2" SelectCommandType="StoredProcedure"
        UpdateCommand="phyadmSetOffices" UpdateCommandType="StoredProcedure"
        InsertCommand="phyadmInsOffices" InsertCommandType="StoredProcedure">       
        <UpdateParameters>
            <asp:Parameter Name="ID" Type="Int32" />
            <asp:Parameter Name="AddressPrefix" Type="String" />
            <asp:Parameter Name="Address" Type="String" />      
            <asp:Parameter Name="AddressSuffix" Type="String" />
            <asp:Parameter Name="City" Type="String" />
            <asp:Parameter Name="CityMailing" Type="String" />
            <asp:Parameter Name="State" Type="String" />
            <asp:Parameter Name="Zip" Type="String" />
            <asp:ControlParameter Name="CountyID" ControlID="hidCountyID" Type="Int32" PropertyName="SelectedValue" />
            <asp:Parameter Name="Lat" Type="Decimal" />
            <asp:Parameter Name="Long" Type="Decimal" />               
        </UpdateParameters>
        <InsertParameters>
            <asp:Parameter Name="ID" Type="Int32" />
            <asp:Parameter Name="AddressPrefix" Type="String" />
            <asp:Parameter Name="Address" Type="String" />      
            <asp:Parameter Name="AddressSuffix" Type="String" />
            <asp:Parameter Name="City" Type="String" />
            <asp:Parameter Name="CityMailing" Type="String" />
            <asp:Parameter Name="State" Type="String" />
            <asp:Parameter Name="Zip" Type="String" />
            <asp:ControlParameter Name="CountyID" ControlID="ddlCounty" Type="Int32" PropertyName="SelectedValue" />
            <asp:Parameter Name="Lat" Type="Decimal" />
            <asp:Parameter Name="Long" Type="Decimal" />    
        </InsertParameters>
    </asp:SqlDataSource>

Can you see why the javascript function is not triggered when I click the button?

Thanks for all of your help!

Hi Gloria,

I am sending you a small sample with adding a new row with button click.

The other way is when the new row is opened in edit mode to set values for the hidden column (this is also added in the sample)

Please let me know if I can provide any further assistance.

I am trying to implement the client side javascript to add a row that will allow a user to insert a row that has hidden fields.

This is my BLOCKED SCRIPT

 function addRow() {
            var grid = $find("wdgOffice");
            var rows = grid.get_rows();
            var rowsLength = grid.get_length();
            // Create array of cell values for all values that cannot be null.
            var row = new Array("AddressPrefix", "Address", "AddressSuffix", "City", "CityMailing", "State", "Zip", "CountyID", "Lat", "Long");

            // Add row.
            rows.add(row);
            var lastRow = rows.get_row(rowsLength);
            var cell = lastRow.get_cell(1);
            grid.get_behaviors().get_editingCore().get_behaviors().get_cellEditing().enterEditMode(cell);
        }

This is the markup that calls the addRow function:

<ig:RowAdding Alignment="Bottom" AddNewRowClientEvents-Initialize="addRow" >
                            <EditModeActions EnableOnActive="true" />

 </ig:RowAdding>

When I run the code, only a blank page displays.  Without the addRow function the grid displays correctly.

How do I call the javascript function to add a row to the grid?

Thanks.

Thanks for replying to my post.

I can't use default values because I have to allow the user to enter values into all of the hidden fields.

I will look into adding the row programmatically.  Can I add a row programmatically to the top of the grid using the hidden fields to allow the user to enter values.

In addition, one of the fields will be a dropdown list.  Is this allowed?

There is a field in the RowAddingColumnSetting that is 'EditorID'.  Can I create edit fields and assign the ids to the add row?

Thanks,

Gloria