Why primefaces ajax rowSelect event oncomplete method argument id is empty?

[ChenYouRen]

My code:

<h:form id="form">
    <p:dataTable var="article" value="#{articleTable.articles}" lazy="true"
                 selection="#{articleTable.selected}" selectionMode="single"
                 emptyMessage="#{text['emptyMessage']}" rowKey="#{article.id}">
        <p:column style="display:none;">
            <h:outputText value="#{article.id}" />
        </p:column>
        
        <p:column headerText="#{text['titleText']}">
            <h:outputText value="#{article.title}" />
        </p:column>

        <p:column headerText="#{text['summaryText']}">
            <h:outputText value="#{article.summary}" />
        </p:column>

        <p:column headerText="#{text['categoryText']}">
            <h:outputText value="#{article.category}" />
        </p:column>

        <p:column headerText="#{text['statusText']}">
            <h:outputText value="#{article.status.text}" />
        </p:column>
        
        <p:ajax event="rowSelect"
                oncomplete="handleRowSelect('#{article.id}')"/>
    </p:dataTable>
</h:form>

<script type="text/javascript">
    function handleRowSelect(id) {
        if ( id )
            window.location.href = 'article.xhtml?id=' + id;
    }
</script>

#{article.id} has value, but "handleRowSelect('#{article.id}')" argument value is '' empty.
I use Chrome F12; it has called handleRowSelect() method, but the id value is '' empty; why?

How do I fix it?
Do I have to use commandLink or commandButton? Can't I click on a row to redirect page?

Executable example:
rowSelect-event.zip
Please mvn install first before run it.

[melloware]

@ChenYouRen onComplete is client side Javascript that executes after the AJAX event returns. #{article.id} is a JSF EL expression evaluated for each row of the table on table render. So if you were expecting that to come back in the oncomplete i think you need to take a deeper dive into JSF lifecycle and how things work. What is performed on the server side and what is performed on the client side.

You want to study this example for how to properly use onRowSelect to get the selected item: https://www.primefaces.org/showcase/ui/data/datatable/crud.xhtml

[ChenYouRen]

Yes..., it seem must be row major then I can write #{article.id} for it.
But JSF table is column major. 😂
I found a way: it's client side redirect way for clicking a row data.
Update my code for reference:
rowSelect-event (2).zip