[robfParticipant]

Hi Peter,
You pointed me in the right direction, and flagging whether I am already inside the event handler did help.
Appreciate your time!
Rob

[robfParticipant]

—
Hi Peter – one more follow up question please. It appears that if I do use selectionmode=”multiplerows” there is no way to do a SELECT ALL / SELECT NONE? i.e. the standard CTRL-A doesn’t work in the grid to select all rows, and I don’t see any way to select none.

Any ideas on this? Is this something I would have to build myself?

Also, for a bit more context, the grid has to change from single-select to multi-select based on other things going on in the app. So the selection mode is dynamically set.

Thanks.
Rob

[robfParticipant]

Hello Peter,

Hoping you can give some guidance on this. Trying to build the shift select functionality for the checkboxes and got something generally working.
Problem is, it is very, very slow. Wanted to know if you see something obvious in my code for optimization. Maybe something with how I am using beginupdate and endupdate

Appreciate any direction on this!
Thanks
Rob

	
myJQGrid.on('rowselect rowunselect', event =>
			{
			handleCheckboxMultiSelect(event);
                        }

var lastSelectedRowIndex = null;

handleCheckboxMultiSelect = event => 
	{
		let grid = myJQGrid;
		let rowIndex = event.args.rowindex;
	
		if (isShiftKeyPressed) 
		{
			if (lastSelectedRowIndex !== null) 
			{
				let startRow = Math.min(rowIndex, lastSelectedRowIndex );
				let endRow = Math.max(rowIndex, lastSelectedRowIndex );
	
				grid.jqxGrid('beginUpdate');

				for (let i = startRow; i <= endRow; i++) 
				{
			           this.toggleCheckboxForRow(grid, i, event);
				}

				grid.jqxGrid('endupdate');
			}
		} 
		else 
		{
			this.toggleCheckboxForRow(grid, rowIndex, event);
		}
	
		lastSelectedRowIndex = rowIndex;
	}
	
	toggleCheckboxForRow = (grid, rowIndex, event) =>
	{
		var rowData = grid.jqxGrid('getrowdata', rowIndex);

		if (rowData)
		{
			rowData.selected = !rowData.selected; 
			grid.jqxGrid('updaterow', rowIndex, rowData);
			grid.jqxGrid(event.type === 'rowselect' ? 'selectrow' : 'unselectrow', rowIndex); 
		}
	}

• This reply was modified 2 months, 3 weeks ago by  robf.
• This reply was modified 2 months, 3 weeks ago by  robf.
• This reply was modified 2 months, 3 weeks ago by  robf.
• This reply was modified 2 months, 3 weeks ago by  robf.
• This reply was modified 2 months, 3 weeks ago by  robf.

[robfParticipant]

Thanks, Peter. So for the time being my only option is to go with selectionmode “multiplerows”?
No temporary work-around/reuse of some code from smart.grid?

Rob

[robfParticipant]

Follow-up question – I know there is the selectionMode of “multiplerows” but I wanted to take advantage of the “visual” aspect of selecting via checkboxes and also the ‘select all/select none’ options.
Hope this further clarifies by question.

[robfParticipant]

Excellent point, Peter. I am taking your suggestion!
Thank you.
Rob

[robfParticipant]

Hi,
Can you please confirm I took the correct approach to solving my issue?

I override the following CSS in my own styles.css file:

.jqx-grid-card-cell-label 
{
	width: 35%;
	white-space: nowrap;
}
.jqx-grid-card-cell-value 
{
	width: 65%;
}

[robfParticipant]

Thanks, Peter. As always, I appreciate your help.

Rob

[robfParticipant]

Hi Peter,
Moving the code to the top of the toggleSortMode method cause the multisort options to not be “remembered” correctly.
In single mode, click on a column; then switch to multisort and select 4 columns, then switch to single, but not click anything, then switch back to multi, the columns are correctly remembered.

Then go back to multisort and select another column, then switch to single, click on different column, then switch back to multi, the columns are no longer correctly remembered, and in some instances the SINGLE sort column is added to the multisort.

I guess I am still trying to understand why the sortColumns array isn’t automatically cleared when switching modes, since the recommendation is to try and do this manually.

Thanks again for helping me this.

https://jsfiddle.net/rfossella/bhaozv8e/161/

Rob

[robfParticipant]

Hi Peter,

Unfortunately that does not solve the issue as I am still relying on the state of the sortColumns to reset the sort when the mode is switched. The fact the sort columns array keeps building up in single sort mode, instead of only including one column still presents a problem.

I updated fiddle with your suggestion: https://jsfiddle.net/rfossella/bhaozv8e/149/

Rob

[robfParticipant]

Hi Peter,
Thank you. That helped with that issue.

I have a follow-up question, please.

When I switch from single sort to multi-sort I get the sort info – i.e. ‘getsortinformation’. This shows something like:

{"sortcolumns":[
{"dataField":"lastname","ascending":true},{"dataField":"firstname","ascending":true},{"dataField":"sequence","ascending":true}],
"sortcolumn":"sequence","sortdirection":{"ascending":true,"descending":false}}

I use the “sortcolumns” to save the state of the sorted columns so I can reset to that state when I switch sort mode.

However, I notice that even when in single sort mode, each time I click on a new column that sortcolumns array grows, although I would expect it to show only a single item in the array with the currently sorted column. I rely on that list to reset the sort, regardless if I go back to single or multi sort. What ends up happening is, it doesn’t properly set the sorted column when I go back to single sort, since the last item in the list does not truly reflect the last clicked on column.

Please see the updated fiddle below which includes a “View Sort Info” button. Notice when in single sort mode that each time you click on a column it keeps adding items to the sortcolumns list. If this is the intended behavior, can you explain why? Or possibly offer a better way to handle it? Would I need to manually clear out the items in that array?

https://jsfiddle.net/rfossella/bhaozv8e/144/

Please make sure you switch sort modes to see the full effect of losing the last single sort setting.

Thank you!
Rob

[robfParticipant]

Hi Peter,
Thanks for replying.

I created the following fiddle to show the behavior: https://jsfiddle.net/rfossella/bhaozv8e/120/

I included lots of code comments to describe the methods. I also include DEMO comment in the app to describe the issue I am facing.

Hope this helps!
Thanks.
Rob

[robfParticipant]

Hi Peter,

FYI: I am using the light theme, which is apparently a ‘fluent’ theme.

I think I am following what you are saying, but if I override the CSS then aren’t I completely losing the index numbering on columns for the MULTISORT? It seems that way.

I only want to stop the INDEX numbering showing on the SINGLE sort. It seems I cannot make that behavior go away.

I even went to this extreme, which seems unnecessary (sorticon2):

.jqx-grid-column-header-light[sort][sort-index] .sorticon2 {
    align-items: center;
    width: 45px;
    flex-direction: row-reverse;
    margin-right: 5px;
}

.jqx-grid-column-header-light[sort][sort-index] .sorticon2:before {
    content: '';
    font-size: 11px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: none;
    color: none;
    padding: 5px;
    margin-left: 5px;
    height: 8px;
    box-sizing: content-box;
}

And then in my JS code, I am removing/adding classes:
$('.jqx-grid-column-header-light[sort][sort-index] .sorticon').removeClass("sorticon").addClass("sorticon2")

Please note, even with THAT logic, the mysterious INDEX number will STILL shows up when in single sort mode.

I know I could always choose a non-fluent theme, which is basically the same as overriding the CSS, but I really hate to lose the feature to have the index numbers show on the multisort.

Please share any other ideas.

Thanks, again.
Rob

[robfParticipant]

Hi Peter,

Is there a way to turn off the INDEXES on column headers only when in SINGLE sort mode? Because they continue to show up even if there is only ONE column sorted (in single sort).

I have a toggleSort() method where I check if I should change state to single sort or multi-sort. I then save the columns that were sorted on so I can use them again when the user changes the state.

So, can I have something like:

toggleSort()
{
   if ($("#jqxgrid").jqxGrid("sortMode") === "one)
   {
      //  Modify some CSS and turn OFF indexes
    }
   else {
      //  Modify some CSS and turn ON indexes
    }
}
}

Thank you!
Rob

[robfParticipant]

Not sure if this message made it through after edit…

Hi Peter,

I am sort of baffled by something. When I add sortmode: ‘many’ in my code it shows SORT PRECEDENCE numbers in the columns headers – same as the pic I shared here https://ibb.co/Hz9WgLj

When I look at the sort examples in the demos, and then in the fiddles, it only shows multiple asc/desc arrows for the sorted columns.

I did not add anything in my code to append those numbers shown. Don’t even know HOW I’d do this.

Can you at least tell me if YOUR code does this somewhere? A particular version? A setting?

I’m at a loss on this.

One thing that I see in my grid rendering is an iconscontainer and one of the child nodes shows order=”1″ .

Does that help?

`<div class=”iconscontainer” style=”height: 47.998px; margin-left: -32px; display: block; position: absolute; left: 100%; top: 0%; width: 32px;”>
<div class=”filtericon jqx-widget-header jqx-widget-header-light” style=”height: 47.998px; float: right; display: none; width: 16px;”>
<div class=”jqx-grid-column-filterbutton jqx-grid-column-filterbutton-light” style=”width: 100%; height:100%;”/>
</div>
<div class=”sortasc jqx-widget-header jqx-widget-header-light” style=”height: 47.998px; float: right; display: none; width: 16px;”>
<div class=”jqx-grid-column-sortascbutton jqx-grid-column-sortascbutton-light jqx-icon-arrow-up jqx-icon-arrow-up-light” style=”width: 100%; height:100%;”/>
</div>
<div class=”sortdesc jqx-widget-header jqx-widget-header-light” style=”height: 47.998px; float: right; display: none; width: 16px;”>
<div class=”jqx-grid-column-sortdescbutton jqx-grid-column-sortdescbutton-light jqx-icon-arrow-down jqx-icon-arrow-down-light” style=”width: 100%; height:100%;”/>
</div>
<!– ORDER=”1″ IS SETTING THE NUMBER ON THE COLUMN HEADER–>
<div class=”sorticon jqx-widget-header jqx-widget-header-light ascending” order=”1″ style=”height: 47.998px; float: right; visibility: inherit; width: 16px;”>
<div class=”jqx-grid-column-sorticon jqx-grid-column-sorticon-light jqx-icon-arrow-down jqx-icon-arrow-down-light” style=”width: 100%; height:100%;”/>
</div>
</div>

[Author]

Posts