FormView Not Populating After Postback

[Jerald]

When I select a row in the RadGrid, a FormView is populated with the details.  But when I update the data in the FormView, the data is updated in the RadGrid, but the FormView is no longer visible.  I'm guessing because the row selection is lost, even though the selected row remains highlighted due to the js I'm using.  How can I fix this issue?  I just want the row selection on the RadGrid to remain even after I update, insert, or delete data from the FormView, so that the FormView remains visible.

Here's the RadGrid:

<telerik:RadGrid runat="server" ID="rgVendors" DataSourceID="sdsRgVendors" AutoGenerateColumns="False" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True" ShowGroupPanel="True" OnSelectedIndexChanged="rgVendors_OnSelectedIndexChanged">
                <ClientSettings AllowDragToGroup="True" AllowColumnsReorder="True" ReorderColumnsOnClient="True" EnablePostBackOnRowClick="True">
                    <Selecting AllowRowSelect="True"></Selecting>
                    <ClientEvents OnRowCreated="rgVendors_RowCreated" OnRowSelected="rgVendors_RowSelected" OnRowDeselected="rgVendors_RowDeselected" />
                </ClientSettings>
                <MasterTableView ClientDataKeyNames="venIdPk" DataKeyNames="venIdPk" DataSourceID="sdsRgVendors">
                    <Columns>
                        <telerik:GridBoundColumn DataField="venIdPk" ReadOnly="True" HeaderText="venIdPk" SortExpression="venIdPk" UniqueName="venIdPk" DataType="System.Int32" FilterControlAltText="Filter venIdPk column"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="venNm" HeaderText="Vendor" SortExpression="venNm" UniqueName="venNm" FilterControlAltText="Filter venNm column" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="True" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="venAddress" HeaderText="Address" SortExpression="venAddress" UniqueName="venAddress" FilterControlAltText="Filter venAddress column" ReadOnly="True" AllowFiltering="False" AllowSorting="False" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="True" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="venCity" HeaderText="City" SortExpression="venCity" UniqueName="venCity" FilterControlAltText="Filter venCity column" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="True" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="stateProvAcro" HeaderText="State/Province" SortExpression="stateProvAcro" UniqueName="stateProvAcro" FilterControlAltText="Filter stateProvAcro column" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="True" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="venZipCode" HeaderText="Zip Code" SortExpression="venZipCode" UniqueName="venZipCode" FilterControlAltText="Filter venZipCode column" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="True" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="venPh" HeaderText="Phone" SortExpression="venPh" UniqueName="venPh" FilterControlAltText="Filter venPh column" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="True" ItemStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
                        <telerik:GridCheckBoxColumn DataField="venActive" HeaderText="Active" SortExpression="venActive" UniqueName="venActive" DataType="System.Boolean" FilterControlAltText="Filter venActive column" AllowFiltering="False" AllowSorting="False" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Font-Bold="True" ItemStyle-HorizontalAlign="Center"></telerik:GridCheckBoxColumn>
                    </Columns>
                </MasterTableView>
                <AlternatingItemStyle BackColor="#DCDCDC"></AlternatingItemStyle>
            </telerik:RadGrid>

Here's part of the FormView:

<asp:FormView
    runat="server"
    ID="fvVenDets"
    DataKeyNames="venIdPk"
    DataSourceID="sdsFvVenDets"
    OnItemCommand="fvVenDets_OnItemCommand"
    OnItemUpdated="fvVenDets_OnItemUpdated"
    OnItemInserted="fvVenDets_OnItemInserted"
    OnItemDeleted="fvVenDets_OnItemDeleted">

    <ItemTemplate>...</ItemTemplate>
    <EditItemTemplate>...</EditItemTemplate>
    <InsertItemTemplate>...</InsertItemTemplate>

</asp:FormView>

Here's the js to maintain the row selection:

<script type="text/javascript">
                var selected = {};

                function rgVendors_RowSelected(sender, args) {
                    var venid = args.getDataKeyValue("venIdPk");
                    if (!selected[venid]) {
                        selected[venid] = true;
                    }
                }
                function rgVendors_RowDeselected(sender, args) {
                    var venid = args.getDataKeyValue("venIdPk");
                    if (selected[venid]) {
                        selected[venid] = null;
                    }
                }
                function rgVendors_RowCreated(sender, args) {
                    var venid = args.getDataKeyValue("venIdPk");
                    if (selected[venid]) {
                        args.get_gridDataItem().set_selected(true);
                    }
                }
            </script>

[Attila Antal]

Hi Jerald,

After updating the Grid's database using the FormView, try calling the Rebind() method of the grid. "rgVendors.Rebind()" so that the grid will refresh its data displayed in the CheckBoxColumn.

If in case you would like to Check/Uncheck a checkbox regardless of the Database value, you can use the OnRowCreated event, access the checkbox element and check/uncheck it according to your needs.

For example:

function rgVendors_RowCreated(sender, args) {
    var venid = args.getDataKeyValue("venIdPk");
    if (selected[venid]) {
        var dataItem = args.get_gridDataItem();
        dataItem.set_selected(true);

        // access the checkbox of the
        var chkBox = $(dataItem.get_cell("venActive")).find("input[type='checkbox']");
        chkBox.attr("checked", "checked");
    }
}

Please give the above suggestions a try and see if that works for you.

Kind regards,
Attila Antal
Progress Telerik

[Jerald]

Thanks for the reply.  I had already tried that as well, but the FormView still didn't render after updating - but the RadGrid was updated appropriately.  So I just added the "Select" GridButtonColumn to the RadGrid and it works as usual.  I just won't be able to use client row selections until I understand how to get EnablePostBackOnRowClick="true" to work the same way as the Select command button.

[Attila Antal]

Hi Jerald,

Could you please tell us how do you first render the FormView? Is it depending on the selected row of RadGrid? Also, if setting the EnablePostBackOnRowClick property to true, the grid will do a postback when a row is clicked and it will fire the ItemCommand event where you can capture the command of "RowClick". This does not select any row, however, you can select it manually in the ItemCommand event, for example:. e.Item.Selected  = true;

Kind regards,
Attila Antal
Progress Telerik