ASP.NET Core Tag Helper – jqxGrid

[Wherever66Participant]

Hi
Since I applied jqxGrid tag helper, my rowselect event not working – actually the event doesn’t even triggered (I do include jqxgrid.selection.js)

<jqx-grid id=”grid” theme=”darkblue” show-aggregates=”true” source-id=”Id” source=”Model” instance=”getInstance()” on-rowselect=”ff()” on-bindingcomplete=”eventHandler()”>
<jqx-grid-columns>
<jqx-grid-column datafield=”Id” width=”10%” text=”Brand ID”></jqx-grid-column>
<jqx-grid-column datafield=”Name” text=”Brand Name”></jqx-grid-column>
<jqx-grid-column datafield=”Abbr” width=”20%” text=”Brand Abbr”></jqx-grid-column>
</jqx-grid-columns>
</jqx-grid>

@section Scripts {
<script type=”text/javascript”>
//none of following functions work or event triggered
function ff(event) {
entityID = 3;
}

$(‘#grid’).on(‘rowselect’, function (event) {
var rowBoundIndex = event.args.rowindex;
//entityID = $(“#grid”).jqxGrid(‘getcellvalue’, rowBoundIndex, “Id”)
alert(event.args.rowindex)
});

</script>
}

[HristoParticipant]

Hello Wherever66,

I try to re-create your case and it seems to work fine.
Please, take a look at this example:

<script src="~/jqwidgets/jqxbuttons.js"></script>
<script src="~/jqwidgets/jqxscrollbar.js"></script>
<script src="~/jqwidgets/jqxgrid.js"></script>
<script src="~/jqwidgets/jqxgrid.edit.js"></script>
<script src="~/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="~/jqwidgets/jqxgrid.filter.js"></script>
<script src="~/jqwidgets/jqxgrid.selection.js"></script>
<script src="~/jqwidgets/jqxgrid.sort.js"></script>
<script src="~/jqwidgets/jqxgrid.pager.js"></script>
<script src="~/jqwidgets/jqxgrid.aggregates.js"></script>
<script src="~/jqwidgets/jqxgrid.grouping.js"></script>
<script src="~/jqwidgets/jqxmenu.js"></script>
<script src="~/jqwidgets/jqxlistbox.js"></script>
<script src="~/jqwidgets/jqxdropdownlist.js"></script>

<jqx-grid theme="@ViewData["Theme"]" on-rowselect="rowselect()" editable="false" sortable="true" filterable="true" width="400" auto-height="true" source="Model" instance="getInstance()">
    <jqx-grid-columns>
        <jqx-grid-column datafield="Events" editable="false" text="Events Group"></jqx-grid-column>
        <jqx-grid-column datafield="Type" width="250" column-type="dropdownlist"></jqx-grid-column>
    </jqx-grid-columns>
</jqx-grid>

@{
    <script type="text/javascript">
        function getInstance(instance) {
            //var initialType = $('#EventCodes option:selected').text();
            instance["addrow"](0, { Events: 'New Events', Type: 'Initial' });
            instance["addrow"](0, { Events: 'New S Events', Type: 'Initial S' });
        };

        function rowselect(event) {
            console.log('rowselect', event.args.rowindex);
        };
    </script>
}

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts