Server Side Row Selection with Object Data Source

[Ryan]

Hello.  I'm having problems with the rad grid latest demo and server side row selection.  My events are properly picked up from the checkbox clicks but they don't stay checked.  Even the demo code isn't working.  This code has been placed inside a SalesLogix CRM page.  All other functions appear to be working properly (sorting, filtering, binding, etc).  I've tried this both inside and outisde the UpdatePanel.  Am I doing something wrong here?  There is already an ASP script manager on the page hence the use of a proxy. Help appreciated!

Managers

<telerik:RadAjaxManagerProxy ID="RadAM" runat="server">
  <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="LDCAccounts">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="LDCAccounts" LoadingPanelID="RadAjaxLoadingPanel1" />
      </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="RadGrid1">
      <UpdatedControls>
          <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
          <telerik:AjaxUpdatedControl ControlID="Literal1" />
      </UpdatedControls>
    </telerik:AjaxSetting>
  </AjaxSettings>
</telerik:RadAjaxManagerProxy>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

Markup

<asp:UpdatePanel ID="ldcAccountPanel" runat="server">
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="Accounts" />
    <asp:AsyncPostBackTrigger ControlID="RadGrid1" />
  </Triggers>
  <ContentTemplate>

  <telerik:RadGrid ID="Accounts" Width="97%" AllowSorting="true" runat="server" PageSize="20"
    AllowMultiRowSelection="true" AllowFilteringByColumn="true" EnableLinqExpressions="true" AllowAutomaticInserts="false"
    OnInsertCommand="Accounts_RowAdding" OnNeedDataSource="Accounts_NeedData">
    <MasterTableView Width="100%" Summary="Rad!" AutoGenerateColumns="false"
      AllowFilteringByColumn="true" CommandItemDisplay="Top" EditMode="InPlace" ClientDataKeyNames="Id,AccountNumber">
      <CommandItemSettings ShowAddNewRecordButton="true" AddNewRecordText="Add" />
      <Columns>
        <telerik:GridButtonColumn Text="Select" CommandName="Select />
        <telerik:GridButtonColumn Text="Deselect" CommandName="Deselect" />
        <telerik:GridTemplateColumn UniqueName="ChkColumn">
          <HeaderTemplate>
            <asp:CheckBox ID="ChkAll" runat="server" OnCheckedChanged="Accounts_ToggleAll" AutoPostBack="true" />
          </HeaderTemplate>
          <ItemTemplate>
            <asp:CheckBox ID="ChkOne" runat="server" OnCheckedChanged="Accounts_ToggleRow" AutoPostBack="false" />
          </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridEditCommandColumn ButtonType="ImageButton" />
        <telerik:GridBoundColumn DataField="Id" Visible="true" HeaderText="PK" ReadOnly="true" />
        <telerik:GridBoundColumn DataField="Name" HeaderText="Name" CurrentFilterFunction="EqualTo" AutoPostBackOnFilter="true" />
        <telerik:GridBoundColumn Datafield="AccountNumber" HeaderText ="Account #" DataType="System.String" />
        <telerik:GridBoundColumn Datafield="Address1" HeaderText = "Address1" />
        <telerik:GridBoundColumn Datafield="Address2" HeaderText = "Address2" />
        <telerik:GridBoundColumn Datafield="City"  HeaderText = "City" DataType="System.String" />
        <telerik:GridBoundColumn Datafield="State"  headertext = "State" />
        <telerik:GridBoundColumn Datafield="Postalcode" headertext = "Zip" />
      </Columns>
    </MasterTableView>
    <ClientSettings EnableRowHoverStyle="true" />
    <PagerStyle Mode="NextPrevAndNumeric" />
  </telerik:RadGrid>

  <asp:CheckBox ID="ChkTest" runat="server" OnCheckedChanged="ChkTest_Click" AutoPostBack="true" />
  <asp:Button ID="Test" runat="server" OnClick="Accounts_Test" />



  <asp:Literal ID="Literal1" runat="server" />

  <telerik:RadGrid id="RadGrid1" OnItemCreated="RadGrid1_ItemCreated" OnPreRender="RadGrid1_PreRender"
   ShowStatusBar="true" runat="server" OnNeedDataSource="RadGrid1_NeedData" AllowPaging="True" AllowSorting="True"
    AllowMultiRowSelection="True">
    <MasterTableView PageSize="10">
        <Columns>
            <telerik:GridButtonColumn Text="Select" CommandName="Select">
            </telerik:GridButtonColumn>
            <telerik:GridButtonColumn Text="Deselect" CommandName="Deselect">
            </telerik:GridButtonColumn>
            <telerik:GridTemplateColumn UniqueName="CheckBoxTemplateColumn">
                <HeaderTemplate>
                 <asp:CheckBox id="headerChkbox" OnCheckedChanged="ToggleSelectedState" AutoPostBack="True" runat="server"></asp:CheckBox>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:CheckBox id="CheckBox1" OnCheckedChanged="ToggleRowSelection" AutoPostBack="True" runat="server"></asp:CheckBox>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
        </Columns>
    </MasterTableView>
    <ClientSettings EnableRowHoverStyle="true" />
    <PagerStyle Mode="NumericPages"></PagerStyle>
  </telerik:RadGrid>

  </ContentTemplate>
</asp:UpdatePanel>

Codebehind

protected void RadGrid1_NeedData(object sender, GridNeedDataSourceEventArgs e)
{
  RadGrid1.DataSource = CurrentOpportunity.SEChannelPartners;
}

protected void ToggleRowSelection(object sender, EventArgs e)
{
  ((sender as CheckBox).NamingContainer as GridItem).Selected = (sender as CheckBox).Checked;
}

protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
  if (e.Item is GridDataItem)
  {
    e.Item.PreRender += new EventHandler(RadGrid1_ItemPreRender);
  }
}

private void RadGrid1_ItemPreRender(object sender, EventArgs e)
{
  ((sender as GridDataItem)["CheckBoxTemplateColumn"].FindControl("CheckBox1") as CheckBox).Checked = (sender as GridDataItem).Selected;
}

protected void ToggleSelectedState(object sender, EventArgs e)
{
  CheckBox headerCheckBox = (sender as CheckBox);
  foreach (GridDataItem dataItem in RadGrid1.MasterTableView.Items)
  {
    (dataItem.FindControl("CheckBox1") as CheckBox).Checked = headerCheckBox.Checked;
    dataItem.Selected = headerCheckBox.Checked;
  }
}

protected void Page_PreRender(object sender, EventArgs e)
{
  Literal1.Text = String.Format("<h3 class=\"qsfSubtitle\">Selected rows count is: {0}</h3>", RadGrid1.SelectedItems.Count);
}

protected void RadGrid1_PreRender(object sender, EventArgs e)
{
  RadGrid1.DataSource = (ICollection<MyAccountClass>)GetAccounts();
  RadGrid1.DataBind();
  GridHeaderItem headerItem = RadGrid1.MasterTableView.GetItems(GridItemType.Header)[0] as GridHeaderItem;
  (headerItem.FindControl("headerChkbox") as CheckBox).Checked = RadGrid1.SelectedItems.Count == RadGrid1.Items.Count;
}

[Ryan]

Bump

[Tsvetina]

Hello Ryan,

The problem is that you are rebinding the grid on PreRender which clears selection done previous to that. To overcome the issue, consider using advanced data-binding and removing the DataBind() calls from your code:
http://www.telerik.com/help/aspnet-ajax/grid-advanced-data-binding.html

Regards,
Tsvetina
the Telerik team

[Ryan]

Hi Tsvetina,

The problem I face when using advanced databinding is that in subsequent grid events (OnUpdateCommand,DeleteCommand,etc) my e.Item.DataItem is null.

GridEditableItem item = e.Item as GridEditableItem;
var myStrongObject = (IMyObject)item.DataItem; // null?
Hashtable values = new Hashtable();
// limited subset of original item properties (only those visible in the grid?)
// Id, etc with other properties that were available from item.DataItem are now unavailable
item.ExtractValues(values);

My grid bind code is the same as the NeedData code.

// snippet inside pageload grid bind
this.MyGrid.DataSource = MyObjectCollection;
this.MyGrid.DataBind();

// snippet inside NeedData event
this.MyGrid.DataSource = MyObjectCollection;

Maybe I am missing something simple or maybe I have to re-query the database to find the item in question each time an update or delete action needs to occur.  The examples for advanced data binding do not seem to cover these CRUD events.  Although, I cannot seem to access properties that are not directly visible on the grid with advanced databinding.

Note that the original aspx source isn't exactly the same now.  Fields like Id and some others are Visible="false" and I cannot seem to access them during these events

Help greatly appreciated

[Tsvetina]

Hi Ryan,

Same as with GridView, the DataItem object is available only during binding (ItemDataBound event in RadGrid). Outside of this event you should either re-query the database or add the field you need to access in the DataKeyNames collection of the MasterTableView. Then you can access it as follows:

item.GetDataKeyValue("FieldName").ToString(); //item is of type GridDataItem here

This can be used in any event where the items of RadGrid are already available.

Kind regards,
Tsvetina
the Telerik team

[Ryan]

Thankyou Tsvetina.  There is one more issue I forgot about with the advanced data binding.  I am using 4 grids on one page. The page loads fine with all my grids displaying data as they should.  When I do any action on a grid the other grids disappear/shrink to 1px height (I assume due to no datasource but am not sure).  As mentioned before, this is inside a CRM application and it already contains a script manager on the page (hence the proxy).  I don't quite understand why this happens because the other grids are in separate update panels and shouldn't be changing at all, but they clearly are.

<telerik:RadAjaxManagerProxy ID="RadAM" runat="server">
  <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="CP">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="CP" LoadingPanelID="RadAjaxLoadingPanel1" />
      </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="SalesEntities">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="SalesEntities" LoadingPanelID="RadAjaxLoadingPanel1" />
      </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="P">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="P" LoadingPanelID="RadAjaxLoadingPanel1" />
      </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="L">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="L" LoadingPanelID="RadAjaxLoadingPanel1" />
      </UpdatedControls>
    </telerik:AjaxSetting>
    <telerik:AjaxSetting AjaxControlID="LRadFilter">
      <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="LRadFilter" />
      </UpdatedControls>
    </telerik:AjaxSetting>
  </AjaxSettings>
</telerik:RadAjaxManagerProxy>

The update panel, similar for all other grids (each have their own panel):

<asp:UpdatePanel ID="CPPanel" runat="server" ChildrenAsTriggers="true">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="CP" />
    </Triggers>
    <ContentTemplate>
        <telerik:RadGrid ID="CP" ... />

[Tsvetina]

Hello Ryan,

Please note that even when using AJAX to refresh parts of your page content, the whole page lifecycle is ran on the server, so other controls state, even if not updated on the client, could change on the server, depending on your code.

Now, as for why the other grids state is refreshed, can you confirm that you do not use both UpdatePanels and RadAjax at the same time? Please note that we do not recommend such approach, as it could lead to various problems due to the nesting of update areas.

Kind regards,
Tsvetina
the Telerik team