Grid with Ever present row with column – Need a Add/Reset Button instead of link

[SwapnilParticipant]

Hello
I need to build a grid with ever present row with columns. The current implementation of Add and Reset link in separate column creates a link with href=”#” which redirects our app to homepage.
Is there a way to override it and make it “javascript:void();” so that it will not redirect.
below is the code :

let settings: jqwidgets.GridOptions = this.jqxGridHelper.defaultGridSettings();
    settings.altrows = true;
    settings.height = "240px";
    settings.autoheight = false;
    settings.pageable = false;
    settings.autorowheight = false;
    settings.columns = [
      { text: 'BIN', columntype: 'textbox', datafield: 'bin',  filtertype: 'input', align: 'center', cellsalign: 'center',
        validateeverpresentrowwidgetvalue: this.validateFunction},
      { text: 'PCN', columntype: 'textbox', datafield: 'pcn',  filtertype: 'input', align: 'center', cellsalign: 'center',
        validateeverpresentrowwidgetvalue: this.validateFunction},
      { text: 'Group No.', columntype: 'textbox', datafield: 'groupNo',  filtertype: 'input', align: 'center', cellsalign: 'center',
        validateeverpresentrowwidgetvalue: this.validateFunction},
      { text: '', datafield: 'addButtonColumn', width: 50},
      { text: '', datafield: 'resetButtonColumn', width: 50}
    ];
    settings.filterable = true;
    settings.showeverpresentrow = true;
    settings.everpresentrowposition = "top";
    settings.everpresentrowactions = "add reset";
    settings.everpresentrowactionsmode = 'columns';

This generates Add and Reset columns with links, is there way to render it something like cellsrenderer we use on regular columns?

Thanks,
Swapnil.

[adminKeymaster]

Hi Swapnil,

Have you tried with document.querySelector and point out these elements in the selector args?

Regards,
Peter

jQWidgets Team
https://www.jqwidgets.com/

[SwapnilParticipant]

hi Peter,
I don’t think we can select these elements. It only adds an anchor tag with href.
When I see in the developer tool I see the div tag as shown below.
<div style="padding-bottom: 2px; text-align: center; margin-top: 7px;"><a href="#">Add</a></div>

You can see this on the DEMO page as well
https://www.jqwidgets.com/angular/angular-grid/#https://www.jqwidgets.com/angular/angular-grid/angular-grid-everpresentrowwithcolumns.htm
Select Ever present row with columns.

Instead of href="#", if you could change it to href="javascript:void()", it won’t navigate.

Thanks,
Swapnil.

[adminKeymaster]

Hi Swapnil,

We will create a work item about that.

Regards,
Peter

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts