jqgrid hyper link column

poojasureshkumar
poojasureshkumar used Ask the Experts™
on
Hi All,
Advance thanks!
Have jqgrid and need hyper link on one of the column. Click the link , show new popup window. Closing the window , refresh the parent screen.

Kind regards,
Pooja
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
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.

Author

Commented:
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
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
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");

Open in new window


Regards,
Chinmay.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
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
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
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?

Author

Commented:
i am getting alerts but controller is not firing
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

Commented:
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?

Author

Commented:
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
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

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

Author

Commented:
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
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

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

Author

Commented:
{
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
Chief Technology Ninja
Distinguished Expert 2018
Commented:
Hi Pooja,

That is it is not well formatted. Try this:
formatter: function (cellvalue, options, rowObject) {
                  return "<span onclick='showDapData(\"" + rowObject.AmendmentNumber +                                                
                                    "\")';>' +  rowObject.DAPCloserDts + ' </span>";      

Open in new window


Just to be sure, please do check if you are really getting the rowObject or not.

Regards,
Chinmay.

Author

Commented:
am not getting it.
Chinmay PatelChief Technology Ninja
Distinguished Expert 2018

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

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial