Acquire selected rows in the Devexpress Bootstrap Grid through server-side processing

Utilizing the devexpress bootstrap grid view, I have added a checkbox column to select rows and implemented a client-side event for handling selected items on change.

However, an issue arises occasionally where the selected rows array appears empty even though it contains data.

Is there a way to retrieve these selected rows from the server side? Can alternative client-side events be used instead of the Grid selected event?

<dx:BootstrapGridView ID="dgvData" runat="server" KeyFieldName="Id" Width="100%" 
    ClientInstanceName="dgvData" ClientSideEvents-SelectionChanged="OnDataGridSelectionChanged"
    OnDataBinding="dgvData_DataBinding" EnableRowsCache="false">
    <SettingsAdaptivity AdaptivityMode="HideDataCells" AllowOnlyOneAdaptiveDetailExpanded="true" />
    <SettingsSearchPanel Visible="false" ShowApplyButton="true" />
    <Settings ShowGroupPanel="false" ShowHeaderFilterButton="true" ShowFilterRow="true" />
    <Columns>
        <dx:BootstrapGridViewCommandColumn ShowSelectCheckbox="True" SelectAllCheckboxMode="AllPages" />
        ...
    </Columns>
    <SettingsPager PageSize="1000" PageSizeItemSettings-Visible="false" Visible="false"></SettingsPager>
    <SettingsBootstrap Striped="true" />
</dx:BootstrapGridView>

<script type="text/javascript">
function OnDataGridSelectionChanged() {
    dgvData.GetSelectedFieldValues('Id', OnDataGridSelectionComplete);
}

var DataKeys = [];
function OnDataGridSelectionComplete(values) {
    DataKeys = values;
}
</script>

Answer №1

If you're looking for guidance, I recommend checking out the following documentation: Bootstrap GridView - Selection

Consider implementing client-side events to handle selection by using the code snippet below:

<ClientSideEvents Init="onSelectionGridViewAction" SelectionChanged="onSelectionGridViewAction" EndCallback="onSelectionGridViewAction" />

//js

function onSelectionGridViewAction(s, e) {
    $("#selectionLabel").html("Total rows selected: " + s.GetSelectedRowCount());
}

For further information, check out: BootstrapGridView - How to retrieve values from a Bootstrap GridView in code-behind

To retrieve row values from a BootstrapGridView on the server side, utilize the GetRowValues method. Refer to the GetRowValues article for a sample project demonstrating the use of this method. While this article pertains to ASPxGridView, the solution is applicable to BootstrapGridView as well.

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

Do you mean using a JSON object as a value?

When creating a JSON object where the value itself is an object, what is the correct way to write it? var data ='{"phone":{"gtd": "080"}}'; OR var data ='{"phone":"{gtd: 080}"}'; This question may seem straightforward. I am curious ...

How can I move a complete range of values up using the Google Sheets API in Node.JS?

I'm working with a Google Spreadsheet that is being accessed and modified by a Node.JS app. There's a specific situation where I need to shift an entire range up (moving A3:D up by one cell), but due to my limited experience with the Google Shee ...

Are there any other options besides using the React Material-UI makeStyles() function for styling class Components?

While experimenting with the makeStyles() function in Material-UI's React library, I encountered a specific error message: The use of hooks is limited to the body of a function component. Below is a snippet of the code that triggered this error: ...

Debugging AngularJS in Visual Studio Code

I am encountering an issue while trying to debug my Angular application using the new Visual Studio Code. It appears that there is a compatibility problem between Angular and Visual Studio Code. Here is the content of my launch.json file: { "version" ...

What could be causing VueJs2 computed properties to not update?

Check out this updated grid example from the official examples. In my application, I need to reposition the sortOrders array. created: function () { var vm = this; this.columns.forEach(function (key) { vm.sortOrders[key] = 1 }) ...

AngularJS Hacker Typer Effect (display certain text with each random keystroke)

Looking to create a typing effect similar to the one on the Hacker Typer website using AngularJS. I've taken inspiration from discussions on how to achieve this, but instead of using a timer, I'm incrementing based on ng-keyup events. Currently, ...

Configure WebStorm so that node_modules is set as the library root, while simultaneously excluding it from indexing

Can WebStorm projects be configured to set the node_modules as the library root, while also excluding it from indexing? I thought I saw a project that had node_modules marked as both library root and excluded, but I'm unsure how to do this. Does anyo ...

Error: An error was detected due to a missing closing parenthesis after an argument list while attempting to utilize

Attempting to condense a string using the LZMA-JS library available here. This is how my javascript code looks: var reader = new FileReader(); reader.addEventListener("load", function () { var big_code = reader.result; console.log(big_code.lengt ...

Display images on website in a secure manner

I currently have a large collection of document preview images (in jpg/tif format) stored outside of the web root directory. These images contain user-specific data that only certain users or user groups have permission to view. With hundreds of documents ...

Implementing a Class Addition Functionality Upon Button Click in AngularJS

I have a form that initially has disabled fields. Users can only view the information unless they click the edit button, which will enable the fields with a new style (such as a green border). I want to add a class to these fields that I can customize in m ...

Tips on distinguishing the original Ctrl+C and Ctrl+V commands from the Javascript-added document level listeners

My Clipboard service includes a copy() and paste() method that is triggered by Ctrl+C and Ctrl+V commands. These methods are document-level keyboard listeners added to a component using HostListeners. However, I am facing an issue where the paste() method ...

Is there a way to effectively communicate and pass state information between sibling components in React?

Is there a way to share state data between two React component functions that are both children of another component? I am new to React and have tried exporting a const from my App.jsx file with a structure containing the state properties, but when queri ...

unable to fetch special characters with php and ajax

Hey there! Are you struggling with AJAX and PHP? Let me share my experience. I recently faced a similar issue and here's what I did: I created two pages - one is AJAX_view.php which has a dropdown menu containing different blood groups (e.g., B+, B-) ...

Automatically install npm packages after the decision by npm to discontinue programmatic API access

Until npm 8.0, developers had the ability to programmatically install npm packages using this code snippet: const npm = require('npm'); npm.load((error) => { if (error) return console.log(error); npm.commands.install([package], (error, ...

jquery sequential fade effect

I am trying to make each div fade in one by one. Visit this link for reference <div id="w"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> $(function() { $(&a ...

Converting a string representing time to a date object in Angular

Converting a string representation of time to a Date object var timeString = "09:56 AM"; this.audit_time = new Date(timeString); // Error: Invalid date I'm facing an issue with this conversion. Any suggestions on how to correct it? Please help me s ...

The Vue property or method is unrecognized when utilizing the non-minified version

When I attempted to display the name 'John' using an inline template in a simple Vue example, I encountered the following error message: [Vue warn]: Property or method "name" is not defined on the instance but referenced during render. ...

Encountering a Javascript error while trying to optimize bundling operations

After bundling my JavaScript with the .net setting BundleTable.EnableOptimizations = true;, I've encountered a peculiar issue. Here's the snippet of the generated code causing the error (simplified): var somVar = new b({ searchUrl: "/so ...

What is the method to ensure that the Node REPL solely displays the result?

Is there a way to execute a script in Electron that only logs the output value without displaying all the code? I am utilizing xterm.js and node-pty for this project. For instance, consider the following sample code: // Add your code here function multi ...

error encountered in ajax contact form due to issue with select element

I'm experiencing an issue with my ajax contact form, where the input field and select element are not providing the expected results. This is the HTML Form Code (with "name" as the input and "iphone" as the select element) <div id="contact_form" ...