0

I've been working on JQGid and has a requirement to combine common cells together in one big cell as shown!

enter image description here

Now the requirement is the add another cell below the last to that would have a clickable button in new cell in the Address column.Which is for adding a new address for adam whose dob is 11/11/1988.

So the help I require is to create a an empty cell dynamically as the datasource for the jqgrid is a json object and I won't be able to modify the json value PLease let me know any custom formatter you know for this specific odd requirement Any help would be appreciated

Below given is the cellattr function I've used to combine then Name field

    cellattr: function (rowId, val, rawObject, cm, rdata) {
                    var result;

                    if (prevCellVal.value == val) {
                        result = ' style="display: none" rowspanid="' + prevCellVal.cellId + '"';
                    }
                    else {
                        var cellId = this.id + '_row_' + rowId + '_' + cm.name;

                        result = ' rowspan="1" id="' + cellId + '"'+'"+"';
                        prevCellVal = { cellId: cellId, value: val };
                    }

                    return result ;
                }

This is the exact way I want my grid to be like The existing scenario

May be I'm not getting what you are trying to say but this is my current scenario and what I would need to is to move the add new Value dropdown to be added as a new row on the right side under the existing file or files (could be multiple based on the returned value from the server). I have used cellattr function as said above. with the answers i'm not able to fix this. Using formatter I'm able to move it to the right side when there are no files are returned. But I'm not able to move it to the side with values returned Further help would be appreciated Thanks in advance

Gotham's Reckoning
  • 129
  • 4
  • 19
  • why not just create your own formatter to suit your needs? – entropic Jul 24 '14 at 21:29
  • Can you be a bit more specific? Bcoz there would more than 1 value in Name and Dob columns as well. And i need to add an empty cell every new entry!! If you could post a sample of the formatter you mentioned it would be extremely helpful – Gotham's Reckoning Jul 24 '14 at 21:37
  • 1
    Well, what have you tried so far? This way, we can help you with what you need to do. It's hard to see the way you've configured the grid without any code posted at all. – entropic Jul 24 '14 at 21:40
  • I have used the above given cellattr function to combine the cells sorry for not adding it before – Gotham's Reckoning Jul 24 '14 at 21:54
  • Look at [the old answer](http://stackoverflow.com/a/12294020/315935). I used `cellattr` to make `rowspan`. So many other jqGrid possibilities could still work. You can try to modify my demo to your purpose. You can try to use `addRowData` and debug the code to find what you can do to make it working. – Oleg Jul 24 '14 at 22:04

1 Answers1

1

I posted the answer which shows how one can use rowspan attribute to fill the grid which is close to what you do. The demo from the answer you cellattr, but one can use setCell too to set rowspan too.

I made the demo to demonstrate this. It displays the following grid originally

enter image description here

after one clicks on the button "Click me to add new row" I use addRowData to add the row and use setCell to set new values for rowspan attributes of some previous rows. So one sees the following picture

enter image description here

I disable the button "Click me to add new row" because what I wrote is very rough code. I used just fixed values of rowid instead of analyzing the data and evaluating all required values full dynamically. Nevertheless the demo shows clear that one can fill such grids dynamically.

Inside of click event handler I used just the following calles

$("#list").jqGrid("addRowData", "100", { country: "USA", state: "California",... },
    "last");

$("#list").jqGrid("setCell", "60", "state", "", "", {rowspan: "5"});
$("#list").jqGrid("setCell", "10", "country", "", "", {rowspan: "10"});

UPDATED: One can add any HTML fragment (like <button>) in the same way. One more demo add buttons in the grid

enter image description here

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks @oleg But to make my issue a bit more clear as for your example right here my datasource json would come as a server response and I want that button to come inside a cell every time an particular type is over.As for your example after every city in Texas there should be another cell below dallas that says ADD Same for the state of California as well Anaheim. So my point is not to add a cell in the end of the grid but at the end of every state – Gotham's Reckoning Jul 25 '14 at 14:37
  • @MMG: You are welcome! I still don't see any problem. It's better if you explain your problem on **an example** (I mean the test data). I see no difference between local data and the data loaded from the server. You can make all required analyse and sorting of the data either on the server of you can "preprocess" the server response inside of `beforeProcessing` callback. Conditional adding of buttons is very easy if you use custom formatter. See [the answer](http://stackoverflow.com/a/14537512/315935) or [this one](http://stackoverflow.com/a/13765086/315935). – Oleg Jul 25 '14 at 15:18
  • I've editted the question with a picture of my required output !! please have a look thanks – Gotham's Reckoning Jul 25 '14 at 16:10
  • @MMG: I don't see any difference to the previous demo. See new demo from the **UPDATED** part of my answer. – Oleg Jul 25 '14 at 16:32
  • The data you have mentioned in the demo is hard coded *bold** $("#list").jqGrid("addRowData", "100", { country: "USA", state: "Texas", city: "", attraction: "some more", zip: "12345", attr: {country: {display: "none"}, state: {display: "none"}} }, "after", "50"); *bold** I was wondering how it would be in terms of dynamic input as if I wouldn't know the values like california or texas or USA, and of course it should be done Onload as well not on a button click Thanks again in advance – Gotham's Reckoning Oct 13 '14 at 18:19
  • Sorry for getting back on this so late but now this has become super high priority as I'm done with other issues I had.Looking forward to your help @Oleg – Gotham's Reckoning Oct 13 '14 at 19:23
  • @MMG: I wrote all data in the demo in so way to show *mostly clear* what can be done. I though that one can understand short code more easy. What you need is *reading of existing data* and *creating* structures (the constants like ids and `rowspan` values) which can be used for `addRowData` and `setCell`. After that you can use the close code. – Oleg Oct 13 '14 at 19:55
  • I have been trying on this for a while still is not able to figure out. This alone is forcing me to use some other grid despite its other amazing features. Please help me out in this I have added my current scenario.my datasource is of type json. Please help me out in this. Looking forward to your help. Thanks alot @Oleg – Gotham's Reckoning Oct 16 '14 at 23:05