I have the following igGrid defined:
$('#grdProperties').igGrid({
dataSource: [],
width: '100%',
autofitLastColumn: false,
fixedHeaders: true,
renderCheckboxes: true,
primaryKey: 'property_id',
autoCommit: true,
autoGenerateColumns: false,
autoGenerateLayouts: false,
features: [
{
name: 'Updating',
editMode: 'none',
validation: false,
enableAddRow: false,
enableDeleteRow: false,
},
{
name: 'Selection', //multipleSelection: true
},
{
name: 'RowSelectors',
enableCheckBoxes: true,
enableRowNumbering: false,
rowSelectorColumnWidth: '15px'
},
{ name: 'Paging', type: "local", pageSize: 3, pageSizeDropDownLocation: 'inpager' }
],
columns: [
{ headerText: 'View', key: 'view', dataType: 'string', width: '5%', template: '<span style="text-align: center; display: block;" class="binocular-icon" data-bind="click: $parent.OpenPropertyPopUp"><i class="fas fa-binoculars"></i></span>'},
{ headerText: 'property_id', key: 'property_id', dataType: 'number', width: '10%', hidden: true },
{ headerText: 'SBL', key: 'SBL', dataType: 'string', width: '10%' },
{ headerText: 'County', key: 'County', dataType: 'string', width: '10%' },
{ headerText: 'Address', key: 'Address', dataType: 'string', width: '20%' },
{ headerText: 'City', key: 'Locale', dataType: 'string', width: '15%' },
{ headerText: 'State', key: 'State', dataType: 'string', width: '6%' },
{ headerText: 'Zip', key: 'Zip', dataType: 'number', width: '7%' },
{ headerText: 'Owner Name', key: 'OwnerName', dataType: 'string', width: '12%' },
{ headerText: 'Respondent', key: 'Respondent', dataType: 'string', width: '12%' },
{ headerText: 'SD', key: 'SchoolDist', dataType: 'string', width: '5%' },
],
});
I also have this code in the same javascript file:
vm.OpenPropertyPopUp = function (show) {
console.log("got here");
let property_id = 0;
const selectedRows = vm.eunPropertySelectedRow();
if (selectedRows.length > 0)
{
const firstRow = selectedRows[0]; // Access the first element
property_id = firstRow.id;
vm.eunPropertyId(property_id);
var res = GetPropertyData(property_id, 'front');
vm.propertyData(ko.mapping.fromJS(res));
UIkit.modal('#property-modal').toggle();
} else
{
DisplayGeneralMessage("You need to select a property from the grid");
}
}
And I have this in an HTML file:
<div class="uk-width-1-2">
<button class="btn" style="float: right; vertical-align: middle; padding-top: 5px; padding-right: 5px" data-bind="click: OpenPropertyPopUp;">View Property</button>
</div>
When I run my application and I end up clicking on the button, I see in the console “got here” and the model that is defined opens. This is the expected behavior.
I am experiencing a few things:
1 – When I click on the binocular icon, the system places a check mark in the checkbox next to the binocular. Eventually, I want to remove the column that has the checkbox so I have it in there for testing purposes. Why would clicking on the binocular end up placing a check mark in the check box?
2 – When I click on the binocular icon, nothing seems to happen. I do not get any errors in the console and I do not see the text “got here” so I have to assume that the click on the binocular does not end up calling OpenPropertyPopUp.
Any assistance is greatly appreciated.
Thank you.