ASPxGridView doesnot get updated on submitting FormLayout field values through submit button

Question

I have FormLayout element and ASPxGridView element (these are devExpress elements) on the same page as shown in Figure below: Screenshot of my web Application When I Enter Values for date and reading the value gets stored in database but the ASPxGridView below the form does not get update unless I re-run the project. Any help in this regard is well appreciated. Regards. My .aspx and vb codes are given below:

.aspx code

\<%@ Page Title="" Language="VB" MasterPageFile="\~/Site.master" AutoEventWireup="false" CodeFile="meter_reading.aspx.vb" Inherits="Default2" %\>

\<%@ Register Assembly="DevExpress.Web.Bootstrap.v22.1, Version=22.1.5.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a" Namespace="DevExpress.Web.Bootstrap" TagPrefix="dx" %\>

\<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" Runat="Server"\>

     <div class="content-wrapper">

        <dx:ASPxFormLayout ID="ASPxFormLayout1" runat="server" ClientInstanceName="ASPxFormLayout1">
            <Items>
                <dx:LayoutItem Caption="Date" ColSpan="1" Name="cbo_date">
                    <LayoutItemNestedControlCollection>
                        <dx:LayoutItemNestedControlContainer runat="server">
                            <dx:ASPxDateEdit ID="date" runat="server" ClientInstanceName="date">
                            </dx:ASPxDateEdit>
                        </dx:LayoutItemNestedControlContainer>
                    </LayoutItemNestedControlCollection>
                </dx:LayoutItem>
                <dx:LayoutItem Caption="reading" ColSpan="1" Name="txt_reading" RequiredMarkDisplayMode="Required" HelpText="enter reading">
                    <LayoutItemNestedControlCollection>
                        <dx:LayoutItemNestedControlContainer runat="server">
                            <dx:ASPxTextBox ID="txt_reading" runat="server" ClientInstanceName="txt_reading">
                                <ValidationSettings>
                                    <RegularExpression ErrorText="Enter a Decimal number" ValidationExpression="\d+" />
                                    <RequiredField IsRequired="True" ErrorText="This field is mandatory" />
                                </ValidationSettings>
                            </dx:ASPxTextBox>
                        </dx:LayoutItemNestedControlContainer>
                    </LayoutItemNestedControlCollection>
                </dx:LayoutItem>
                <dx:LayoutItem Caption="" ColSpan="1" Name="btn_submit">
                    <LayoutItemNestedControlCollection>
                        <dx:LayoutItemNestedControlContainer runat="server">
                            <dx:ASPxButton ID="btn_submit" runat="server" Text="Submit" ClientInstanceName="btn_submit">
                                <ClientSideEvents Click="onClick"/>
                                <%--<ClientSideEvents Click="function(s, e) {
                                    txt_reading.Text = "";
                                    date.Value = "null";--%>
    
<%--}" />--%>
                            </dx:ASPxButton>
                        </dx:LayoutItemNestedControlContainer>
                    </LayoutItemNestedControlCollection>
                </dx:LayoutItem>
            </Items>
        </dx:ASPxFormLayout>

    </div>
    <div class="content-wrapper">
        <dx:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False" DataSourceID="Energy_ds" KeyFieldName="ID" Width="700px" ClientInstanceName="ASPxGridView1" CssClass="col-lg-1" EnablePagingCallbackAnimation="True" Caption="Data Record">
            <Settings ShowFooter="True" ShowGroupFooter="VisibleIfExpanded" />
<SettingsPopup>
    <EditForm Modal="True">
    </EditForm>
<FilterControl AutoUpdatePosition="False"></FilterControl>
</SettingsPopup>
            <SettingsSearchPanel Visible="True" />
            <Columns>
                <dx:GridViewCommandColumn ShowDeleteButton="True" ShowEditButton="True" ShowNewButtonInHeader="True" VisibleIndex="0">
                </dx:GridViewCommandColumn>
                <dx:GridViewDataTextColumn FieldName="ID" ReadOnly="True" ShowInCustomizationForm="True" Visible="False" VisibleIndex="1">
                    <EditFormSettings Visible="False" />
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataDateColumn FieldName="date" ShowInCustomizationForm="True" VisibleIndex="2">
                </dx:GridViewDataDateColumn>
                <dx:GridViewDataTextColumn FieldName="reading" ShowInCustomizationForm="True" VisibleIndex="3">
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="price" ReadOnly="True" ShowInCustomizationForm="True" VisibleIndex="4">
                    <EditFormSettings Visible="False" />
                </dx:GridViewDataTextColumn>
                <dx:GridViewDataTextColumn FieldName="difference_next_reading" ShowInCustomizationForm="True" VisibleIndex="5">
                    <PropertiesTextEdit DisplayFormatString="{0} km">
                    </PropertiesTextEdit>
                    <EditFormSettings Visible="False" />
                </dx:GridViewDataTextColumn>
            </Columns>
            <TotalSummary>
                <dx:ASPxSummaryItem DisplayFormat="Total Reading = {0} km" FieldName="difference_next_reading" ShowInColumn="difference_next_reading" SummaryType="Sum" ValueDisplayFormat="{0} km" />
            </TotalSummary>
            <Styles>
                <Footer BackColor="White" Font-Bold="True">
                </Footer>
            </Styles>
        </dx:ASPxGridView>
        <asp:SqlDataSource ID="Energy_ds" runat="server" ConnectionString="<%$ ConnectionStrings:sundayConnectionString %>" DeleteCommand="DELETE FROM [meter_reading] WHERE [ID] = @ID" InsertCommand="INSERT INTO [meter_reading] ([date], [reading]) VALUES (@date, @reading)" SelectCommand="SELECT ID, date,reading, price, lead(reading) OVER (ORDER BY date ) - reading AS difference_next_reading FROM meter_reading ORDER BY date" UpdateCommand="UPDATE [meter_reading] SET [date] = @date, [reading] = @reading WHERE [ID] = @ID" ProviderName="<%$ ConnectionStrings:sundayConnectionString.ProviderName %>">
            <DeleteParameters>
                <asp:Parameter Name="ID" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter DbType="Date" Name="date" />
                <asp:Parameter Name="reading" Type="Double" />
                <asp:Parameter Name="price" Type="Double" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter DbType="Date" Name="date" />
                <asp:Parameter Name="reading" Type="Double" />
                <asp:Parameter Name="price" Type="Double" />
                <asp:Parameter Name="ID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
    </div>
    <div class="content-wrapper">
        <dx:BootstrapChart runat="server" DataSourceID="Energy_ds" EncodeHtml="True" LoadingIndicatorText="" Palette="Office" TitleText="Monthly Reading">
            <ValueAxisCollection>
                <dx:BootstrapChartValueAxis Name="Reading" TitleText="Reading">
                    <TitleSettings Alignment="Center" Text="Reading">
                    </TitleSettings>
                    <VisualRangeSettings>
                        <DateAxis>
                            <MinLength Days="1" />
                        </DateAxis>
                    </VisualRangeSettings>
                    <Label>
                        <Format Type="Decimal" />
                    </Label>
                </dx:BootstrapChartValueAxis>
            </ValueAxisCollection>
            <SeriesCollection>
                <dx:BootstrapChartSeries ArgumentField="date" TagField="difference_next_reading" Type="Bar" ValueField="difference_next_reading">
                    <Aggregation Enabled="True" Method="Sum" />
                    <Label>
                        <ArgumentFormat Type="ShortDate" />
                        <Format Type="ShortDate" />
                    </Label>
                </dx:BootstrapChartSeries>
                <dx:BootstrapChartSeries ArgumentField="date" ValueField="reading">
                </dx:BootstrapChartSeries>
            </SeriesCollection>
            <TitleSettings Text="Monthly Reading">
            </TitleSettings>
<SettingsExport ProxyUrl=""></SettingsExport>
        </dx:BootstrapChart>
    </div>
    <script src="scripts/frontUpdate.js"></script>
</asp:Content>
    

vb code

'Imports System.

Imports System.Data.SqlClient

Partial Class Default2
Inherits System.Web.UI.Page

`Dim constr As String = ConfigurationManager.ConnectionStrings("sundayConnectionString").ConnectionString`
`Dim con As New SqlConnection(constr)`

    Protected Sub btn_submit_Click(sender As Object, e As EventArgs) Handles btn_submit.Click
        Dim cmd As New SqlCommand("insert into meter_reading(date, reading) values (@date,reading)")
        cmd.Parameters.AddWithValue("@date", [date].Value)
        cmd.Parameters.AddWithValue("@reading", txt_reading.Text)
        cmd.Connection = con
    
        con.Open()
        cmd.ExecuteNonQuery()
        con.Close()
        '[date].Value = ""
        'txt_reading.Text = ""
    
    End Sub

End Class

I have checked for AutoPostBack Property of ASPxGridView but could not find any. I have no idea how to do it in JS. also I search online but could'nt find anything. I used following line in my JS file but of no avail ASPxGridView1.Postback(); It might seem foolish because I am new to this thing.

Answer 1

Ok, so we have some "data type grid" to display data.

Then we have some (2) text boxes, you enter some values, click button, save that data to the database.

At that point, then for the grid display to "update", you have to in code re-load the grid/table display.

I don't have your data and grid, but say a grid of some simple hotels:

So, we have this markup:

<label class="text-info">Enter New Hotel Name:</label>
<asp:TextBox ID="txtHotel" runat="server" Style="border-radius: 8px"></asp:TextBox>

<label class="text-info" style="margin-left: 20px">Enter New City:</label>
<asp:TextBox ID="txtCity" runat="server" Style="border-radius: 8px"></asp:TextBox>
<asp:Button ID="cmdAdd" runat="server" Text="Add (submit)" CssClass="btn" Style="margin-left: 12px" />
<br />
<br />

<asp:GridView ID="GridView1" runat="server" Width="40%"
    AutoGenerateColumns="False" DataKeyNames="ID" CssClass="table" GridLines="none">
    <Columns>
        <asp:BoundField DataField="FirstName" HeaderText="FirstName" />
        <asp:BoundField DataField="LastName" HeaderText="LastName" />
        <asp:BoundField DataField="HotelName" HeaderText="HotelName" />
        <asp:BoundField DataField="City" HeaderText="City" />
        <asp:TemplateField HeaderText="Description">
            <ItemTemplate>
                <asp:Label ID="lblDescript" runat="server"
                    Text='<%# Eval("Description")  %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Ok, and code to load is this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

    If Not IsPostBack Then
        LoadData()
    End If

End Sub


Sub LoadData()

    Dim strSQL = "SELECT * FROM tblHotelsA ORDER BY HotelName"
    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand(strSQL, conn)
            conn.Open()
            Dim rst As New DataTable
            rst.Load(cmdSQL.ExecuteReader)
            GridView1.DataSource = rst
            GridView1.DataBind()
        End Using
    End Using

End Sub

Note VERY close - we ONLY load the grid on the first real page load, not each time a post-back occurs (so, ALWAYS for 99% of your pages, loading code goes in that if not IsPostback stub in page load).

Ok, so now we have this:

so, we can enter a new hotel name and city, and hit our submit button.

That button code will have two jobs:

Add/insert the data into database.

re-load the grid to show updated data (a new row).

So, that code will look near like what you have, but AFTER the insert of data, then we have to re-load the grid display.

so, then this code:

Protected Sub cmdAdd_Click(sender As Object, e As EventArgs)

    Dim strSQL As String =
         "INSERT INTO tblHotelsA (HotelName, City)
         VALUES (@Hotel, @City)"

    Using conn As New SqlConnection(My.Settings.TEST4)
        Using cmdSQL As New SqlCommand(strSQL, conn)

            cmdSQL.Parameters.Add("@hotel", SqlDbType.NVarChar).Value = txtHotel.Text
            cmdSQL.Parameters.Add("@City", SqlDbType.NVarChar).Value = txtCity.Text
            conn.Open()
            cmdSQL.ExecuteNonQuery()
        End Using
    End Using

    LoadData()    '<----- re-load the grid

End Sub

So, the insert data code you have looks good. But right after you insert into the database, you need to re-load the data control (grid) you have.