Retrieve data from a row in a kogrid when a checkbox is selected

Question

Retrieve data from a row in a kogrid when a checkbox is selected

I am working with a kogrid that contains checkboxes in one column. There are two issues that I am facing:

How can I retrieve row data when a checkbox is checked or unchecked?
I have a save button located outside the kogrid. When this button is clicked, I want to submit the row values as a JSON object.

Here is the HTML code:

<div id="reconciliationGrid" data-bind="koGrid: reconciliationGridOptions"></div>

And here is the JavaScript code:

this.currentRowValues = ko.observableArray(); 
self.reconciliationGridOptions = { 
data: self.reconciliationGrid, 
canSelectRows: true, 
afterSelectionChange: function () { return true; }, 
selecteditems: this.currentRowValues 
};

javascript .net json knockout.js

Answer 1

Answer №1

It seems like there may be an error in your code at selecteditems, but the correct syntax is actually selectedItems. Take a look at the example below which logs the currently selected row, displays all selected items in a div, and triggers an alert with all selected data upon clicking the save button.

function viewModel(){
  this.currentRowValues = ko.observableArray([]); 
   this.gridData = ko.observableArray([{name: "Moroni", age: 50},
                                      {name: "Tiancum", age: 43},
                                      {name: "Jacob", age: 27},
                                      {name: "Nephi", age: 29},
                                      {name: "Enos", age: 34}]);
  
  this.reconciliationGridOptions = { 
                      data: this.gridData, 
                      selectedItems: this.currentRowValues ,
                      afterSelectionChange: function (selectedRow) { 
                        console.log(selectedRow);
                        return true;
                      }, 
                };  
};
viewModel.prototype.save = function(){
   alert(ko.toJSON(this.currentRowValues()));
};

ko.applyBindings(new viewModel());

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px;
 
}

button{
  padding: 10px;
  margin: 10px 0 10px 0;
}

.selectedItems{
    border: solid black 1px;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<link href="https://cdn.lukej.me/kogrid/2.0.6/KoGrid.css" rel="stylesheet"/>
<script src="https://cdn.lukej.me/kogrid/2.0.6/koGrid.debug.js"></script>



<div class="gridStyle" id="reconciliationGrid" data-bind="koGrid: reconciliationGridOptions"></div> 

<button data-bind="click: save">Save Example</button>
<br/>
<div class="selectedItems" data-bind="foreach: currentRowValues">
       <span data-bind="text:ko.toJSON($data)"></span>
</div>

Answer 2

It seems like there may be an error in your code at selecteditems, but the correct syntax is actually selectedItems. Take a look at the example below which logs the currently selected row, displays all selected items in a div, and triggers an alert with all selected data upon clicking the save button.

function viewModel(){
  this.currentRowValues = ko.observableArray([]); 
   this.gridData = ko.observableArray([{name: "Moroni", age: 50},
                                      {name: "Tiancum", age: 43},
                                      {name: "Jacob", age: 27},
                                      {name: "Nephi", age: 29},
                                      {name: "Enos", age: 34}]);
  
  this.reconciliationGridOptions = { 
                      data: this.gridData, 
                      selectedItems: this.currentRowValues ,
                      afterSelectionChange: function (selectedRow) { 
                        console.log(selectedRow);
                        return true;
                      }, 
                };  
};
viewModel.prototype.save = function(){
   alert(ko.toJSON(this.currentRowValues()));
};

ko.applyBindings(new viewModel());

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px;
 
}

button{
  padding: 10px;
  margin: 10px 0 10px 0;
}

.selectedItems{
    border: solid black 1px;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<link href="https://cdn.lukej.me/kogrid/2.0.6/KoGrid.css" rel="stylesheet"/>
<script src="https://cdn.lukej.me/kogrid/2.0.6/koGrid.debug.js"></script>



<div class="gridStyle" id="reconciliationGrid" data-bind="koGrid: reconciliationGridOptions"></div> 

<button data-bind="click: save">Save Example</button>
<br/>
<div class="selectedItems" data-bind="foreach: currentRowValues">
       <span data-bind="text:ko.toJSON($data)"></span>
</div>

Retrieve data from a row in a kogrid when a checkbox is selected

Answer №1

Similar questions

What are the steps for utilizing JQuery to send JSON data?

Can you explain the meaning of <!-- in javascript?

The incorrect order of CSS in NextJS production build

What causes fs to produce an error when routing to a new page, yet refreshing the page resolves the issue?

Having trouble getting event modifiers to work in Vue when added programmatically

Elements with v-for directive failing to display

What distinguishes v-text from v-load in Vue.js when concealing {{ Mustache }}?

Unexpected Error: The axiosCookieJarSupport function is throwing a TypeError, functioning properly in Node.JS but not in .vue pages. What could

Why is Reactjs axios returning a promise instead of the expected value?

How can data be transmitted to the client using node.js?

What is the best way to asynchronously load an external javascript file in a popup.html file?

The onsubmit function is not successfully executing the JavaScript function

AngularJS: Showcase HTML code within ng-view along with its corresponding output displayed in a navigation format such as Html, Css, JS, and Result

JavaScript's "for of" loop is not supported in IE 11, causing it to fail

What is the process for indicating the cache directory in npm5 when using the install command?

When the component is reloaded, props will become defined

Encountering error ORA-12514 when utilizing the node oracle-db npm package

Transforming control of execution seamlessly between two interactive functions in nodejs

Module is absent in JavaScript but present in TypeScript

The loading process in CSS can be customized using unique IDs such as loading1 and loading300