Grid Cell with Hyperlink and Path

[walker1234Participant]

By any chance, there is an example of jQXgrid where one of the column’s text (all rows) are hyperlinked. And when a hyperlinked cell is clicked a new jQXgrid is created?

I am looking for the following possibilities, please let me know if that’s possible or not :

1) Grid 1 is always fixed. When I click on say for example, cell 1 of row1 which is hyperlinked, it’s going to open a new jQXgrid (let’s call it Grid 2) but Grid 2 should contain the path, I mean something which says that user has come to Grid 2 from grid 1. Similarly, when a user clicks on any of the hyperlinked cell of grid 2, they should see grid 3 and a path should be there explaining that they come from grid 1–>Grid2. Is this scenario possible?

2) Can I have Download/Export button on each of the grids starting from Grid 2 to 3 and so on an so forth.

3) Would it be possible to destroy the grid 2 and all other grids after grd 2 when a user clicks on a new cell of grid 1 (for example cell 2 of row 2)?

Thanks

[MartinParticipant]

Hello walker1234,

Here is an Example which shows how you can create a new grid on ‘rowclick’ event.
When you click on a cell, you create a new grid and you can save the path from which grid it came.

You can have export buttons for each grid, for this purpose you will need to add ids to the grids.

JqxGrid has destroy method, so you can invoke it whenever you want.

Best Regards,
Martin

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

[walker1234Participant]

Thanks Martin for the example.

1) I couldn’t get how to use the destroy method of the grid. I used the following approach around line #54 and it worked. Is it a correct approach or should I consider using destroy method? I had to add an element ID here though. Please let me know if this looks correct or not.

` $(‘#commonWindow’).remove();
var elem = document.createElement(‘div’);
elem.id = ‘commonWindow’; `

2) For adding export or download button on the grid , could you tell me if there’s an example? I haven’t seen any jqxgrid which contained the button in itself. I mean if a grid is destroyed the button goes away with it as well.

Thanks

[MartinParticipant]

Hello walker1234,

This is how you should invoke the destroy method: $("#grid" + id).jqxGrid('destroy');

Here is an Example that shows how you can create export buttons for each grid you add.

Best Regards,
Martin

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

[walker1234Participant]

Thanks Martin for the JSFiddle.

I am trying to accomplish somewhat different requirement. I created a JSFiddle based on your logic to explain my situation :

https://jsfiddle.net/qtuse9ao/1/

1) My first grid is fixed, when a user clicks on any row, a new grid is generated.Let’s call it second grid for discussion.

2) This second grid has an id staticgrid as shown in the JSFiddle above. When I click on this grid, a third grid is generated with Export Grid 1 Button.

Now, I am wondering if it’s possible to automate this process. By automating, I mean, when I click on this third grid which has Export Grid 1 button, a new grid (fourth) should be generated (maybe with Export Grid 2 button), similarly if I click on this fourth grid, a fifth grid should be generated (maybe with Export Grid 3 button) and so on and
so forth. I drew a diagram to explain this situation better.

[MartinParticipant]

Hello walker1234,

Yes, the previous example that I have sent you shows the recommended approach for generating a new grid with an export button and how to add the event handlers.
However, the rest depends on your application’s logic.

Best Regards,
Martin

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

[walker1234Participant]

Thanks.Could you take a look at the fiddle below. I think I am close to what I want but having issues with few things as explained below:

http://jsfiddle.net/0juytb31/2/

Issue #1:

When I click on (say for example) first row, I could see the text (click me to display jQXGrid!) and when I click on the text, I could see the jQXgrid over there. But I don’t want the text thing to appear and instead, I want just a grid to show. And upon clicking the latest grid, I want to see new grid, so on and so forth. Same thing is happening now but it’s making use of the text click me to display jQXGrid!.

Can you tell me how can I display the grid instead of the text so that I won’t have to click on the text thing to display the grid. I am not sure how to include the grid in this line pf the code and get rid of text thing. :

var newEl = $("<div/>",{class:"clickable",id :"grid"+id,style: "margin:100px 10px 20px 460px ",text: 'click me to display jQXGrid!'});

Issue #2:

When I click on second or any other row after clicking ,say for example first row, how can I make sure that the new grid isn’t added after the latest one? I mean it should start just below the original grid. I remember you mentioned destroy method but when I tried to do the following :

if($(".clickable").length != 0){
                    //$(".clickable").remove();

                    $(".clickable").jqxGrid("destroy");
                }

The original grid disappeared which make sense because I am destroying the grid with the class = clickable.

Let me know if I can answer more questions.

Thanks

P.S: Please note that the above approach is inspired by this approach (JSFiddle here ) and it’s based on the fact that we should not change the class name with newly generated ID.
The approach you mentioned in your example in this thread sounded good when I want to generate multiple grid by clicking different rows of the original grid (fixed grid). However, I couldn’t see it fitting well in my above approach (unless I am wrong) and hence I used the approach inspired by the above fiddle.

[MartinParticipant]

Hello walker1234,

I have updated your Example.
Now, clicking on a row of the original grid creates the new one.
And after that clicking on a row of any of the two grids removes the second one and replaces it with a new one with the new id generated, and so on.

I hope that this is the result that you needed.

Best Regards,
Martin

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

[walker1234Participant]

Thanks Martin. Actually, I have got it working here in this Example JSFiddle. It has a button as well displaying just below the grid.

One last thing, I was trying to put jQXButton to export the data using the following code but I get an error. Here is the JSFiddle which is modified version of above one where I am trying to replace the <button> logic with jqxButton.

var $button = $("<div id = 'testbutton'></div>").on('click', function (e) {
    alert('button clicked');
  });
 
  
  $("#testbutton").jqxButton({ value: 'Export Grid '});

[MartinParticipant]

Hello walker1234,

Again, I have updated your last Example to display the jqxButton.

Best Regards,
Martin

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

[Author]

Posts