Columns prevent reorder

[gioParticipant]

Hi,
I was wondering if there is any callback/event that can be used to prevent columns reorder.
I mean, I’ve 4 columns in my grid; only the last three can be reordered, but, none of them should be moved at first position.

If not, do you think is there any workaround to achieve this?

Thanks in advance.
Giovanni

[SoftwareIsHappinessParticipant]

Hi,

You should create an event handler and check to see if the columns to be re-ordered are allowed and if not then use event.cancel = true to prevent the re-order. For example:

 $('#jqxgrid').on('columnreordered', function (event) {
    var allowed = true;
    /* Write you condition to set variable allowed to false if columns should not be re-ordered */
    // event arguments.
    var args = event.args;
    // column text.
    var columnText = args.columntext;
    // column data field.
    var dataField = args.datafield;
    // old column index.
    var oldIndex = args.oldindex;
    // new column index.
    var newIndex = args.newindex;
    if (allowed == false)
       event.cancel = true;    
 });

NOTE: You are binding to the “columnreordered” of the jqxgrid component.

Hope this helps! 🙂
Michael

[DimitarParticipant]

Hi Giovanni,

An alternative solution would be to pin the first column of your grid (set pinned: true in its definition). Here is a demo on the matter: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/pinnedcolumns.htm?light.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[gioParticipant]

Thanks both for your replies.
The event.cancel solution doesn’t seem to work. Instead the “pinned” one, is exactly what I needed.

There is any chance to “pin” a column and leave that at the end of the column?

Giovanni

[SoftwareIsHappinessParticipant]

Hi Gio,

The pinned option is the right feature to use. 🙂 However, I think a “columnreordering” event would be ideal so that the event might be prevented or accepted by the grid. Unfortunately, it appears that a “before” and “after” event doesn’t exist for column re-ordering just an “after” event— “columnreordered” (past tense)?

Michael

[DimitarParticipant]

Hi,

Giovanni, I am not sure I understand your question “There is any chance to “pin” a column and leave that at the end of the column?” If you wish the pinned column to be on the right side of the grid, this can only be achieved by setting the property rtl to true (example). If not, please clarify.

Michael, you are correct and there is no event triggered before or during column reorder in the API of jqxGrid.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[gioParticipant]

Hi Dimitar, thank you for your reply.
You exactly understood what I meant, and actually clarified my doubt.

Unfortunately I need to pin two columns, the first one at the beginning of the grid and the last one at the end (as last column of the grid).
Basing on what I read from your replies I can say at the moment I think there is no way to achieve this.

As Michael was suggesting, a “before-columnreordered” event would be the perfect solution.
Dimitar, do you think there will be any plan about developing this new feature on next releases of jqwidgets?

Giovanni

[SoftwareIsHappinessParticipant]

Hi Giovanni,

It seems that the approach for most all JQWidget component events is to capture the event and perform post-processing. Since there doesn’t appear to be very many “before” events that may be captured. As a result, the only suggestion might be to use save state of the grid and then restore it.

Perhaps Dimitar can offer a better approach to implement life cycle events for a component. Otherwise, your only alternative may be to use to intercede and inject your “before” event into the grid event jQuery propagation/delegation.

I agree that recommending to JQWidgets to add “before” events to their component life cycle is a feature set that is apparently very much needed.

Michael

[SoftwareIsHappinessParticipant]

Hi Giovanni,

Also, a couple of workarounds that have worked for me in the past:

jQuery .css()

Make sure your selector is only applies “pointer-events” to the first and last column headers– this will prevent any mouse events so the user will not be able to drag-n-drop columns (reorder).

$("selector").css("pointer-events", "none");

jQuery .off()

Remove delegated click handlers altogether. Be careful. Make sure your selector is specific so as not to interfere with jQWidgets.

$("selector").off("click", "**");

Hope this helps 🙂
Michael

[DimitarParticipant]

Hi,

Thank you both for your feedback. Unfortunately, implementing a “before-columnreordered” event is not in our immediate plans, but we will consider this feature for a future implementation.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts