jqxgrid master detail button header select all

[dan123Participant]

Hi I created this jsfiddle where I want to keep the custom checkbox and Right above it I have a button that can also select all rows and push to the other grid. My checkbox header functions correctly. But my button header does not push the detail to the other grid. I was successfully able to select all and unselect all rows based on the button click. Only problem is I want it to push the details on the other grid similar to what the checkbox header functions.

The button is using a toggle button effect where if the value is “All” it would select all rows from all pages. If value is “None” it would unselect all rows.

Here is my jsfiddle:
https://jsfiddle.net/UbK74/522/

[HristoParticipant]

Hello dan123,

The provided source code is a huge and we do not have practice to revising this kind.
Please, take a look at this example.
I would like to suggest you simplify your example.
You could try to use methods out of the ‘for loop’ and also to use selectrow, selectallrows, unselectrow and e.g.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dan123Participant]

Hi Hristo. Sorry about I want the toggle button to select all rows in all pages. And the checkbox header will still keep the single page selection

[HristoParticipant]

Hello dan123,

Could you clarify what you want to achieve?
When you check the checkbox you want to select all rows. In that case you should implement a logic to select all rows.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dan123Participant]

Hi Hristo I figured it out. One last thing I need help on is that.

I have 2 grid, one on each tab. Both the grid have a columngroup renderer with a button and there is a submit button on the Home tab.
Whenever I click on the “Submit” button It would just do source update on the other grid in the tab “Profile”. Now notice the columngroup renderer with the button for this grid in the “Profile” tab, it loses the jqxbutton property. .

You will notice the problem by just clicking on the “Submit button” and try toggle to the “Profile” tab. The second grid with the columngroup renderer that has the button loses its jqxbutton property.

Here is my jsfiddle:
https://jsfiddle.net/evL5pk6e/35/

[HristoParticipant]

Hello dan123,

The render callback is called each time when you re-create or update the Grid view. For that reason, the button loses settings.
You could bind to bindingcomplete event and add the button settings. Please, take a look the example below:

 $("#ordersGrid").on("bindingcomplete", function (event) {
	$("#jqxButton2").jqxToggleButton({ width: 40, toggled: true });
});

One more thing that I notice is “columngroups” you implement it twice within the second Grid.
I also would like to say that we recommend using our widgets (I mean jqxTabs).

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dan123Participant]

Hi Hristo, the jqxbutton2 loses its property. I tried what you said about the bindingcomplete event and the jqxbutton still lost its property:
$(“#ordersGrid”).on(“bindingcomplete”, function (event) {
$(“#jqxButton2”).jqxToggleButton({ width: 40, toggled: true });
});

fiddle:
https://jsfiddle.net/evL5pk6e/43/

[dan123Participant]

Hi Hristo, I tried using the “rendered” property on the second grid in tab “Profile”. It seems to work but when I added in rowdetails to this grid, now the entire grid freezes up. I also tried the bindingcomplete function event, and still the jqxbutton lost its property. I have reduced the code so its simpler now.

Test by just clicking the submit button
JSfiddle
https://jsfiddle.net/evL5pk6e/211/

[HristoParticipant]

Hello dan123,

I tested your example and it looks work fine, but only in the initial settings for this button.
Could you clarify? If you mean about some functionality that you add to click event, you should add again to this button in the bindingcomplete event.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[dan123Participant]

Weird in mine does nothing. Just freezes the grid

[dan123Participant]

Hi Hristo, You gave me an idea. I tried to put the button similar to the way the custom checkbox was rendered. It works but I cannot toggle the text from “ALL” TO “None”

jsfiddle:
https://jsfiddle.net/evL5pk6e/285/

[dan123Participant]

Hi Hristo, i figured it out. Just one more thing, how can you put multiple elements inside a custom column header. So for example the checkbox header its custom, how can you put the “All” button right next to that checkbox? It would be great if you can show please

I noticed in this post someone tried on cell renderer to put two buttons inside a cell.
http://www.jqwidgets.com/community/topic/multiple-buttons-in-a-grid-column/

Here is the jsfiddle:
https://jsfiddle.net/evL5pk6e/285/

[HristoParticipant]

Hello dan123,

You cannot add an item next to the header checkbox.
If you want something similar could override the logic of the checkboxes and write your own – with selectrow method, columnclick and cellclick events, and etc.
Please, take a look at this topic:
http://www.jqwidgets.com/community/topic/to-have-jqxgrid-checkbox-column-in-the-column-other-than-the-first-column/

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[Author]

Posts