Romonov Romonov -4 years ago 166
jQuery Question

typescript: get click data from selected Table row Knockout.js

I am new to typescript and Knockout.js and need a little help. I have created a table that has details of students and their sections.

AllStudentsPageViewModel.ts:

interface StudentTableRow {
studentName: string,

studentUri: string,

studentSection: StudentSummaryUtility.SimplifiedSection;

studentSectionUri: string;
}

export default class AllStudentsPageViewModel implements ViewModel {
public rows: KnockoutObservableArray<StudentTableRow>;

constructor() {
this.rows = KnockoutUtility.computedArray(...(logic involving observables)..);
}
}


AllStudentsPage.cshtml:

<script type="text/html" id="AllStudentsPage">
<div id="all-students-grid" class="vertical-content">
<div class="all-students-page-title">
All students
</div>
<table id="all-students-datatable-grid" class="row-border hover" width="100%">
<thead>
<tr>
<th>
Student Name
</th>
<th>
Section
</th>
</tr>
</thead>
<tbody>
<!-- ko foreach: rows -->
<tr>
<td>
<a data-bind="text: studentName, attr: { href: studentUri }"></a>
</td>
<td>
<a data-bind="attr: { href: studentSectionUri }" class="all-students-section-column">
<!-- ko with: studentSection -->
<span data-bind="text: text" />
<!-- ko with: icon -->
<div class="all-students-section-icon" data-bind="visible: SectionA">
@{ Html.RenderPartial("~/Views/Partial/Svg/SectionA.cshtml"); }
</div>
<div class="all-students-section-icon" data-bind="visible: SectionB">
@{ Html.RenderPartial("~/Views/Partial/Svg/ErrorCircle.cshtml"); }
</div>
<div class="all-students-section-icon" data-bind="visible: SectionC">
@{ Html.RenderPartial("~/Views/Partial/Svg/SectionC.cshtml"); }
</div>
<!-- /ko -->
<!-- /ko -->
</a>
</td>
</tr>
<!-- /ko -->
</tbody>
</table>
</div>
</script>


The current behavior is such that when a studentName is clicked, it redirects to the studentUri page and when studentSection is clicked, it redirects to the studentSectionUri.

I want to add functionality to log the click data. So I tried this:

export default class AllStudentsPageViewModel implements ViewModel {
public rows: KnockoutObservableArray<StudentTableRow>;

public selectedItemLogging = function (studentTableRow: StudentTableRow): void {
const loggingData = {
studentName: studentTableRow.studentName,
studentSection: studentTableRow.studentSection
}

Logging.trace("RowSelected", loggingData);
}

constructor() {
this.rows = KnockoutUtility.computedArray(...(logic involving observables)..);
}
}


In the cshtml, I added this function in the html using data-bind like this:

...
<!-- ko foreach: rows -->
<tr data-bind="click: $parent.selectedItemLogging">
<td>
<a data-bind="text: studentName, attr: { href: studentUri }"></a>...


There are two issues:


  1. Clicking the row executes the selectedItemLogging as expected. But it is not redirecting to the clicked uri(either studentUri or studentSectionUri). How can the code be changed such that the redirect behavior is still the same?

  2. Currently I am getting the complete information of the row clicked. Additionally, I want to know whether the studentName has been clicked or whether the studentUri has been clicked to log that information. How can I get this information?


Answer Source
  1. to propagate the event from ko to native, return true from the click function

  2. click function's second argument is event so use that to determine event.target

your click function should be like

public selectedItemLogging = function (studentTableRow: StudentTableRow, event): void {
    const loggingData = {
        studentName: studentTableRow.studentName,
        studentSection: studentTableRow.studentSection
    }
    // use event.target to find out which link got clicked 
    var clickedUri = event.target.href;

    Logging.trace("RowSelected", loggingData);

    // this will propagate the event    
    return true;
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download