We Keep Coding

Owl Carousel not working as I expected using ViewPort

I was trying to generate a Owl Carousel using a ViewPort. But it only loops the items and not actually making it as carousel.
This is how I call the Data from Sql then transfer it to ViewPort after that, it should show in html just like a normal carousel
$(document).ready(function () {
$.ajax({
url: "/Home/Automatic1",
contentType: "application/html; charset=utf-8",
type: 'GET',
dataType: "html",
success: (function (result) {
$('#owl-carousel-2').html(result);
}),
error: (function (xhr, status) {
alert(status);
})
})
$('#owl-carousel-2').owlCarousel({
loop: true,
nav: true,
dots: false,
autoplay: false,
margin: 10,
responsive: {
0: {
items: 2
},
600: {
items: 3
},
1000: {
items: 4
}
}
})
})
These is how my HTML looks like:
<div class="owl-carousel owl-theme" id="owl-carousel-2">
</div>
On my ViewPort:
#if (Model != null && Model.Rows.Count != 0)
{
#for (int i = 0, x = 1; i < Model.Rows.Count; i++, x++)
{
<div class="item"><h4>1</h4></div>
<div class="item"><h4>2</h4></div>
<div class="item"><h4>3</h4></div>
<div class="item"><h4>4</h4></div>
<div class="item"><h4>5</h4></div>
<div class="item"><h4>6</h4></div>
<div class="item"><h4>7</h4></div>
<div class="item"><h4>8</h4></div>
<div class="item"><h4>9</h4></div>
<div class="item"><h4>10</h4></div>
<div class="item"><h4>11</h4></div>
<div class="item"><h4>12</h4></div>
#*<div class="item">
<div class="text-center">
<div class="card">
<div class="card-img-top">
<img src="~/images/acce-image/#Model.Rows[i][0]" />
</div>
<div class="card-title">
#Model.Rows[i][1]
</div>
<div class="card-price">
#Model.Rows[i][2]
</div>
</div>
</div>
</div>*#
}
}
It tried to comment first the main project so I can see what's going on. But still the same.
These is the output of the code.

After trying alot of trial and error, I just need to put the owl-carousel function inside of the ajax success function
$(document).ready(function () {
$.ajax({
url: "/Home/Automatic1",
contentType: "application/html; charset=utf-8",
type: 'GET',
dataType: "html",
success: (function (result) {
$('#owl-carousel-2').html(result);
$('#owl-carousel-2').owlCarousel({
loop: true,
nav: true,
dots: false,
autoplay: false,
margin: 10,
responsive: {
0: {
items: 2
},
600: {
items: 3
},
1000: {
items: 4
}
}
})
}),
error: (function (xhr, status) {
alert(status);
})
})

jqgrid edit button link not working when i use onSelectRow event

i am using jqgrid one grid contain master data and other grid contain detail data , when i click master grid row detail will show in detail grid (Master detail) so i am using onselectRow event i want to use edit button link in master when i use previous code then onselectrow event not fire and data not show in master grid , and this code working good in master detail grid . kindly expert tell what is the problem when i use edit button link in master grid then why event not fire .
Jqgrid
jQuery(document).ready(function ($) {
// master grid
var $grid = $("#jqGrid");
$grid.jqGrid({
url: '#Url.Action("RequisitionGrid")',
datatype: "json",
jsonReader: { id: 'Req_ID' },
colModel: [
{ name: 'Req_ID', index: 'Req_ID', label: 'Req ID', hidden: true, editable: true, editable: "disabled", align: "center", width: 12 },
{ name: 'Comp_ID', index: 'Comp_ID', label: 'Comp ID', hidden: true, editable: true, searchoptions: { sopt: ['cn'] }, align: "left", width: 2 },
{ name: 'GL_Year', index: 'GL_Year', label: 'GL Year', hidden: true, editable: true, searchoptions: { sopt: ['cn'] }, align: "left", width: 40 },
{
name: 'ReqDate', index: 'ReqDate', label: 'Date', width: 3,
editable: true, edittype: 'text',
editoptions: {
size: 10, maxlengh: 10,
dataInit: function (element) {
$(element).datepicker({ dateFormat: 'yy/mm/dd' })
}
}
},
{ name: 'Job', index: 'Job', label: 'Job', width: 15, editable: true },
{ name: 'ApprovedBy', index: 'ApprovedBy', label: 'Approved by', width: 7, editable: true },
{ name: 'IsApproved', index: 'IsApproved', hidden: true, label: 'Approved', width: 10, editable: true },
{
name: 'Req_ID', label: '', search: false, width: '3', formatter: function (cellvalue, options, rowObject, rowdata) {
function MethodFormatter(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:ReqMainUpdateMethod(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Edit</a>';
}
}
},
],
height: 250,
shrinkToFit: true,
search: true,
autowidth: true,
rowNum: 20,
viewrecords: true,
page: 1,
scroll: 1,
viewrecords: true,
rownumbers: true, // show row numbers
rownumWidth: 25,
navOptions: {
reloadGridOptions: { fromServer: true }
},
formEditing: {
closeOnEscape: true,
closeAfterEdit: true,
savekey: [true, 13],
reloadGridOptions: {
fromServer: true
}
},
forceClientSorting: true,
loadonce: true,
caption: 'Requisition Main',
emptyrecords: 'No Records are Available to Display',
onSelectRow: function (ids) {
if (ids != null) {
var data = $("#jqGrid").getRowData(ids);
$("#jqGridDetails").jqGrid('setGridParam', { url: "/Home/RequisitionDetailGrid/" + data.Req_ID, datatype: 'json' });
$("#jqGridDetails").jqGrid('setCaption', 'Requisition Detail For :: <b style="color: Red">' + data.Job + '</b>');
$("#jqGridDetails").trigger("reloadGrid");
}
},
onSortCol: clearSelection,
onPaging: clearSelection,
pager: "#jqGridPager"
});
});
// detail grid
$("#jqGridDetails").jqGrid({
url: '#Url.Action("RequisitionDetailGrid")',
mtype: "GET",
datatype: "json",
page: 1,
colModel: [
{ key: true, name: 'Req_ID_Det', index: 'Req_ID_Det', label: 'Req Det ID', hidden: true, editable: true, align: "center", width: 12 },
{ name: 'ReqNo', index: 'ReqNo', label: 'Req No', hidden: true, align: "left", width: 40 },
{ name: 'SrNo', index: 'SrNo', label: 'Sr No', align: "left", width: 3 },
{ name: 'GL_Year', index: 'GL_Year', hidden:true,editable:true, label: 'GL_Year', width: 5 },
{ name: 'ItemDesc', index: 'ItemDesc', label: 'Item Desciption', width: 20 },
{ name: 'Qty', index: 'Qty', label: 'Qty', width: 2 },
{ name: 'Remarks', index: 'Remarks', label: 'Remarks', width: 10 },
{
name: 'Req_ID_Det', label: '', search: false, width: '2', formatter: function (cellvalue, options, rowObject) {
return MethodFormatter(cellvalue, options, rowObject);
}
},
{
name: 'Req_ID_Det', label: '', search: false, width: '2', formatter: function (cellvalue, options, rowObject) {
return MethodDelete(cellvalue, options, rowObject);
}
},
],
autowidth: true,
shrinkToFit: true,
navOptions: {
reloadGridOptions: { fromServer: true }
},
rowNum: 5,
loadonce: true,
height: '100',
viewrecords: true,
caption: 'Requisition Detail',
emptyrecords: 'No Records are Available to Display',
pager: "#jqGridDetailsPager"
});
function clearSelection() {
jQuery("#jqGridDetails").jqGrid('setGridParam', { url: "RequisitionDetailGrid", datatype: 'json' }); // the last setting is for demo purpose only
jQuery("#jqGridDetails").jqGrid('setCaption', 'Detail Grid:: none');
jQuery("#jqGridDetails").trigger("reloadGrid");
}
function MethodFormatter(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:getbyID(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Edit</a>';
}
function MethodDelete(cellValue, options, rowObject) {
var selectedRowId = options.rowId;
return '<a href="javascript:ReqDelete(' + selectedRowId + ')" style="color: #3366ff" id="' + selectedRowId + '" >Delete</a>';
}
HTML
<!--Requsitition Detail Update Model-->
<div class="modal fade" id="ReqMainUpdateModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg modal-notify modal-info" role="document">
<!--Content-->
<div class="modal-content">
<!--Header-->
<div class="modal-header">
<p class="heading lead">Update Requisition Main</p>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="white-text">×</span>
</button>
</div>
<form id="NewOrderForm">
<div class="modal-body">
<div class="form-row">
<div class="col" id="Req_ID">
<div class="md-form">
#Html.TextBoxFor(m => m.Req_ID, new { #class = "form-control mr-sm-3", #id = "txtReqIDmain", Required = true })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<!-- Requisition Date-->
<label for="lblReqDate">Req Date</label>
<div class="md-form">
#Html.TextBoxFor(m => m.ReqDate, new { #class = "form-control mr-sm-3", #id = "txtReqDateMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblJOB"> JOB</label>
<div class="md-form">
#Html.TextBoxFor(m => m.Job, new { #class = "form-control mr-sm-3", #id = "txtReqjOBMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblApprovedBy"> Approved By </label>
<div class="md-form">
#Html.TextBoxFor(m => m.Approvedby, new { #class = "form-control mr-sm-3", #id = "txtApprovedByMain" })
</div>
</div>
</div>
<div class="form-row">
<div class="col">
<label for="lblApproved"> Approved </label>
<div class="md-form">
#Html.CheckBoxFor(m => m.IsApproved, new { #class = "form-control mr-sm-3", #id = "txtIsApprovedMain" })
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="ReqMainUpdate" type="submit" class="btn btn-danger" onclick="RequisitionDetail_Update();">Update Record</button>
</div>
</div>
</form>
</div>
<!--/.Content-->
</div>
</div>

Kendo UI Grid - title attribute on cells

How can I put and set in Javascript/AngularJS the title attribute for each cell of the Kendo UI Grid with a specified value?
Thanks.

Below is the Snippet with AngularJS Combination and Title comes up through title attribute.
Reference URL:
Demo: http://demos.telerik.com/kendo-ui/grid/angular
Similar Answer: In a kendo grid, can I set column attributes dynamically with a function?
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example" ng-app="KendoDemos">
<div ng-controller="MyCtrl">
<kendo-grid options="mainGridOptions">
<div k-detail-template>
<kendo-tabstrip>
<ul>
<li class="k-state-active">Orders</li>
<li>Contact information</li>
</ul>
<div>
<div kendo-grid k-options="detailGridOptions(dataItem)"></div>
</div>
<div>
<ul>
<li>Country: <input ng-model="dataItem.Country" /></li>
<li>City: <input ng-model="dataItem.City" /></li>
<li>Address: {{dataItem.Address}}</li>
<li>Home phone: {{dataItem.HomePhone}}</li>
</ul>
</div>
</kendo-tabstrip>
</div>
</kendo-grid>
</div>
</div>
<script>
angular.module("KendoDemos", [ "kendo.directives" ])
.controller("MyCtrl", function($scope){
$scope.mainGridOptions = {
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 5,
serverPaging: true,
serverSorting: true
},
sortable: true,
pageable: true,
dataBound: function() {
this.expandRow(this.tbody.find("tr.k-master-row").first());
},
columns: [{
field: "FirstName",
title: "First Name",
width: "120px"
},{
field: "LastName",
title: "Last Name",
width: "120px"
},{
field: "Country",
width: "120px"
},{
field: "City",
width: "120px"
},{
field: "Title"
}]
};
$scope.detailGridOptions = function(dataItem) {
return {
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: dataItem.EmployeeID }
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ field: "OrderID", title:"ID", width: "56px" },
{ field: "ShipCountry", title:"Ship Country", width: "110px" },
{ field: "ShipAddress", title:"Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "190px" }
]
};
};
})
</script>
</body>
</html>

jquery daterangepicker not working in modal

I have a modal popup (from bootstrap) that opens and contains a text input with daterangepicker, but the daterangepicker does not work (i see nothing when i click on the textbox) and i see no errors in the console.
Here is the input:
<div id="divChooseDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>#DossierReceipts.ChooseDossier</h3>
</div>
<div class="modal-body">
<input type="text" class="datePicker ui-rangepicker-input search-query input-small"
id="lastModifiedDateFilter" />
</div>
<div class="modal-footer">
#DossierReceipts.Cancel
</div>
Here is the javascript to create the daterangepicker:
$("#lastModifiedDateFilter").daterangepicker({
dateFormat: "yy.mm.dd"
, rangeSplitter: '-'
});
And here is the javascript to open the popup:
$("#divCreateReceipt").modal("show");
Does anyone know why does this not work?
Thanks
UPDATE
Here is the complete code for the popup window:
#{
ViewBag.Title = "Dosare";
}
#using ExpertExecutor.Resources.Dossier
#section leftMenu{
#Html.Partial("_LeftMenu")
}
#Scripts.Render("~/bundles/daterangepicker")
#Scripts.Render("~/bundles/watermark")
#Styles.Render("~/Content/daterangepicker")
<script src="#Url.Content("~/Scripts/jquery.watermark.min.js")" type="text/javascript"> </script>
<script src="#Url.Content("/Scripts/jquery.jqGrid.fluid.js")"></script>
#Html.Hidden("redirectUrl", (string)ViewBag.RedirectUrl)
<div class="form-search form-inline alert alert-info">
<fieldset>
<legend>#Index.FiltersCaption</legend>
<dl>
<dd>
<span>#Index.DossierColumn</span>
<input type="text" id="dossierFilter" class="search-query input-xxlarge" />
</dd>
<dd>
<span>#Index.DossierStatusColumn</span>
#Html.DropDownList("dossierStatusFilter", (List<SelectListItem>)ViewData["DossierStatuses"], new { #class = "input-medium" })
<span>#Index.LastModifiedDateColumn</span>
<input type="text" class="datePicker ui-rangepicker-input search-query input-small"
id="lastModifiedDateFilter" />
<span>#Index.LastOperatorColumn</span>
#Html.DropDownList("lastOperatorFilter", (List<SelectListItem>)ViewData["Users"])
</dd>
<dd>
<input type="button" class="btn btn-info" value="#Index.Search" onclick="applyFilter();"/>
<input type="button" class="btn btn-info" value="#Index.ClearFilter" onclick="clearFilter();" />
</dd>
</dl>
</fieldset>
</div>
<div id="dossiersGridWrapper" class="row-fluid">
<table id="dossiersGrid"></table>
<div id="dossiersGridPager"></div>
</div>
#if (!ViewBag.NoActions)
{
#Index.CreateDossier
}
<script type="text/javascript">
$('#dossierFilter').watermark('#Index.WatermarkSearchDossier');
$.jgrid.defaults.loadtext = '#Index.GridLoading';
var mvcJqGrid = {
customDblClick: "#ViewBag.customDblClick",
actions: {
buttonize: function (cellvalue, options, rowobject) {
return '<a onclick="return mvcJqGrid.actions.edit(\'' + options.rowId + '\')" href="#" title="Editare dosar"><i class="ui-icon ui-icon-pencil" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.costs(\'' + options.rowId + '\')" href="#" title="Cheltuieli dosar"><i class="ui-icon ui-icon-cart" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.imobil(\'' + options.rowId + '\')" href="#" title="Bunuri imobile"><i class="ui-icon ui-icon-home" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.mobil(\'' + options.rowId + '\')" href="#" title="Bunuri mobile"><i class="ui-icon ui-icon-suitcase" style="display:inline-block"></i></a>' +
'<a onclick="return mvcJqGrid.actions.open(\'' + options.rowId + '\')" href="#" title="Open Dossier"><i class="ui-icon ui-icon-folder-open" style="display:inline-block"></i></a>';
},
edit: function (id) {
window.open('#Url.Action("EditDossier", "Dossier")?id=' + id, "_self");
return false;
},
costs: function (id) {
window.open('#Url.Action("OpenRedirect", "Dossier")?idDossier=' + id + '&strUrl=' + encodeURI('#Url.Action("DossierCosts", "Dossier")?id=' + id), "_self");
return false;
},
imobil: function (id) {
window.open('#Url.Action("OpenRedirect", "Dossier")?idDossier=' + id+'&strUrl='+encodeURI('#Url.Action("ImovableList", "Asset")?idDossier=' + id), "_self");
return false;
},
mobil: function (id) {
window.open('#Url.Action("OpenRedirect", "Dossier")?idDossier=' + id + '&strUrl=' + encodeURI('#Url.Action("MovableList", "Asset")?idDossier=' + id), "_self");
return false;
},
open: function (id) {
if (mvcJqGrid.customDblClick.length > 0 && typeof (window[mvcJqGrid.customDblClick]) == "function") {
return window[mvcJqGrid.customDblClick](id);
}
$.getJSON('#Url.Action("OpenDossier", "Dossier")' + "?id=" + id, function (data) {
if (data && data.success) {
var redirectUrl = $("#redirectUrl").val();
if (redirectUrl) {
window.open(redirectUrl, "_self");
} else {
window.location.reload();
}
} else {
alert("#Index.ErrorOpenDossier");
}
});
return false;
}
}
};
$("#dossiersGrid").jqGrid({
url: '#Url.Action("DossiersGridData", "Dossier")',
datatype: 'json',
mtype: 'POST',
colModel: [
{ name: "#Index.CompletedColumn", sortable: false, editable: false, index: "Completed" },
{ name: "#Index.DossierColumn", sortable: true, editable: false, index: "Dossier" },
{ name: "#Index.DossierStatusColumn", sortable: true, editable: false, index: "DossierStatus" },
{ name: "#Index.LastModifiedDateColumn", sortable: true, editable: false, index: "LastModifiedDate" },
{ name: "#Index.LastOperatorColumn", sortable: true, editable: false, index: "LastOperator" },
{ name: "#Index.CreditorsColumn", sortable: false, editable: false, index: "Creditors" },
{ name: "#Index.DebtorsColumn", sortable: false, editable: false, index: "Debtors" },
#if (!ViewBag.NoActions)
{
#:{ name: "#Index.Action", sortable: false, editable: false, index: "Action", formatter: mvcJqGrid.actions.buttonize }
}
],
viewrecords: true,
postData: {
dossierFilter: function () { return $("#dossierFilter").val(); },
dossierStatusFilter: function () { return $("#dossierStatusFilter").val(); },
lastModifiedDateFilter: function () { return $("#lastModifiedDateFilter").val(); },
lastOperatorFilter: function () {
return $("#lastOperatorFilter").val();
}
},
pager: "#dossiersGridPager",
rowNum: 10,
caption: "Lista dosare",
autowidth: true,
rowList: [10, 15, 20, 50],
emptyrecords: 'No record Found',
height: '100%',
ondblClickRow: mvcJqGrid.actions.open
});
$("#lastModifiedDateFilter").daterangepicker({
dateFormat: "yy.mm.dd"
, rangeSplitter: '-'
});
function applyFilter() {
$("#dossiersGrid").trigger("reloadGrid");
}
function clearFilter() {
$('#dossierFilter').val("");
$("#dossierStatusFilter").val("");
$("#lastModifiedDateFilter").val("");
$("#lastOperatorFilter").val("");
$("#dossiersGrid").trigger("reloadGrid");
}
if (leftMenu) {
leftMenu.setContext('dossier-list help-dossier');
}
var resizeDossiersGrid = function () {
$("#dossiersGrid").fluidGrid({ example: "#dossiersGridWrapper", offset: 0 });
};
$(window).on('resize', resizeDossiersGrid);
$("#dossiersGrid").on("jqGridGridComplete", resizeDossiersGrid);
</script>
And here is the complete code for the calling page:
#using ExpertExecutor.DataLayer.Models
#using ExpertExecutor.Resources.Cost
#{
Layout = "~/Views/Shared/_Layout.cshtml";
}
#section leftMenu{
#Html.Partial("_LeftMenu")
}
#section head
{
#Scripts.Render("~/bundles/jqueryval")
<style type="text/css">
#divChooseDossier {
width: 900px;
}
#divCreateReceipt {
width: 900px;
}
</style>
}
<h2>#ViewBag.Title</h2>
#Html.Hidden("IdDossier", ViewData["IdDossier"])
<table id="dossierReceiptsGrid"></table>
<div id="divCreateReceipt" class="modal hide fade" role="dialog" aria-hidden="true">
</div>
#DossierReceipts.CreateReceipt
<div id="divConfirmDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>#DossierReceipts.ConfirmDossier</h3>
</div>
<div class="modal-body">
<span>#DossierReceipts.ConfirmDossierMessage<strong>#(ViewData["Dossier"] != null ? string.Format("{0}/{1}", ((Dossier)ViewData["Dossier"]).DossierNumber, ((Dossier)ViewData["Dossier"]).DossierYear) : string.Empty)</strong>?</span>
</div>
<div class="modal-footer">
#DossierReceipts.Cancel
<input type="button" class="btn btn-primary" value="#DossierReceipts.ConfirmDossierOk" onclick="confirmDossier();"/>
<input type="button" class="btn" value="#DossierReceipts.SelectDossier" onclick="showChooseDossierModal();"/>
</div>
</div>
<div id="divChooseDossier" class="modal hide fade" role="dialog" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>#DossierReceipts.ChooseDossier</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
#DossierReceipts.Cancel
</div>
</div>
<script type="text/javascript">
leftMenu.setContext('financial help-financial');
$("#dossierReceiptsGrid").jqGrid({
url: '#Url.Action("ReceiptsGridData")',
datatype: "json",
mtype: "POST",
postData: {
idDossier: '#ViewData["IdDossier"]'
},
colNames: ['#DossierReceipts.DossierColumn', '#DossierReceipts.ReceiptDateColumn', '#DossierReceipts.ReceiptValueColumn', '#DossierReceipts.ReceiptCurrencyColumn', '#DossierReceipts.ReceiptColumn'],
colModel: [
{ name: "Dossier", index: "Dossier", sortable: true, editable: false },
{ name: "ReceiptDate", index: "ReceiptDate", sortable: true, editable: false },
{ name: "ReceiptValue", index: "ReceiptValue", sortable: true, editable: false },
{ name: "Currency", index: "Currency", sortable: true, editable: false },
{ name: "Receipt", index: "Receipt", sortable: true, editable: false }
],
viewrecords: true
});
function confirmDossier() {
$("#divConfirmDossier").modal("hide");
$("#divCreateReceipt").modal("show");
}
var reloadDossiersGrid = true;
function showChooseDossierModal() {
$("#divConfirmDossier").modal("hide");
$("#divChooseDossier").modal("show");
if (reloadDossiersGrid) {
reloadDossiersGrid = false;
$.post('#Url.Action("Index", "Dossier")?redirectUrl=&noActions=true&partial=true&customDblClick=chooseDossier', null, function(postResponse) {
$("#divChooseDossier .modal-body").html(postResponse);
$("#divChooseDossier").on("shown", function() {
resizeDossiersGrid();
$("#lastModifiedDateFilter").daterangepicker({
dateFormat: "yy.mm.dd"
, rangeSplitter: '-'
});
});
});
} else {
$("#divChooseDossier").modal("show");
}
}
function chooseDossier(id) {
$("#IdDossier").val(id);
$("#divChooseDossier").modal("hide");
$.get('#Url.Action("CreateReceipt", "Financial")?idDossier=' + id, null, function(getResponse) {
$("#divCreateReceipt").html(getResponse);
$("#divCreateReceipt").modal("show");
});
$.get('#Url.Action("GetDossierDisplayName")?id=' + id, null, function(getResponse) {
$("#divConfirmDossier .modal-body strong").text(getResponse.name);
});
$("#IdDossier").val(id);
}
$(function() {
$("a[href='#divCreateReceipt']").hide();
$("a[href='#divChooseDossier']").hide();
});
function showCreateReceiptOption() {
if ($("#IdDossier").val() && $("#IdDossier").val().length > 0) {
$("#divConfirmDossier").modal("show");
} else {
showChooseDossierModal();
}
}
</script>
Sorry for the long code

Rather than modifying the z-index of elements, you can also set the parentEl option (where the calendar control is created). This will allow the actual daterangepicker object to inherit the z-index of the modal container.
$("#lastModifiedDateFilter").daterangepicker({
parentEl: "#divChooseDossier .modal-body"
})
From the documentation:
parentEl: (string) jQuery selector of the parent element that the date
range picker will be added to, if not provided this will be 'body'

I had a similar problem with datepicker jquery.
When I clicked on the input, nothing happened, no error, nothing.
The problem was that the datepicker was working, but the calendar appeared under the modal, I hacked this with css :
.datepicker{
z-index: 1100 !important;
}
Maybe your problem is similar to the mine ,
Update after 8 years of service....
Look at the better answer at bottom of this answer

You can change z-index in event show.daterangepicker
$('.daterange-single').on('show.daterangepicker', function(e){
var modalZindex = $(e.target).closest('.modal').css('z-index');
$('.daterangepicker').css('z-index', modalZindex+1);
});

I resolve my issues with the couple of :
.datepicker{
z-index: 1100 !important;
}
#ui-datepicker-div {
width: 30% !important;
}

Simply remove tabindex="-1" from your Bootstrap modal.
<div class="modal" tabindex="-1">

On version 0.21.1, insert the below CSS code to effect.
.date-picker-wrapper{
z-index: 1100 !important;
}

How does one align a single row to the top in JQGrid?

JQGrid is awesome for displaying data with jQuery, but it doesn't exactly have great documentation.
I'm having a problem with the grid when the grid has only one element to display. For some reason, it's aligning the single row to the bottom rather than to the top.
Here's a picture of a single misaligned row:
Here are the jqgrid options I'm passing in:
jQGridOptions = {
"recordtext": '{0} - {1} of {2}',
"url": 'data.json',
'datatype': 'json',
'mtype': 'GET',
'colModel': [
{ 'name': 'Rank', 'align': 'center', 'index': 'Rank', 'sortable': false, 'search': false },
{ 'name': 'Name', 'index': 'Name', 'sortable': false, 'search': true },
{ 'name': 'Score', 'index': 'Score', 'sortable': false, 'search': false }
],
'pager': '#ranking-pager',
'rowNum': 10,
'altRows': true,
'scrollOffset': 0,
'colNames': ["Rank", "Name", "Score"],
'width': 696,
'height': 'auto', // '100%', // 300,
'page': 1,
'sortname': 'Rank',
'sortorder': "asc",
'hoverrows': true,
'viewrecords': true,
'gridComplete': function () {
$('.ui-jqgrid-bdiv').jScrollPane({ showArrows: true, scrollbarWidth: 17, arrowSize: 17, scrollbarMargin: 0 });
if (selectedRank !== -1) {
selectRank(selectedRank);
selectedRank = -1;
}
},
'jsonReader': {
id : 'Rank',
'repeatitems': false
}
};
As requested, here's the result from data.json:
{
"page":1,
"total":1,
"records":1,
"rows": [{
"Name":"Gil Agostini",
"Score":94,
"Rank":1
}]
}
Call to jQGrid:
$(document).ready(function () {
$("#ranking-table").jqGrid(jQGridOptions);
});
Html:
<div style="float: left;">
<div class="hvy-border1">
<div class="hvy-border2">
<div class="hvy-top-left hvy-corner">
<div>
<!-- -->
</div>
</div>
<div class="hvy-top-right hvy-corner">
<div>
<!-- -->
</div>
</div>
<div class="clear">
<!-- -->
</div>
<div id="table-and-pager" style="margin: 3px;">
<table id="ranking-table" class="scroll" cellpadding="0" cellspacing="0" style="height: 300px">
</table>
<div id="ranking-pager" class="scroll" style="text-align: center;">
</div>
</div>
<div class="clear">
<!-- -->
</div>
<div class="hvy-bottom-left hvy-corner">
<div>
<!-- -->
</div>
</div>
<div class="hvy-bottom-right hvy-corner">
<div>
<!-- -->
</div>
</div>
</div>
</div>
</div>
Can anyone give me any clue what I maybe doing wrong here?
How do I get the row to align to the top rather than the bottom?

I can not reproduce the problem which you describes. I suppose that you use some additional setting for jqGrid: you don't post the whole JavaScript code of your example.
Nevertheless I can definitively say that you has some problems in the format of the JSON data returned from the server. Important is that every row of data must has an unique id. For example
{ "id":123, "Name":"Gil Agostini", "Score":94, "Rank":1 }
instead of
{ "Name":"Gil Agostini", "Score":94, "Rank":1 }
The id can has also string type and not be only numeric. Moreover you have to define jsonReader parameter of jqGrid, because your data has named elements instead of the standard array of strings (which is more compact and small data). In the case you should at least use jsonReader: {repeatitems: false}.
If some other grid column (like the Name column) can be interpret as the id, you can either include key:true in the corresponding column definition or use id:'Name' as a property of the jsonReader.
For example the following jsonReader
jsonReader: {
repeatitems: false,
id: 'Name'
}
can be used to read your current JSON data (see live here). Using any tool which you prefer you can verify the id value of the <tr> element of the grid.