<script> $(function () { var colModel = [ { title: "Project ID", dataType: "integer", dataIndx: "ID", hidden: true }, { title: "Project Name", dataType: "string", dataIndx: "Name", resizable: true, width: 200 }, { title: "Notes", dataType: "string", resizable: false, width: 75 }, { title: "Change Type", dataType: "string", dataIndx: "Type", resizable: true, width: 175 }, { title: "Priority", dataType: "string", dataIndx: "Priority", resizable: true, width: 75 }, { title: "Impact", dataType: "string", dataIndx: "Impact", resizable: true, width: 75 }, { title: "Assigned To", dataType: "string", dataIndx: "Impact", resizable: true, width: 100 }, { title: "Approval Status", dataType: "string", dataIndx: "ApprovalStatus", resizable: true, width: 100 }, { title: "Approved By", dataType: "string", dataIndx: "ApprovedBy", resizable: true, width: 150 }, { title: "Estimated Start Date", dataType: "date", dataIndx: "EstimatedStartDate", resizable: true, width: 150 }, { title: "Estimated Completion Date", dataType: "date", dataIndx: "EstimatedEndDate", resizable: true, width: 150 }, { title: "Date Actually Started", dateType: "date", dataIndx: "DateStarted", resizable: true, width: 150 }, { title: "Date Actually Compleated", dataType: "date", dataIndx: "DateCompleated", resizable: true, width: 150 }, { title: "Reason For Change", dataType: "string", dataIndx: "Reason", resizable: true } ]; var dataModel = { location: "remote", dataType: "json", method: "POST", contentType: "application/json; charset=UTF-8", url: '@Url.RouteUrl("GetChangeOrders")', getData: function (dataJson) { return { data: dataJson }; } }; var obj = { collapsible: false, colModel: colModel, dataModel: dataModel, editable: false, flexHeight: true, numberCell: { show: false }, roundCorners: true, sortDir: ["up"], sortIndx: ["ID"], sorting: "local", stripeRows: true, title: "IT Change Orders", width: $(window).width() - 10, wrap: false }; obj.colModel[2].render = function (ui) { var rowData = ui.rowData, dataIndx = ui.dataIndx; return '<a href="' + '@Url.RouteUrl("ChangeOrderNotes", new { ChangeOrderID = -1 })'.replace("-1", rowData[0]) + '"> Test</a>'; }; var $Grid = $("#Grid").pqGrid(obj); $(window).resize(function (evt) { $Grid.pqGrid("option", { width: $(window).width() - 10 }); }); }); </script>