Hello Jonathan,

Thank you for your request and for providing details about your setup. I understand that you are working in a Knockout.js environment. Unfortunately, I am unable to directly account for the specifics of Knockout.js as it is a third-party library. However, I’ve created a simplified example using Ignite UI for jQuery that achieves the same goals. You can adapt this to your setup with minimal adjustments. Here's an explanation of how it works:

• Row Selection
  The grid’s Selection feature lets users select rows. Whenever a row is selected, an event (rowSelectionChanged) captures the details of the selected row and stores it in a global variable (selectedRow). This ensures the selected row’s information is readily available for other actions, like viewing details.

• Viewing Property Details
  The "View Property" button and the binocular icon trigger the same functionality. When clicked, they call the showPropertyModal function, which retrieves the details of the selected row from the dataset and displays them in a modal.wwwww 

• Dynamic Modal Display
  The showPropertyModal function uses the selected row's ID to locate the relevant property in the dataset. If the property is found, its details are shown in a modal. If not, an error message alerts the user.

The use of the rowSelectionChanged event keeps the selectedRow variable updated with the latest selection.

If you’re working within a Knockout.js environment, you can:

1. Bind Knockout observables to replace the selectedRow variable.
2. Use Knockout’s data-bind attributes for the binocular icon and button.
3. Adapt the showPropertyModal function to use your ViewModel's properties.

<script>
        
    $(function () {
        let selectedRow = null;
        const sampleData = [
            {
                view: '',
                property_id: 1,
                SBL: '123-456-789',
                County: 'Orange',
                Address: '123 Main St',
                Locale: 'Orlando',
                State: 'FL',
                Zip: 32801,
                OwnerName: 'John Doe',
                Respondent: 'Jane Smith',
                SchoolDist: 'Orange'
            },
            {
                view: '',
                property_id: 2,
                SBL: '987-654-321',
                County: 'Los Angeles',
                Address: '456 Elm St',
                Locale: 'Los Angeles',
                State: 'CA',
                Zip: 90001,
                OwnerName: 'Alice Johnson',
                Respondent: 'Bob Brown',
                SchoolDist: 'LA Unified'
            },
            {
                view: '',
                property_id: 3,
                SBL: '555-666-777',
                County: 'Cook',
                Address: '789 Pine St',
                Locale: 'Chicago',
                State: 'IL',
                Zip: 60601,
                OwnerName: 'Carlos Martinez',
                Respondent: 'Laura Garcia',
                SchoolDist: 'Chicago Public'
            },
            {
                view: '',
                property_id: 4,
                SBL: '222-333-444',
                County: 'Harris',
                Address: '101 Oak St',
                Locale: 'Houston',
                State: 'TX',
                Zip: 77001,
                OwnerName: 'David Nguyen',
                Respondent: 'Emily Wang',
                SchoolDist: 'Houston ISD'
            },
            {
                view: '',
                property_id: 5,
                SBL: '111-222-333',
                County: 'King',
                Address: '202 Cedar St',
                Locale: 'Seattle',
                State: 'WA',
                Zip: 98101,
                OwnerName: 'Chris Evans',
                Respondent: 'Natalie Portman',
                SchoolDist: 'Seattle Public'
            }
        ];


        $('#grdProperties').igGrid({
            dataSource: sampleData,
            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",
                    mode: "row",
                    activation: true,
                    rowSelectionChanged: function (evt, ui) {
                        selectedRow=ui.row
                    }
                },
                {
                    name: 'RowSelectors',
                    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: 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%' },

            ],
        })

        // Handle Binocular Icon Click
        $(document).on('click', '.binocular-icon', function () {
            showPropertyModal(selectedRow.id);
        });

        // Handle Button Click
        $('#view-property').on('click', function () {
            showPropertyModal(selectedRow.id);
        });

        // Show Property Modal
        function showPropertyModal(propertyId) {
            const property = sampleData.find((p) => p.property_id === propertyId);
            if (property) {
                $('#modal-content').text(`Property Details: ${JSON.stringify(property, null, 2)}`);
                $('#property-modal').show();
            } else {
                alert('Property not found.');
            }
        }
    });
    </script>
</head>
<body>
<!-- Grid Container -->
<div>
    <button id="view-property" class="btn">View Property</button>
</div>
<div>
    <table id="grdProperties"></table>
</div>

<!-- Property Modal -->
<div id="property-modal" style="display:none;">
    <p id="modal-content"></p>
    <button onclick="$('#property-modal').hide()">Close</button>
</div>
</body>
</html>

I am providing the sample code for your review and testing, let me know if you have additional questions.

Best Regards,
Arkan Ahmedov

Infragistics
3056.index.zip