Choosing specific rows in a kogrid by clicking on a button within a column

Question

Choosing specific rows in a kogrid by clicking on a button within a column

My kogrid includes a single column with a view button for each row. I would like to show a popup containing the values of the selected row when the View button is clicked. How can I retrieve the values of the selected row in order to pass them into the popup?

javascript .net knockout.js

Answer 1

Answer №1

To populate the modal with a selected value, you can extract the row data and assign it as the context of the modal. Below is an example code snippet that retrieves the row data and sets it as the modal's context.

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
  }]);

  // Define button template for detail modal
  this.detailBtnTemplate = '<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-bind="click: $parent.$userViewModel.setModelContext.bind($parent.$userViewModel,$parent)">Detail </button>'

  this.reconciliationGridOptions = {
    data: this.gridData,
    selectedItems: this.currentRowValues,
    afterSelectionChange: function(selectedRow) {

      return true;
    },
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      displayName: 'Action',
      cellTemplate: '<button data-bind="click: $parent.$userViewModel.log.bind($parent.$userViewModel,$parent)">Log</button>'
    }, {
      displayName: 'Detail',
      cellTemplate: this.detailBtnTemplate
    }]
  };

  this.message = "binded context";
  this.modalContext = ko.observable();
};
viewModel.prototype.save = function() {
  alert(ko.toJSON(this.currentRowValues()));
};

//Function that will be binded with the row
viewModel.prototype.log = function(rowData) {
  console.log("row data: ", rowData);
  console.log("entity data: ", rowData.entity);
  //Showing the context binded
  alert(this.message);
};
viewModel.prototype.setModelContext = function(rowData) {
  console.log("entity data: ", rowData.entity);
  this.modalContext({name:ko.observable(rowData.entity.name),age: ko.observable(rowData.entity.age)});
};


ko.applyBindings(new viewModel());

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.lukej.me/kogrid/2.0.6/KoGrid.css" rel="stylesheet" />
<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>
<script src="https://cdn.lukej.me/kogrid/2.0.6/koGrid.debug.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.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>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-bind="with: modalContext">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Detail Person</h4>
      </div>
      <div class="modal-body">
        <label for="name">Name</label>
        <input id="name" type="text" data-bind="value: name" />
        <label for="age">Age</label>
        <input id="age" type="number" data-bind="value: age" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 2

To populate the modal with a selected value, you can extract the row data and assign it as the context of the modal. Below is an example code snippet that retrieves the row data and sets it as the modal's context.

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
  }]);

  // Define button template for detail modal
  this.detailBtnTemplate = '<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal" data-bind="click: $parent.$userViewModel.setModelContext.bind($parent.$userViewModel,$parent)">Detail </button>'

  this.reconciliationGridOptions = {
    data: this.gridData,
    selectedItems: this.currentRowValues,
    afterSelectionChange: function(selectedRow) {

      return true;
    },
    columnDefs: [{
      field: 'name',
      displayName: 'Name'
    }, {
      displayName: 'Action',
      cellTemplate: '<button data-bind="click: $parent.$userViewModel.log.bind($parent.$userViewModel,$parent)">Log</button>'
    }, {
      displayName: 'Detail',
      cellTemplate: this.detailBtnTemplate
    }]
  };

  this.message = "binded context";
  this.modalContext = ko.observable();
};
viewModel.prototype.save = function() {
  alert(ko.toJSON(this.currentRowValues()));
};

//Function that will be binded with the row
viewModel.prototype.log = function(rowData) {
  console.log("row data: ", rowData);
  console.log("entity data: ", rowData.entity);
  //Showing the context binded
  alert(this.message);
};
viewModel.prototype.setModelContext = function(rowData) {
  console.log("entity data: ", rowData.entity);
  this.modalContext({name:ko.observable(rowData.entity.name),age: ko.observable(rowData.entity.age)});
};


ko.applyBindings(new viewModel());

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://cdn.lukej.me/kogrid/2.0.6/KoGrid.css" rel="stylesheet" />
<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>
<script src="https://cdn.lukej.me/kogrid/2.0.6/koGrid.debug.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.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>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-bind="with: modalContext">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Detail Person</h4>
      </div>
      <div class="modal-body">
        <label for="name">Name</label>
        <input id="name" type="text" data-bind="value: name" />
        <label for="age">Age</label>
        <input id="age" type="number" data-bind="value: age" />
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Choosing specific rows in a kogrid by clicking on a button within a column

Answer №1

Similar questions

Ways to access an element within a function triggered by an event listener

Using TypedArray as a parameter in a Cordova plugin

Unlocking the AngularJS variable within the template script

Enhancing the functionality of localStorage

How can I silence the warnings about "defaultProps will be removed"?

Challenges with resizing windows in jQuery

What could be causing my Wikipedia opensearch AJAX request to not return successfully?

Tips for resolving this unhandled error in React TypeScript

Enhance my code to eliminate repetitive elements

How to eliminate an item from an array using index in JavaScript with jQuery

Convert image buffer to string using Mongoose getter?

Executing a function when clearing an autocomplete textfield in Material-UI

The backend function of an aspx page is failing to execute when triggered by a $.ajax request

Switching up the image using a dropdown selection menu

Tips for deactivating the highlight on a previously selected menu item when clicking on the next menu option in Angular.js

Issue "A system error of type 'System.IO.IOException' that was not properly addressed was encountered in mscorlib.dll"

Is it possible to delay the loading of a page using location.href?

Creating multiple unique custom attributes for a specialized HTML element

Update the label on a webpage using Selenium's JavaScriptExecutor

Is it possible to add a click event to a table row that contains an input checkbox, without interfering with the ability to click the checkbox itself?