jqgrid hyper link column

Hi Pooja,

I have couple of questions
1. This popup, is it a static one? or you need to pass some parameters? Or it is a static link?
2. When this popup is closed do you need to reload the entire page or just the jqGrid?

For question 1, I am assuming you are using free JQGrid. It supports a formatter extension https://github.com/free-jqgrid/jqGrid/wiki/improvement-of-formatter:-"showlink"

Regards,
Chinmay.

Hi Chinmay Patel,
1. This popup, is it a static one? or you need to pass some parameters? Or it is a static link? Need to pass parameters
2. When this popup is closed do you need to reload the entire page or just the jqGrid?  just the grid

Kind regards,
Pooja

Hi Pooja,

In that case, please use the formatter i have mentioned in my previous comment. Let me know if you run into any issues with that.

For second query, use the following code after you have closed modal popup.

jQuery("#yourgrid").trigger("reloadGrid");

Select allOpen in new window

Regards,
Chinmay.

Please find the view

@*@model Model.Production.AttachFilesViewModel*@
@model Model.Production.AmendmentSPViewModel
<link href="../../Content/formUpload.css" rel="stylesheet">
@*<link href="~/Content/ui.jqgrid.css" rel="stylesheet" />*@
@*<script src="~/Scripts/jquery-1.9.1.min.js"></script>*@
<script src="~/Scripts/free-jqGrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript" src="~/Scripts/"></script>

<link href="~/Content/themes/redmond/jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet" />

<link rel="stylesheet" type="text/css" media="screen" href="css/ui.datepicker.css" />

@*<script type="text/javascript" src="~/Content/themes/redmond/jquery-ui-1.12.1.custom/jquery-ui.js"></script>*@
<style>


      fieldset {
            -webkit-border-radius: 8px;
            -moz-border-radius: 8px;
            border-radius: 8px;
            border: 1px solid #d9edf7;
      }      

      .ui-jqgrid {
            font-family: Arial;
      }

            .ui-jqgrid > .ui-jqgrid-view {
                  font-size: 12px;
            }

                  .ui-jqgrid > .ui-jqgrid-view button {
                        font-size: 10px;
                  }

                  .ui-jqgrid > .ui-jqgrid-view a {
                        color: #428bca;
                        font-weight: bolder;
                  }

            jqdialog .glyphicon, .ui-jqgrid .glyphicon {
                  font-size: 20px;
                  top: auto;
                  color: darkslateblue;
            }

      .disabled {
            pointer-events: none;
      }
</style>
<script>
      
</script>
<section id="attachInfo">
      @using (Html.BeginForm("#", "#", FormMethod.Post, new { @class = "modal-form", id = "amendmentSP" }))
      {
            <label id="lblsmg" style="font-size: small; font-style: italic; color: red; display: none;"></label>
            
            
            <br />
            <fieldset>
                  @Html.HiddenFor(m => m.FHANumber, new { id = "txtFhaNumber" })
                  @Html.HiddenFor(m => m.TaskInstanceId, new { id = "txtTaskInstanceId" })
                  <br />
                  <div class="container-fluid" id="spFiles">
                        <table id="spAmendGrid"></table>
                        <div id="spAmendGridPager"></div>
                  </div>
                  <br />
                  <div id='dialogDiv1' class='modal fade in'>
                        <div id='dialogContent1'></div>
                  </div>
            </fieldset>
      }
</section>


<script>
    $(document).ready(
        function() {
            //debugger;
                  $('.datepicker').datepicker();
                  $('.datepicker').change(function () {
                        var date = $(this).val();
                        var arrDate = date.split("/");
                        var today = new Date();
                        var userSelectedDate = new Date(arrDate[2], arrDate[0] - 1, arrDate[1]);

                        if (userSelectedDate > today) {
                              alert('Date must not be in the future.');
                              $(this).val('');
                        }
                  });
           

                  $("#spAmendGrid").jqGrid({
                        //url: "/ProductionQueue/GetUploadedFilesForSharepoint?taskInstanceId=" + $("#txtTaskInstanceId").val() + "&fileType=all" + "",
                        url: "/Amendments/GetAmendmentInfoForSharepoint?pTaskInstanceId=" + $("#txtTaskInstanceId").val() + "&pFHANumber=" + $("#txtFhaNumber").val() +"",
                datatype: 'json',
                mtype: 'POST',

                        colNames: ['#', 'Template', 'Type', 'Submitted By', 'Submitted On', 'UW/Closer', 'UW/Closer Date', 'WLM', 'WLM Date','DAP Date'],
                colModel: [
                              //{ Key: false, name: 'AmendmentNumber', index: 'AmendmentNumber', editable: false, width: 50 },
                              {
                                    Key: false, name: 'AmendmentNumber', index: 'AmendmentNumber', width: 50,
                                    formatter: function (cellvalue, options, rowObject) {
                                          return "<a href=# onclick='showDapData(\"" + rowObject.AmendmentTemplateID +
                                                "\",\"" + rowObject.FHANumber +
                                                      "\")';>";
                                    }
                              },


                              { Key: false, name: 'AmendmentTemplate', index: 'AmendmentTemplate', editable: false, width: 150 },
                              { Key: false, name: 'AmendmentType', index: 'AmendmentType', editable: false, width: 150 },
                              { Key: false, name: 'SubmittedBy', index: 'Submittedby', editable: false, width: 100 },
                              { Key: false, name: 'SubmittedOn', index: 'SubmittedOn', editable: false, formatter: 'date', width: 110, formatoptions: { newformat: 'm/d/Y' } },
                              { Key: false, name: 'AssignedUWCloser', index: 'AssignedUWCloser', editable: false, width: 100 },
                              //{ Key: false, name: 'DateAssignedUWCloser', index: 'DateAssignedUWCloser', editable: false, formatter: 'date', width: 110, formatoptions: { newformat: 'm/d/Y' } },
                              { Key: false, name: 'UWCloserDts', index: 'UWCloserDts', editable: false, width: 100 },
                              { Key: false, name: 'AssignedWLM', index: 'AssignedWLM', editable: false, width: 100 },
                              //{ Key: false, name: 'DateAssignedWLM', index: 'DateAssignedWLM', editable: false, formatter: 'date', width: 110, formatoptions: { newformat: 'm/d/Y' } },
                              { Key: false, name: 'WLMDts', index: 'WLMDts', editable: false, width: 100 },
                              //{ Key: false, name: 'DAPCompletedByCloser', index: 'DAPCompletedByCloser', editable: true, formatter: 'date', width: 110, formatoptions: { newformat: 'm/d/Y' } },
                              //{
                              //      name: 'DAPCompletedByCloser', index: 'DAPCompletedByCloser', width: 90, editable: true, editoptions: {
                              //            size: 20,
                              //            dataInit: function (el) {
                              //                  $(el).datepicker({ dateFormat: 'yy-mm-dd' });
                              //            },
                              //            defaultValue: function () {
                              //                  var currentTime = new Date();
                              //                  var month = parseInt(currentTime.getMonth() + 1);
                              //                  month = month <= 9 ? "0" + month : month;
                              //                  var day = currentTime.getDate();
                              //                  day = day <= 9 ? "0" + day : day;
                              //                  var year = currentTime.getFullYear();
                              //                  return year + "-" + month + "-" + day;
                              //            }
                              //      }
                              //},
                              { Key: false, name: 'DAPCloserDts', index: 'DAPCloserDts', editable: false, width: 100 },
                ],

                        pager: jQuery('#spAmendGridPager'),
                cellEdit: false,
                cellsubmit: 'clientArray',
                rowNum: 10,
                //loadonce: true,
                rowList: [10, 20, 30, 40],
                shrinkToFit: false,
                height: '100%',
                viewrecords: true,
                gridview: true,
                autoencode: true,
                width: 1075,

                emptyrecords: 'No records to display',
                jsonReader: {
                    root: "rows",
                    page: "page",
                    total: "total",
                    records: "records",
                    repeatitems: false
                },
                loadComplete: function(data) {
                },
                //autowidth: true,
                multiselect: false,

                onPaging: function(pgButton) {
                },


                beforeSelectRow: function(rowid, e) {
                    //debugger;
                    var $self = $(this),
                        p = $self.jqGrid("getGridParam"),
                        $td = $(e.target).closest("tr.jqgrow>td"),
                        cm = $td.length > 0 ? p.colModel[$td[0].cellIndex] : null,
                        cmName = cm != null ? cm.name : null;

                    if (cmName === "FileId") {
                        handleDeleteFile(e.target.id);
                    }
                    return false;
                }
                  }).navGrid('#spAmendGridPager', { edit: false, add: false, del: false, search: true, refresh: true}, {}, {}, {}, { overlay: false });
        });



      function showDapData(id, num) {
            alert(id);
            alert(num);
            $('#dialogContent1').load('@Url.Action("DapDataWindow", "Amendments")', { pTaskInstanceId: id, pFHANum: num }, function () {
            $('#dialogDiv1').modal({
                backdrop: 'static',
                keyboard: true
            }, 'show');
            //bindForm(this);
            $(".modal-dialog").removeClass("modal-sm").addClass("modal-lg");
        });
    }
</script>

public ActionResult DapDataWindow(Guid pTaskInstanceId, string pFHANum = null)
            {
                  
                  var sharePointData = new ProdApplicationSharepointData();

                  sharePointData.ApplicationDetails = new ApplicationDetailViewModel();

                  return View("~/Views/Production/ProductionQueue/SharepointSinglePage/_AmendmentDAPDialog.cshtml", sharePointData);
            }

the controller action DapDataWindow is not firing at all


Kind regards,
Pooja

One request, always post code using code tag, it makes it easier to read code.

Are your JS firing properly? are you getting the alert boxes with the right values?

i am getting alerts but controller is not firing

Three things to check first:
1. Are you getting any errors in console?
2. Can you check if @Url.Action("DapDataWindow", "Amendments")' is generating proper URL for you to call?
3. Have you set debug point in the controller?

certain things i noticed are
showDapData is called before i click on jqgrid cell ( before loading the view)


. Are you getting any errors in console? no
2. Can you check if @Url.Action("DapDataWindow", "Amendments")' is generating proper URL for you to call? url works
3. Have you set debug point in the controller? yes

If the link is being clicked even before it is clicked, then the extension is not configured correctly.

Hi Chinmay Patel,
 I am taking another stand since my earlier approach is not working. Try to hit the controller on button click event.
why am displaying rowobject.AmendmentNumber in grid instead actual date value i.e. DAPCloserDts

Kind regards,
Pooja
s1.PNG
s2.PNG

Sorry Pooja. I did not understand your last comment. If you don't mind, please elaborate.

{
Key: false, name: 'DAPCloserDts', index: 'DAPCloserDts', editable: true, width: 100,
formatter: function (cellvalue, options, rowObject) {
                  return "<span onclick='showDapData(\"" + rowObject.AmendmentNumber +                                                
                                    "\")';> rowObject.DAPCloserDts </span>";      
},
},

this is calling javascript function by passing AmendmentNumber as parameter. But cell value in grid is displaying "rowObject.DAPCloserDts" instead actual value of rowObject.DAPCloserDts

Kind regards,
Pooja

am not getting it.

You are not getting what? debugging part? or rowObject?

i applied this change and seeing this text in col "rowObject.DAPCloserDts" also function is not firing