Change view to Grid

[dan123Participant]

Hi i created an example using the drag and drop shop example, where i removed all the drag and drop functionalities and on a click of the button I am trying to create switch layout from this shop column type view to show as grid table view.

Also i have this checkbox which once as i do switches between each view, i want to keep the state of checkbox whether it is checked or unchecked.

Output trying to achieve:
Click glyphicon button to switch current shop view to a grid table view. Basically switching between back and forward.
Grid table will have columns like “Item, Price, etc”

Here is my jsfiddle:
http://jsfiddle.net/snXa5/81/

[dan123Participant]

Hi Achieved loading it to the grid, now i just trying to figure out the checkbox selection on both views. So if i checked one of the t-shirt in the column view it should also select that item on the grid too. How to achieve this?

Output expecting:
1. Checked Retro Rock t-shirt from column view while also selecting on the grid view.
2. Checking Retro Rock t-shit from grid view will also select that on the column view.

Same for unselecting, if i unslect/uncheck from any view need to do accordingly.

Here is the updated jsfiddle:
http://jsfiddle.net/snXa5/155/

[StanislavParticipant]

Hello dan123,

I would suggest you to take a look at this demo: Link
It is form the DropDownList but it has the same idea you want to implement here. Take a look at it and you might be able to find the solution on your own!

Best Regards,
Stanislav

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

[dan123Participant]

Ok i changed the logic a little bit, i have dynamically assigned a ‘id’ for each checkbox for the column view and using that “id” I was able to bind a click event with the grid so if i select “Tyreese Burn” or any of the shirts in the column view it would also select/unselect that in the grid too. Which i am glad thats working.

Now i need help to bind a rowselect event to the same. Where if i select a row in the grid, it should also check that checkbox based on the id.

Problem i am facing is that its “checking” all the checkboxes of the column view, it should be checking the shirt that i selected in grid.

I have commented out the “rowselect and rowunselect” function, just in case.

Example output trying to achieve:
1. Grid select first row Tyreese Burn
2. Column view should just check Tyreese Burn and checbox should be checked.

I am so close to fixing this, so i really need a solution for this.

Here is my jsfiddle:
https://jsfiddle.net/zzmeega0/171/

[dan123Participant]

Ok i was able to have the checkbox working for both column view and grid view. But now i am stuck in this problem, let me explain as an example.

Example:
1. From column view: Select “Tyreese Burn”, Look at the grid it will show that row was also selected too. Thats good
2. From the grid, unselect this row “Tyreese Burn”, look at the column view it will show that the item as been unchecked. Thats good Hooray
3. From column view Select “Tyreese Burn” again, and look at the grid. Doesn’t seem to show the selected row. But try clicking this “Tyreese Burn” again and it will show the grid row as be selected.

Same scenario if the other way around:
1. If started off with selecting “Tyreese Burn” from the grid, look at the column view it shows the item is selected. Thats good
2. Now unselect “Tyreese Burn” from column view, and look at grid the row is not unselected.

Look at the $(‘.jqxCheckBox’).on(‘click’, function(){

I am sure i am not doing behavior correctly.

Here is my updated jsfiddle:
https://jsfiddle.net/zzmeega0/271/

[Author]

Posts