Telerik grid with a JavaScript confirm box to update a column

[Brendan Vogt]

I have a Telerik grid.  For each row there is a details table. The row is of type NominationTypeClass and the rows in the details table is of type Nomination.  So what this means for each nomination type there is a list of nominations.  The grid's code:

<telerik:RadGrid
   AllowPaging="true"
   AllowSorting="true"
   AutoGenerateColumns="false"
   GridLines="None"
   ID="rgMyNominations"
   OnDetailTableDataBind="rgMyNominations_DetailTableDataBind"
   OnItemDataBound="rgMyNominations_ItemDataBound"
   OnNeedDataSource="rgMyNominations_NeedDataSource"
   OnUpdateCommand="rgMyNominations_UpdateCommand"
   PageSize="5"
   runat="server"
   ShowHeader="false"
   ShowStatusBar="true">
   <MasterTableView DataKeyNames="NominationTypeID" HierarchyDefaultExpanded="true" Width="100%">
      <Columns>
         <telerik:GridTemplateColumn>
            <ItemTemplate>
               <b><asp:Label ID="lblNominationType" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.NominationType") %>' /></b>
            </ItemTemplate>
            <ItemStyle Width="100%" />
         </telerik:GridTemplateColumn>
      </Columns>
      <NoRecordsTemplate>No Nomination Types.</NoRecordsTemplate>
      <DetailTables>
         <telerik:GridTableView PageSize="5" Name="Nominations" GridLines="None" Width="100%" ShowHeader="true" DataKeyNames="NominationID">
            <Columns>
               <telerik:GridTemplateColumn HeaderText="Person / Team">
                  <ItemTemplate>
                     <asp:Label ID="lblName" runat="server" Text='<%# GetName(DataBinder.Eval(Container, "DataItem")) %>' />
                  </ItemTemplate>
                  <ItemStyle VerticalAlign="Top" Width="20%" />
               </telerik:GridTemplateColumn>
               <telerik:GridTemplateColumn HeaderText="Date Nominated">
                  <ItemTemplate>
                     <asp:Label ID="lblNominationDate" runat="server" Text='<%# FormatDate(DataBinder.Eval(Container, "DataItem.NominationDate")) %>' />
                  </ItemTemplate>
                  <ItemStyle VerticalAlign="Top" Width="14%" />
               </telerik:GridTemplateColumn>
               <telerik:GridTemplateColumn HeaderText="Action" UniqueName="Action_Column">
                  <ItemTemplate>
                     <b><asp:HyperLink ID="hlEdit" runat="server" Text="Edit" /></b><br />
                     <b>
                        <asp:LinkButton
                           CausesValidation="false"
                           CommandName="Update"
                           ID="lbWithdrawnStatus"
                           runat="server"
                           Text="Withdraw"
                           OnClientClick="javascript:return ConfirmWithdrawnStatusChange();" />
                     </b>
                  </ItemTemplate>
                  <ItemStyle VerticalAlign="Top" Width="7%" />
               </telerik:GridTemplateColumn>
            </Columns>
            <NoRecordsTemplate>No Nominations.</NoRecordsTemplate>
         </telerik:GridTableView>
      </DetailTables>
   </MasterTableView>
   <ClientSettings AllowExpandCollapse="true"></ClientSettings>
</telerik:RadGrid>

Here is how I populate my rows:

protected void rgMyNominations_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
{
   try
   {
      if (!e.IsFromDetailTable)
      {
         rgMyNominations.DataSource = GetNominationTypes();
      }
   }
   catch (Exception ex)
   {
      // Handle exceptions
   }
}

Here is how I populate my details table:

protected void rgMyNominations_DetailTableDataBind(object source, GridDetailTableDataBindEventArgs e)
{
   try
   {
      GridDataItem gridDataItem = (GridDataItem)e.DetailTableView.ParentItem;
      if (e.DetailTableView.Name == "Nominations")
      {
         int nominationTypeID = int.Parse(gridDataItem.GetDataKeyValue("NominationTypeID").ToString());

         List<Nomination> nominations = new List<Nomination>();

         // For each nomination type, add the nomination
         foreach (Nomination n in myNominationsList)
         {
            if (n.NominationType.NominationTypeID == nominationTypeID)
            {
               nominations.Add(n);
            }
         }

         e.DetailTableView.DataSource = nominations;
      }
   }
   catch (Exception ex)
   {
      // Handle exceptions
   }
}

I have an action column that has a link that says Withdrawn.  When clicked I have a JavaScript confirm box with a Yes or No option.  If yes, then the nomination status is updated to withdrawn.  Then I want the grid to be refreshed to show the updated status.  I used the grid's update command to to show the show the JavaScript's command box.  It updates, but is it the correct way to do it?

protected void rgMyNominations_UpdateCommand(object source, GridCommandEventArgs e)
{
   try
   {
      StatusManager.InsertStatus( /* required parameters */ );

      // Refresh grid
      rgMyNominations.DataSource = GetNominationTypes();
      rgMyNominations.DataBind();
   }
   catch (Exception ex)
   {
      // Handle exceptions
   }
}

The binding of the grid doesn't want to work properly after the status was updated.  The grid row is of type NominationTypeClass and the details table is of type Nomination.  I debugged, and there where it set the datasource for each it is correct, but when the view is rendered for:

<asp:Label ID="lblNominationDate" runat="server" Text='<%# FormatDate(DataBinder.Eval(Container, "DataItem.NominationDate")) %>' />

...it says that NominationDate is not a property of NominationTypeClass.  This is wrong, I don't know why it is taking the type for the row to be the type of the details table?  NominationDate is a property of Nomination.  It seems like it is overriding the datasources.

Are there any online samples of what I am trying to accomplish?  Any advice would be appreciated.

PS: Sorry for not using the code formatter, but it looks horrible, it just shows a whole lot of HTML tags.

[Vasil]

Hi,

About the JavaScript confirmation: yes this is the right way.

In your RadGrid's declaration you have:

<telerik:RadGrid ID="rgMyNominations" ... >
  <MasterTableView DataKeyNames="NominationTypeID">
    <Columns>
      <telerik:GridTemplateColumn>
        <ItemTemplate>
          <b><asp:Label ID="lblNominationType" runat="server" Text='<%# DataBinder.Eval( Container, "DataItem.NominationType") %>' /></b>
        </ItemTemplate>
        <ItemStyle Width="100%" />
      </telerik:GridTemplateColumn>
    </Columns>
    <DetailTables>
      <telerik:GridTableView Name="Nominations" DataKeyNames="NominationID">
        <Columns>
          <telerik:GridTemplateColumn HeaderText="Person / Team">
            <ItemTemplate>
              <asp:Label ID="lblName" runat="server" Text='<%# GetName(DataBinder.Eval(Container, "DataItem")) %>' />

lblNominationType is in the MasterTableView's rows and not in the detail table. As you said: "The grid row is of type NominationTypeClass and the details table is of type Nomination."
So it is expected that NominationType should be property of NominationTypeClass and not of Nomination.
If NominationDate is really a property of Nomination, then you need to bind this property into the detail table not in the master table.

Kind regards,
Vasil
the Telerik team

[Brendan Vogt]

Hi,

Thanks for the reply.  I am not getting this sorted out.  I don't understand your answer as well, as you can see in my code I do bind the details table in the DetailTableDataBind.  Can I ask you a favour, do you feel like replicating this issue with a simple example that works?  Then I can download it and check it out.  It would be greatly appreciated.

[Vasil]

Hello,

I am attaching an edited version of your web page that is working fine. However, for such a scenario I will recommend you to use grouping by NominationType, instead of hierarchy with detail table.
Please also do not mix simple with advanced data binding (do not call DataBind()). You will find more information on this subject here:
http://www.telerik.com/help/aspnet-ajax/grid-advanced-data-binding.html

All the best,
Vasil
the Telerik team