I am using bootstrap 3 datetimepicker. Here Bootstrap datetimepicker calendar is not visible outside the grid. It is hiding inside the grid. Please see the jsfiddle.
http://jsfiddle.net/rtzxsa3e/
$(function () {
var data = [
{ rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' },
{ rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' },
];
var obj = {
height:300,
title: "ParamQuery Grid with JSON Data",
scrollModel:{autoFit:true, theme:true}
};
obj.colModel = [
{ title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
{ title: "Company", width: 200, dataType: "string", dataIndx: "company" },
{ title: "DatePicker", width: 200, dataType: "string", dataIndx: "date",editable:false,
render : function(){
var date = '<div class="form-group" style="width:150px;margin-left:50px;text-align:center"><div class="input-group date" id="datetimepicker123"><input type="text" value="04/05/2012 00:00" class="form-control"><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>';
return date;
}
},
{ title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" },
];
$('body').on('mouseover','.input-group',function() {
$(".input-group.date").datetimepicker();
});
obj.dataModel = { data: data };
$("#grid_json").pqGrid(obj);
});
td.pq-grid-cell{
overflow:visible !important;
}
span.input-group-addon {
width: 27px;
}
<div id="grid_json" style="margin:100px;"></div>
If I click the picker, bootstrap calendar is open but it is not visible the whole calendar. I want to display the calendar outside the grid. I have given "overflow:visible" and "visibility:visible" but still it is not working. Please help me for do this.
You need to remove overflow:hidden; from parent containers also.
Add this css:
.pq-grid, .pq-grid-center, div.pq-grid-cont, .pq-grid-cont-inner {
overflow: visible!important;
}
Demo: http://jsfiddle.net/rtzxsa3e/2/
I am not supporting the use of !important here. You know your html code well. If you can assign more specific selector which can override the default css of grid plugin, then that will also work.
Related
Hi good folk of Stackoverflow. I have a problem that's doing my head in. I have a Js file that loads images into my web app. When I test it on localhost, it loads the images just fine. I also have a "ticking" noise that loads from it that works locally. My problem arises when I deploy everything to my production server. My images dont display and my ticking noise doesn't play. I am hoping one of you can point me in the right direction as to why this is happening.
How my folder is setup
Here is my .js file:
// Super Wheel Script
jQuery(document).ready(function($){
$('.wheel-with-image').superWheel({
slices: [
{
text: 'images/1.png',
value: 1,
message: "Transactional Lend Pillar",
background: "#f3971c",
},
{
text: 'images/2.png',
value: 1,
message: "Commercial Property Finance Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/3.png',
value: 1,
message: "Agriculture Lend Pillar",
background: "#f3971c",
},
{
text: 'images/4.png',
value: 1,
message: "Structured Finance Solutions Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/5.png',
value: 1,
message: "Commercial Property Finance Lend Pillar",
background: "#f3971c",
},
{
text: 'images/6.png',
value: 1,
message: "ABF & FML Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/7.png',
value: 1,
message: "Transactional Lend Pillar",
background: "#f3971c",
},
{
text: 'images/8.png',
value: 1,
message: "Transactional Lend Pillar",
background: "#00a4aa",
},
{
text: 'images/9.png',
value: 1,
message: "Agriculture Lend Pillar",
background: "#f3971c",
},
{
text: 'images/10.png',
value: 1,
message: "Structured Finance Solutions Lend Pillar",
background: "#00a4aa",
}
],
text : {
type: 'image',
color: '#CFD8DC',
size: 25,
offset : 10,
orientation: 'h'
},
line: {
width: 0,
color: "#78909C"
},
outer: {
width: 10,
color: "#e6e6e6"
},
inner: {
width: 10,
color: "#78909C"
},
marker: {
background: "#ff0000",
animate: 1
},
width: 700,
selector: "value",
});
var tick = new Audio('media/tick.mp3');
$(document).on('click','.wheel-with-image-spin-button',function(e){
$('.wheel-with-image').superWheel('start','value',1);
$(this).prop('disabled',true);
});
$('.wheel-with-image').superWheel('onStart',function(results){
$('.wheel-with-image-spin-button').text('Spinning...');
});
$('.wheel-with-image').superWheel('onStep',function(results){
if (typeof tick.currentTime !== 'undefined')
tick.currentTime = 0;
tick.play();
});
$('.wheel-with-image').superWheel('onComplete',function(results){
//console.log(results.value);
if(results.value === 1){
swal({
type: 'success',
title: "A question about...",
html: results.message
});
}else{
swal("Oops!", results.message, "error");
}
$('.wheel-with-image-spin-button:disabled').prop('disabled',false).text('Spin');
});
});
I create a similar demo relate with my situation. What I want to achieve when checked on the master grid, the details grid will expand and all the checkbox inside it will be checked and also the child grid is selected.
It's possible to do like this without using column template for the checkbox.
DEMO IN DOJO
Example like this screen shot. (this one manually checked)
p/s: I found a similar demo, but this one using column.template for the checkbox.
This example code (which is based on your sample code) answers your requirement, which is...
What I want to achieve when checked on the master grid, the details grid will expand and all the checkbox inside it will be checked and also the child grid is selected.
Try this in the Telerik DOJO. We need to wait for Kendo to finish expanding the detail row (making sure all HTML elements are fully built), hence the setTimeout in detailExpand. Change the delay depending on your needs.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kendo Grid Master Detail Checkbox</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1118/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script></head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees"
},
pageSize: 6,
serverPaging: true,
serverSorting: true
},
height: 600,
sortable: true,
pageable: true,
detailInit: detailInit,
detailExpand: function(e) {
var $checkbox = $(e.masterRow.context);
if ($checkbox.is(":checked")) {
setTimeout(function() {
e.detailRow.find("tbody tr").each(function() {
var $row = $(this);
$row.find(".k-checkbox").each(function() {
var $checkbox = $(this);
$checkbox.attr("checked", true);
});
$(this).addClass("k-state-selected");
});
}, 250);
}
},
columns: [
{ selectable: true, width: 50 },
{
field: "FirstName",
title: "First Name",
width: "110px"
},
{
field: "LastName",
title: "Last Name",
width: "110px"
},
{
field: "Country",
width: "110px"
},
{
field: "City",
width: "110px"
},
{
field: "Title"
}
]
}).data("kendoGrid");
grid.tbody.on("click", ".k-master-row .k-checkbox", function(e) {
var $checkbox = $(this);
if ($checkbox.is(":checked")) {
var $tr = $checkbox.closest("tr");
var $a = $tr.find(".k-hierarchy-cell a.k-icon");
if ($a.length) {
if ($a.hasClass("k-i-expand")) {
grid.expandRow($tr);
}
}
}
});
});
function detailInit(e) {
var detailgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 10,
filter: {
field: "EmployeeID",
operator: "eq",
value: e.data.EmployeeID
}
},
scrollable: false,
sortable: true,
pageable: true,
columns: [
{ selectable: true, width: 50, headerTemplate: ' '},
{
field: "OrderID",
width: "110px"
},
{
field: "ShipCountry",
title: "Ship Country",
width: "110px"
},
{
field: "ShipAddress",
title: "Ship Address"
},
{
field: "ShipName",
title: "Ship Name",
width: "300px"
}
]
}).data("kendoGrid");
}
</script>
</div>
</body>
</html>
I adapted your first snippet based on the second one that you provided. Check out this revised demo.
Basically, you need to call getKendoGrid() and assign its return value (the actual grid) to the grid variable.
After that, add the change event listener as shown in the second demo snippet that you provided.
grid.tbody.on("change", ".k-checkbox", function() {
var checkbox = $(this);
var nextRow = checkbox.closest("tr").next();
// Note: the row should be expanded at least once as otherwhise there will be no child grid loaded
if (nextRow.hasClass("k-detail-row")) {
// And toggle the checkboxes
nextRow.find(":checkbox")
.prop("checked", checkbox.is(":checked"));
}
});
Also note that it's not .master as in the second demo, but .k-checkbox, as you are not providing a template in the first column (which the second demo does and the checkbox there has the master class).
I want this:
Without having to start like this:
But for some reason the data only shows up when I use "hiddengrid: true,"
I tried following this demo and was only able to get the example to work by adding "hiddengrid: true," like so:
<body>
<div class="center" id="overGrid">
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#jqGrid").jqGrid({
url: 'api/codes',
editurl: 'api/codes',
colModel: [
{
label: "Edit Actions",
name: "actions",
width: 75,
formatter: "actions",
formatoptions: {
keys: true,
editOptions: {},
addOptions: {},
delOptions: {}
}
},
{
label: 'Id',
name: 'id',
width: 150,
editable: true
},
{
label: 'Title',
name: 'title',
width: 100,
editable: true
},
{
label: 'Code',
name: 'code',
width: 100,
editable: true
},
{
label: 'Original Url',
name: 'originalUrl',
width: 200,
editable: true
}
],
align: 'center',
viewrecords: true,
rowList: [10, 20, 30],
width: 925,
height: 445,
rowNum: 20,
loadonce: true,
hiddengrid: true, // <-------------------- HERE
toppager: '#jqGridPager',
pager: '#jqGridPager',
caption: "Database"
}); jQuery("#jqGrid")
.navGrid('#pager', { edit: false, add: false, del: false, search: false })
.navButtonAdd('#pager', {
caption: "Add",
buttonicon: "ui-icon-add",
onClickButton: function () {
alert("Adding Row");
},
position: "last"
})
.navButtonAdd('#pager', {
caption: "Del",
buttonicon: "ui-icon-del",
onClickButton: function () {
alert("Deleting Row");
},
position: "last"
});
function fetchGridData() {
var gridArrayData = [];
// show loading message
$("#jqGrid")[0].grid.beginReq();
$.ajax({
url: 'api/codes',
mtype: 'POST',
datatype: 'JSON',
success: function (result) {
for (var i = 0; i < result.items.length; i++) {
var item = result.items[i];
gridArrayData.push({
id: item.id,
title: item.title,
code: item.code,
originalUrl: item.originalUrl,
});
}
// set the new data
$("#jqGrid").jqGrid('setGridParam', { data: gridArrayData });
// hide the show message
$("#jqGrid")[0].grid.endReq();
// refresh the grid
$("#jqGrid").trigger('reloadGrid');
}
});
}
fetchGridData();
});
</script>
</body>
Examples such as this don't seem to be working for me on their own so I keep having to reference other sources such as this that are much more complex and informative but possibly the reason for why I continue to have issues every step of the way.
Side Note
I should probably point out that I was only just recently introduced to jqGrid as a result of this question I asked about a week ago: " How can I separate my output using “onclick” and format the data to 20 per page?
"
I did a fairly decent job of documenting the steps that brought me to this point so it might be worth checking out for an in depth look as to what I am dealing with.
In short I am building an API in Asp.Net Core that sends and receives JSON data to my MongoDb database and then outputs the data to a single HTML page using jqGrid. So far I have created functioning Get, Post, Put, and Delete methods that return and send JSON data to my MongoDb database.
Update:
I have gone through the docs suggested by Tony Tomov and I understand their meaning. I just haven't the slightest clue to the solution to this problem. Everything I have thought to be a possible solution and tried from before and after I posted this question has given me a blank page without any errors.
This is my div but it outside kendo grid
<div>
<div id="qrUrl"></div>
</div>
This is my kendo grid field
columns: [
{
field: "Id",
},
{
title: "QrCode",
width: 300,
template: function(dataItem)
{
$(#Qrurl).kendoQRCode({
value: "www.google.com"+ dataItem.Id,
errorCorrection: "M",
size: 120,
border: {
color: "#000000",
width: 5
}
});
}
In this situation my Qrcode generated outside grid with uniq (url+id )
but i want to this all qrcode in my kendo grid.
i tried servel time this and another code but still not reached up to mark.
template: function(dataItem)
{
$('<div></div>')
.kendoQRCode({
value: "www.google.com"+ dataItem.Id,
errorCorrection: "M",
size: 120,
border: {
color: "#000000",
width: 5
}
});
}
If i tried with div id at that time i got qrcodes as per requirement but outside grid here, i want to complete this thing in my grid.
Please help me.
Thank you for advance.
The template function needs to return a string of the HTML that will be used. I would have the template create an empty DIV in the grid cell with a class="QRME" and a data attribute for the id. Then in the dataBound event of the grid, loop through all the QRME divs, get the id and create the QR codes:
$("#grid").kendoGrid({
columns: [ {
field: "Id",
}, {
title: "QrCode",
width: 300,
template: function(dataItem) {
return "<div class='QRME' data-id='" + kendo.htmlEncode(dataItem.Id) + "'></div>";
}
}],
dataSource: [ { Id: "1" }, { Id: "2" }, { Id: "3" } ],
dataBound: function(e) {
$("div.QRME").each(function(idx){
$(this).kendoQRCode({
value: "www.google.com"+ $(this).data("id"),
errorCorrection: "M",
size: 120,
border: {
color: "#000000",
width: 5
}
});
});
}
});
Working DEMO
I can't use dataBound and therefore I was looking for a solution that works with template.
First I make a div instance and put the QR code there and return outerHTML.
template: function(dataItem) {
return jQuery("<div class='qrcode'></div>")
.kendoQRCode({
value: kendo.htmlEncode(dataItem["Id"]),
errorCorrection: "M",
size: 60,
border: {
color: "#000",
width: 1
}
}).html();
}
working DEMO
I am using jsGrid in my project and now I am stuck here to hide a column that is being used in code but should not be displayed in page.
The grid I am using is : jsGrid
I have tried to take input control hidden but, still it doesn't work.
The following code is defines the columns of grid where I have taken hidden field for AccountID. but, it doesn't work.
Code:
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", type: "hidden", width: 0}
]
Since v1.3 jsGrid fields have an option visible
http://js-grid.com/docs/#fields
If you need to hide (or show) a field at runtime, it can be done like the following:
$("#grid").jsGrid("fieldOption", "ClientName", "visible", false);
Try this below code.
create a css class like below
.hide
{
display:none;
}
And assign the css property to the field like below
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", css: "hide", width: 0}
]
Hope this will help you.
fields: [
{ name: "Account", width: 150, align: "center" },
{ name: "Name", type: "text" },
{ name: "AccountID", visible: false, width: 0}]
fields: [{
name: "<FIELD NAME>",
visible: false
}
]
hidden very simple, make it like this example :
{ name: "id", title: "Id", type: "text", width: 1, css:"hide"}
where css class hide from bootsrap
In my case we started our application to show a column in JSGrid and went all the way to production. Later there was a need to hide that column but I used that column to do custom sorting. So this is how I did
My styles
.idStyle:
{
color: red;
}
Created new style
.hiddenStyle:
{
display: none;
}
Below are my jsGrid Fields
var jsGridField =
[
{ name: "Student ID", type: "text", width: "auto", css: "idStyle hiddenStyle" },
{ name: "Student Name", type: "text", width: "auto", css: "labelStyle" },
]
No data Row has been created on jsgrid for row data when there is no data. we have used below css row data for hiding it and showing.
<tr class="jsgrid-nodata-row"><td class="jsgrid-cell" colspan="16" style="width: 60.3958px;">Not found</td></tr>
When row data taking time to display by a API call , we are showing spinner on the grid, but user has been shown as no data found .. so which is not a best user experience .
For solving this we can use hide and show the css element on modifying the CSS class
For Hiding :
$('.jsgrid-nodata-row').hide();
$('.jsgrid-cell').hide();
For Showing :
$('.jsgrid-nodata-row').show();
$('.jsgrid-cell').show();