How do I commit changes of a webdatagrid to session?

Question

I'm trying to set the datasource of the grid to a session variable and bind it, which is working. Then I want to add a row(s) to the datagrid and persist the inserted row back to session. Using the code below, after editing.commit(), I get an AJAX sync failed (null reference exception) error.

I thought it had something to do with the var newMarket array not having the correct amount of fields so I tried populating all of the fields in Market with

var newMarket = [1,"q", "q", "q", true, "03/12/2015", 
"62F387C7-CC7D-4491-9C71-10EC254F6EB9", "03/12/2015", 
"62F387C7-CC7D-4491-9C71-10EC254F6EB9"]

but I get the same error.

Please note: "1" is an identity field and I would think I would need to populate that, and fields after the last "q" are set in the stored proc. And, I'm hardcoding the values in javascript to increase testing speed.

below is my code.

<ig:WebDataGrid ID="marketListGrid" runat="server" AutoGenerateColumns="False" DataKeyFields="ID" Height="500px">
<Columns>
    <ig:BoundDataField Key="MarketName" DataFieldName="MarketName" Width="135px" Header-Text="Market Name">
    </ig:BoundDataField>
    <ig:BoundDataField Key="MarketShorthand" DataFieldName="MarketShorthand" Width="132px" Header-Text="Market Shorthand">
    </ig:BoundDataField>
</Columns>
<Behaviors>
    <ig:Sorting>
    </ig:Sorting>
    <ig:ColumnResizing>
    </ig:ColumnResizing>
    <ig:Selection CellClickAction="Row" RowSelectType="Single">
        <SelectionClientEvents RowSelectionChanged="" />
    </ig:Selection>
    <ig:EditingCore Enabled="True" BatchUpdating="True"></ig:EditingCore>
</Behaviors>

<div>
    <input id="insertMarketButton" type="button" value="Insert Market"       onclick="insertMarketButton_Clicked();" />
</div>

<ig:WebDialogWindow ID="insertMarketDialog" runat="server" Width="650px" Height="400px" InitialLocation="Centered" Modal="True" WindowState="Hidden">
<Header CaptionText="Create New Market"></Header>
<ContentPane>
    <Template>
        <div>
            <div class="labelText">
                <asp:Label ID="marketNameDialogLabel" runat="server" CssClass="fieldGrpLabel" Text="Market Name"
                    AssociatedControlID="marketNameDialogTextBox"></asp:Label>
                <div class="valueControl">
                    <asp:TextBox ID="marketNameDialogTextBox" runat="server" CssClass="name_TextBox"
                        MaxLength="64"></asp:TextBox>
                    <asp:RequiredFieldValidator ID="marketNameDialogTextBoxRequired" runat="server" ControlToValidate="marketNameDialogTextBox"
                        ErrorMessage="Market name is required." Text="*" ToolTip="Market name is required." ValidationGroup="insertMarketValidationGroup">
                    </asp:RequiredFieldValidator>
                </div>
                <div class="labelText">
                    <asp:Label ID="marketDescriptionDialogLabel" runat="server" CssClass="descriptionLabel" Text="Market Description"
                        AssociatedControlID="marketDescriptionDialogTextBox"></asp:Label>
                </div>
                <div class="valueControl">
                    <asp:TextBox ID="marketDescriptionDialogTextBox" runat="server" CssClass="description_TextBox"
                        TextMode="MultiLine" MaxLength="512"></asp:TextBox>
                </div>
                <div class="labelText">
                    <asp:Label ID="marketShorthandDialogLabel" runat="server" CssClass="fieldGrpLabel" Text="Market Shorthand"
                        AssociatedControlID="marketShorthandDialogTextBox"></asp:Label>
                </div>
                <div class="valueControl">
                    <asp:TextBox ID="marketShorthandDialogTextBox" runat="server" CssClass="shorthand_TextBox"
                        MaxLength="16"></asp:TextBox>
                </div>
                <div class="updateButton">
                    <input type="button" value="Insert Market" onclick="return add();" />
                    <asp:Button ID="cancelMarketDialogButton" runat="server" Text="Cancel" CssClass="buttonHeight" UseSubmitBehavior="false" />
                </div>
            </div>
        </div>
    </Template>
</ContentPane>

input id="currentUserID" runat="server" type="hidden" value="" />
<input id="selectedMarketID" runat="server" type="hidden" value="0" />
<input id="selectedRegionID" runat="server" type="hidden" value="0" />
<input id="selectedStateID" runat="server" type="hidden" value="0" />
<input id="selectedAreaID" runat="server" type="hidden" value="0" />
<input id="market" runat="server" type="hidden" />

<script type="text/javascript" language="javascript">
var marketData;
var marketDlg;
var selectedMarketID;
var marketName = $get('<%= marketNameDialogTextBox.ClientID %>');
var marketDescription = $get('<%= marketDescriptionDialogTextBox.ClientID %>');
var marketShorthand = $get('<%= marketShorthandDialogTextBox.ClientID %>');

$(function () {
    marketDlg = $find('<%= insertMarketDialog.ClientID %>');
    selectedMarketID = $get('<%= selectedMarketID.ClientID %>').value;
});

function marketListGrid_SelectionChanged(sender, eventArgs) {
    var rows = eventArgs.getSelectedRows();
    var selectedRow = rows.getItem(0);
    document.getElementById('<%= selectedMarketID.ClientID %>').value = selectedRow.get_dataKey();
}

function insertMarketButton_Clicked() {
    if (marketDlg != null) {
        marketDlg.set_windowState($IG.DialogWindowState.Normal);
    }
}

function del() {
    if (selectedMarketID != "") {
        var grid = $find("<%= marketListGrid.ClientID %>");
        var rows = grid.get_rows();
        var row = rows.get_rowFromKey(selectedMarketID);
        rows.remove(row, false);
    } else {
        alert("");
    }
}

function add() {
    var grid = $find("<%= marketListGrid.ClientID %>");
    var rows = grid.get_rows();
    var newMarket = ["q", "q", "q"];
    rows.add(newMarket);

    marketDlg.set_windowState($IG.DialogWindowState.Hidden);

    committing(grid);

    return true;
}

function committing(grid) {
    var editing = grid.get_behaviors().get_editingCore();
    editing.commit();
}

private List<Market> MarketList
{
    get { return (List<Market>) Session["MarketList"]; }
    set { Session["MarketList"] = value; }
}

protected void Page_Load(object sender, EventArgs e)
{
        BindMarkets();
}

private void BindMarkets()
{
    while (true)
    {
        if (MarketList != null)
        {
            marketListGrid.DataSource = MarketList;
            marketListGrid.DataBind();
        }
        else
        {
            MarketList = GetAllMarkets();
            continue;
        }
        break;
    }
}

score 0 · Answer 1 · answered Oct 15 '15 at 23:18

You can't bind an Infragistics grid to a session-based list. You would do a postback on updateButton click, insert a new item into your session-based collection and then rebind. Unless you are looking to update/delete records, simply disable EditingCore. if you need to update/delete records, add server-side handlers for RowUpdating and RowDeleting events and, again, write your own code to update/delete records in the collection and then rebind from there. If you need ajax functionality, use UpdatePanels.

How do I commit changes of a webdatagrid to session?

1 Answers1