Implementing a custom feature in the Telerik grid that triggers a JavaScript confirm box when updating a specific

I am working with a Telerik grid that has a details table for each row. The row is of type NominationTypeClass and the rows in the details table are of type Nomination. This setup means that for each nomination type, there is a list of nominations. The code for the grid looks like this:

<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>

This 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
   }
}

And here is how I populate the 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
   }
}

In the action column, there is a link labeled Withdrawn. When clicked, a JavaScript confirm box appears with options Yes or No. If Yes is selected, the nomination status is updated to withdrawn. After this update, the grid should refresh to reflect the updated status. I used the grid's update command to trigger the JavaScript confirmation box. It does update, but I'm not sure if it's the correct approach.

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
   }
}

However, the grid binding doesn't work properly after the status update. The grid row is of type NominationTypeClass and the details table is of type Nomination. While debugging, I found that when setting the data source for each, it is correct. But during rendering, the error message shows that NominationDate is not a property of NominationTypeClass, which is incorrect. NominationDate is a property of Nomination. It seems like the datasources are being overridden. Any suggestions on how to solve this issue or any online samples for reference would be greatly appreciated.

Answer №1

There seems to be a potential issue with how the DataSource is being handled in the UpdateCommand event of the RadGrid. Instead of setting the DataSource and calling DataBind() each time, consider using .Rebind() for refreshing the grid.

It's worth noting that calling .Rebind() should automatically refresh the grid without needing to manually set the data source. Using OnUpdateCommand or similar methods could result in unexpected issues.

If you're still experiencing problems, reaching out to the support team at Telerik might be your best option for resolving this issue.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to creating a JavaScript function that receives inputs from several other functions

I need help adding a new function to this code that will show the difference between the values calculated by the existing functions, but I'm not sure how to go about implementing it. <!DOCTYPE html> <html lang="en"> <head> ...

Transforming a JavaScript Date object to a Java LocalDateTime

In my current project, I am facing a challenge while attempting to pass UTC time from a JavaScript front end to a Java backend. My initial approach involved utilizing the Date.toISOString() method and sending the generated object to the Java backend. Howev ...

I require assistance in configuring the timing for an animation using Jquery

How can I adjust the timing (delay between two words) for this animation? If you need help, you can check out this link for guidance. Feel free to share your suggestions! ...

Using computed properties with v-for - a comprehensive guide

In a current project, I have a component in which I am using v-for to iterate over a draggable JS component. <div v-for="(val, index) in rows" :key="index"><draggable></draggable/></div> The property rows in my ...

Execute JavaScript function on click event in NextJS

Is it possible to execute a JavaScript function on the client side without using addEventListener? This situation works with addEventListener. MyComponent.js import Script from 'next/script' export default function MyComponent({ props }) { ...

Reactive form allows you to easily format dates

Currently, the date displayed is 1/4/2022. We need it to display in the format 01/04/2022. Can we achieve this formatting using reactive forms with the sample Model form provided below? Thank you. How can we format it when starting from transactionStartD ...

Updating interval time based on an external variable with jQuery

I have developed a JavaScript script where pressing a button triggers the continuous playback of an audio file. The audio, which is a 'beep' sound, serves as an alarm. The frequency at which the beep plays is determined by a setting located on a ...

Is there a way to skip running a method in a RhinoMocks mock?

When it comes to testing my code using RhinoMocks, I find myself facing a simple test scenario. As a beginner in this area, I attempted to mock my object in the following way: var mock = MockRepository.GenerateMock<MyClass>(); Additionally, I creat ...

Transform JSON data into a C# class with dual Dictionary attributes

Currently, I am in the process of creating an app using Xamarin and I have a straightforward JSON file consisting of objects that I want to deserialize all at once into my C# Class within my domain. (I am relying on the Newtonsoft Json.NET Framework) Each ...

Issue with Angular ngModel not syncing with variable changes

Currently using Angular 4 and Typescript, I have a table containing <select> elements in my template: <tr *ngFor="let task of tasksDetails"> <td>{{task.name}}</td> <td> <select class="form-control" [(ngMode ...

Confirm the validity of a data point within the JSON data package

When we send a request using the HTTP GET method, the API responds with the data. I need to ensure that the values of a specific input key match exactly what was specified in the GET URL. The URL that was used for the request: https://dummy.dns.com/Wells ...

Tips for integrating a back button functionality with AJAX requests

My single page web application allows users to enter genre, date range, and other inputs before making an ajax post request to a Java Spring MVC server. Despite everything working well, I now want to implement a back functionality. If a user wants to go b ...

I'm having issues with Node.js, Express, and SQLite3. Whenever I try to use a service for the database query

While using a sqlite3 database for a node.js express project, I encountered an issue. When I follow the tutorial and return the request as shown in router.js, it successfully retrieves all the items. However, when I created a service to get the sql from th ...

Determine the number of columns and rows within a JQuery table

I have a table structured like this: Is there a way to calculate the total number of lines (level1 through level5) and rows (including subsequent level1 lines) at the bottom of the table? This is how I currently calculate total rows: function totalRow() ...

Adding a shadow to a 3D model with Threebox

I am currently working on a project utilizing threebox js and attempting to incorporate shadows for imported 3D models. Following the guidelines outlined in the documentation here. When creating an object, I adjust the property to TRUE (code snippet provid ...

As the text is being selected within a react-rnd, once the selection extends outside of the draggable component, the selected text will automatically adjust

I've encountered an issue with a draggable textarea created using react-rnd. The problem arises when I try to select text within the textarea, and accidentally move my cursor outside of the react-rnd component, causing the selection to change unexpect ...

Searching and updating elements within an array object in JavaScript - what's the best way to do this?

I am attempting to locate an element in the target array and update it in the source array. let sourceArray = [ { "userId": "123", "applicationId": "abc", "selections": [ { " ...

Assigning a value to a JavaScript variable using Ajax

Struggling with a problem for hours and still can't find the issue... A registration form is set up for users to create accounts. When the submit button is clicked, a validateForm function is triggered. Within this function, some JavaScript tests ar ...

Encountering a crash with the NativeDroid HTML5 JS css jQueryMobile template on iOS7

Recently, I began working on a mobile solution using the NativeDroid template, an HTML5 JS CSS template available at . However, a friend informed me that the template does not work on iOS7 devices. I tested it on multiple devices. Even when running the de ...

Is method overloading a beneficial or detrimental design choice?

When it comes to overloading methods, I tend to enhance them to accommodate additional default cases. The performance implications of method overloading are worth considering. In your personal experience, do you recommend overloading methods? Is there a ...