0

In one of my jqGrid Add/Edit Modal I want to arrange the fields in that way like on the picture below:

enter image description here

Thanks to Oleg that I have already know from his post, how to arrange the fields in multiple column. But I want to do rowspan in the Add/Edit modal like on the picture below

Community
  • 1
  • 1
Jim carry
  • 69
  • 1
  • 6

1 Answers1

0

I created for you small demo based on the demo from the answer. The demo have hidden column flag which provides the information to the URLs to the pictures. I defined the column like below

{ name: "flag", index: "flag", width: 55, hidden: true,
    edittype: "image", editrules: { edithidden: true },
    editoptions: { src: "", style: "margin-left: 20px" },
    formoptions: { label: "", rowpos: 1, colpos: 2}}

The Edit form use beforeInitData which set src attribute based on the value of flag and then one set all required properties of the Edit form inside of beforeShowForm. If one need to support Next/Prev buttons of the edit form then one should use afterclickPgButtons callback too. The final code is the following

$grid.jqGrid("navGrid", "#pager", {add: false, del: false, search: false}, {
    recreateForm: true,
    width: 450,
    beforeInitData: function () {
        var $self = $(this),
            cm = $self.jqGrid("getColProp", "flag"),
            selRowId = $self.jqGrid("getGridParam", "selrow"),
            lang = $self.jqGrid("getCell", selRowId, "flag");
        cm.editoptions.src = "http://www.ok-soft-gmbh.com/img/flag_" + lang + ".gif";
    },
    beforeShowForm: function ($form) {
        var $formRows = $form.find(".FormData");
        $formRows.eq(0).children("td.DataTD").eq(1).attr("rowspan", "3"); //.css("text-align", "center");
        $formRows.eq(1).children("td.DataTD").eq(1).hide();
        $formRows.eq(2).children("td.DataTD").eq(1).hide();
    },
    afterclickPgButtons: function () {
        var $self = $(this),
            selRowId = $self.jqGrid("getGridParam", "selrow"),
            lang = $self.jqGrid("getCell", selRowId, "flag");
        $("#flag").attr("src", "http://www.ok-soft-gmbh.com/img/flag_" + lang + ".gif");
    }
});

It displays the results like

enter image description here

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798