jqgrid hyper link column

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
poojasureshkumarAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chinmay PatelChief Technology NinjaCommented:
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.
poojasureshkumarAuthor 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 NinjaCommented:
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.
Get a highly available system for cyber protection

The Acronis SDI Appliance is a new plug-n-play solution with pre-configured Acronis Software-Defined Infrastructure software that gives service providers and enterprises ready access to a fault-tolerant system, which combines universal storage and high-performance virtualization.

poojasureshkumarAuthor 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 NinjaCommented:
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?
poojasureshkumarAuthor Commented:
i am getting alerts but controller is not firing
Chinmay PatelChief Technology NinjaCommented:
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?
poojasureshkumarAuthor 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 NinjaCommented:
If the link is being clicked even before it is clicked, then the extension is not configured correctly.
poojasureshkumarAuthor 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 NinjaCommented:
Sorry Pooja. I did not understand your last comment. If you don't mind, please elaborate.
poojasureshkumarAuthor 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
Chinmay PatelChief Technology NinjaCommented:
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.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
poojasureshkumarAuthor Commented:
am not getting it.
Chinmay PatelChief Technology NinjaCommented:
You are not getting what? debugging part? or rowObject?
poojasureshkumarAuthor Commented:
i applied this change and seeing this text in col "rowObject.DAPCloserDts" also function is not firing
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
.NET MVC

From novice to tech pro — start learning today.