I am trying to run an already present application on IE 9 but it has issues with the pop-up window and with .show() and .hide() commands.
i am getting a blue blank screen
The application is running smoothly on Chrome
The code on the Main Panel
<% #page language = "java"
contentType = "text/html; charset=UTF-8"
pageEncoding = "UTF-8" %>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http - equiv = "Content-Type"
content = "text/html; charset=ISO-8859-1" >
< meta http - equiv = "X-UA-Compatible"
content = "IE=9" / >
< script >
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', 'lib');
Ext.require(['*']);
Ext.onReady(function() {
/* var myMask2;
myMask2 = new Ext.LoadMask(Ext.getBody(), {msg:"Loading Please wait..."}); */
var basePanel = Ext.create('Ext.form.Panel', {
id: 'basePanel',
frame: true,
title: 'basePanel',
width: 1500,
height: 80,
collapsible: true,
layout: {
type: 'table',
columns: 1
},
defaults: {
width: 100,
labelWidth: 85
},
fieldDefaults: {
labelAlign: 'right',
msgTarget: 'side',
margin: '0 0 5 0'
},
defaultType: 'textfield',
items: [{
xtype: 'button',
text: 'clickToGetPopup',
id: 'clickToGetPopup',
disabled: true,
margin: '10 7 5 4',
width: 100,
handler: function() {
var i = 0;
if (Ext.getCmp("popupPanel") != undefined) {
Ext.getCmp("popupPanel").getStore().setProxy({
type: 'ajax',
method: 'Get',
url: 'lib/xyz.jsp
reader: {
root: '
topics ',
totalProperty: '
totalCount '
}
});
Ext.getCmp("popupPanel").getStore().loadPage(1);
}
popupPanel.popupWindow.show();
popupPanel.popupPanel.center();
}
}]
});
Ext.define('
basePanel ', {
singleton : true,
basePanel : basePanel
});
});
</script>
</head>
<body>
</body>
</html>
The code on the pop-up window
<% #page language = "java"
contentType = "text/html; charset=UTF-8"
pageEncoding = "UTF-8" %>
<% #page import = "java.text.SimpleDateFormat" %>
<% #page import = "java.util.Date" %>
< !DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd" >
< html >
< head >
< meta http - equiv = "Content-Type"
content = "text/html; charset=ISO-8859-1" >
< meta http - equiv = "X-UA-Compatible"
content = "IE=9" / >
< style >
.myBold {
font - weight: bold;
font - size: 11px;
color: #483D8B;
}
.mycol
{
color:# 483D8B;
font - weight: bold;
font - size: 11px;
}
.btn {
border: solid;
border - color: black;
background - color: #9EB32D;
background-image: none;
}
.x-grid-row .custom-column {
background-color: # D9D9D9;
}
.my - combo - lst.x - boundlist - item {
font - size: 8px;
}
.x - boundlist - item {
font - size: 10px;
}
.x - form - field {
height: 14px;
font - size: 10px;
}
.x - form - text {
height: 14px;
font - size: 10px;
}
.x - field - form {
height: 14px;
font - size: 10px;
}
.x - form - focus {
height: 14px;
font - size: 10px;
}
.x - field - form - focus {
height: 14px;
font - size: 10px;
}
.x - field -
default -form - focus {
height: 14px;
font - size: 10px;
} < /style>
<script>
Ext.Loader.setConfig({
enabled : true
});
Ext.Loader.setPath('Ext.ux', 'lib');
Ext.require([ '*' ]);
/ / definer For Grid
Ext.define('popupModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'A'
}, {
name: 'B'
}, {
name: 'C'
}, {
name: 'D'
},
],
idProperty: 'ParentfromRTNWGridModel'
});
var popupStore = new Ext.data.Store({
model: 'popupModel',
pageSize: 20
});
Ext.onReady(function() {
Ext.suspendLayouts();
// add/remove items here
Ext.QuickTips.init();
Ext.state.Manager.setProvider(Ext
.create('Ext.state.CookieProvider'));
var nwId = "";
var nwVal = "";
//var nwchangedVal = "";
var nwIndex = "";
var item = "";
var CellEditingRTNW = Ext.create('Ext.grid.plugin.CellEditing', {
pluginId: 'CellEditingRTNW',
extend: 'Ext.grid.Editing',
clicksToMoveEditor: 1,
clicksToEdit: 1,
editStyle: 'cell',
autoCancel: false,
});
var flag1 = false;
var popupPanel = Ext.create('Ext.grid.Panel', {
id: 'popupPanel',
store: popupStore,
title: 'popupPanel ',
autoScroll: true,
columnLines: true,
maximizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
hidden: true,
plugins: [
CellEditingRTNW,
Ext.create('Ext.grid.plugin.Editing', {}),
Ext.create('Ext.ux.ColumnAutoWidthPlugin', {})
],
columns: [{
text: 'A Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'A',
}, {
text: 'B column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'B',
editor: {
xtype: 'combobox',
store: storeCombo,
autoLoad: false,
hideTrigger: true,
queryMode: 'remote',
editable: false,
displayField: 'name',
valueField: 'name',
selectOnFocus: true,
d: 'popupEditor',
listeners: {
blur: function(e1, o) {
console.log(e1);
}
}
}
}, {
text: 'C Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'Child_Name',
tdCls: 'custom-column'
}, {
text: 'D Column',
width: 170,
flex: 1,
sortable: false,
dataIndex: 'Child_Value',
tdCls: 'custom-column'
}],
viewConfig: {
stripeRows: true,
markDirty: false,
enableTextSelection: true,
displayInfo: true,
}
});
var popupFilter = Ext.create('Ext.form.Panel', {
id: 'popupFilter',
frame: true,
//title :'popupFilter',
collapsible: false,
collapsed: false,
buttonAlign: 'center',
layout: {
type: 'table',
columns: 4,
align: 'middle'
},
items: [{
xtype: 'radiogroup',
align: 'left',
width: 200,
id: 'Parentidtoselect',
columns: 2,
items: [
{
boxLabel: '1',
name: 'rb',
width: '700',
inputValue: '1',
id: '1',
listeners: {
change: function(cb, nv, ov) {
if (nv) {
1.show();
2.hide();
}
}
}
}, {
boxLabel: '2',
name: 'rb',
width: '700',
inputValue: '2',
hidden: true,
id: '2',
listeners: {
change: function(cb, nv, ov) {
if (nv) {
2.show();
1.hide();
}
}
}
}
]
},
{
xtype: 'button',
text: 'Cancel',
id: 'cancel',
margin: '0 0 0 10',
//colspan:2,
width: 100,
handler: function() {
popupWindow.hide();
}
}
]
});
var popupWindow = Ext.create('Ext.window.Window', {
autoWidth: true,
autoScroll: true,
closable: true,
constrainHeader: true,
id: 'popupWindow',
height: 550,
width: 700,
closeAction: 'hide',
plain: true,
stateful: false,
title: '<div style="text-align:center;">popupWindow</div>',
hidden: true,
maximizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
popupFilter,
popupPanel,
],
listeners: {
beforehide: function(panel) {}
}
});
Ext.define('popupMainPanel', {
singleton: true,
popupWindow: popupWindow,
flag1: flag1,
popupPanel: popupPanel,
popupFilter: popupFilter
});
Ext.resumeLayouts(true);
}); < /script>
</head >
< body >
< /body>
</html >
What about when you use Compatibility mode in IE9, what happens? Does that help the scenario? I am making an assumption from your wording that this was working else where, let me know if that is wrong.
What version of Ext JS is this? Have you tried creating a Fiddle with this in order to test it against different library versions? https://fiddle.sencha.com/#home
A little bit of code might help us, help you.
UPDATE:
So my first thought is that your using popupPanel as if its a JavaScript global variable but you have not set this variable yet in the top code. You might want a var popupPanel = Ext.getCmp("PopupPanel") in there and then use that object in order to call those functions. Now I see it in the code in the second window but I think closures are messing with you here in the first window. I think someone with more experience will chime in at this point with my half answer out there now.
Also did you say this is working in other browsers but not in IE9? what other browsers did you test this on? Or did you make code changes and now it just does not work at all?
Related
I am using apex bar chart in which i want to show values on the bar vertically but it shows horizontally.
I search alot to show value vertically but not find any solution. Please help me to solve this issue. I also share the code.
Here is The script of graph:
<script type="text/javascript">
$(document).ready(function() {
// custom datalabelBar
var options = {
chart: {
height: 350,
type: 'bar',
toolbar: {
show: true
}
},
plotOptions: {
bar: {
horizontal: false,
dataLabels: {
position: 'top',
},
}
},
dataLabels: {
enabled: true,
position: 'top',
formatter: function (val) {
return val ;
},
horizontal: true,
offsetX: 0,
style: {
fontSize: '10px',
colors: ['#000']
}
},
stroke: {
show: false,
width: 1,
colors: ['#fff'],
lineCap: 'round',
curve: 'smooth',
},
series: [{
name: 'Packing',
data: <?php echo json_encode($wd_packing) ?>
}, {
name: 'Dispatch',
data: <?php echo json_encode($wd_dispatch) ?>
},
{
name: 'Remaning',
data: <?php echo json_encode($wd_reaming) ?>
}],
xaxis: {
categories: <?php echo json_encode($wd_week) ?>,
},
}
var chart = new ApexCharts(
document.querySelector("#weekly_dispatch_graph"),
options
);
chart.render();
});
Here is the screenshot of graph:
Please Help me to solve this issue. Thanks in advance.
It is possible! Your question is about dataLabels. ApexCharts give us a common dataLabels option and a dataLabels option depended on chart type. There are options.dataLabels and options.plotOptions.bar.dataLabels respectively.
In the first one you can play with offsetY and in the second one you can configure this labels orientation and their position.
Try to play with this values, good luck :)
var options = {
chart: {
type: 'bar'
},
series: [{
name: 'Packing',
data: [300000, 300000, 500000, 800000]
}, {
name: 'Dispatch',
data: [46577, 296948, 153120, 0]
},
{
name: 'Remaning',
data: [252962, 2382, 235143, 800000]
}
],
xaxis: {
categories: ['Week 1', 'Week 2', 'Week 3', 'Week 4'],
},
plotOptions: {
bar: {
dataLabels: {
orientation: 'vertical',
position: 'center' // bottom/center/top
}
}
},
dataLabels: {
style: {
colors: ['#000000']
},
offsetY: 15, // play with this value
},
}
var chart = new ApexCharts(document.querySelector("#chart"), options);
chart.render();
<div id="chart"></div>
<script src="https://cdn.jsdelivr.net/npm/apexcharts#3.18.1/dist/apexcharts.min.js"></script>
dataLabels: {
position: 'top',
enabled: true,
textAnchor: 'start',
style: {
fontSize: '10pt',
colors: ['#000']
},
offsetX: 0,
horizontal: true,
dropShadow: {
enabled: false
}
},
Note the offsetX: 0 and horizontal: true.
I created this Dojo Link that shows me resource by group. problem with this view is it shows long block only if it's a allDay event. for this view how can i apply a template that show a block with time range for each event?
currently it is showing small block and its hard to tell what it is or how long it is booked for.
I want all the event block to take full length despite the duration length.
similar to one highlighted below
Look at the code snippet below. I did a couple of things:
I removed the title data from the template of the event since you said you didn't want to see it.
I placed a space in the template after the <p> element so that the x action of the event will have a place to appear in. There are other ways to do this, I used a simple one.
I've made changes to the styles at the bottom of the code, specifically the following:
.movie-template {
overflow: auto !important;
width: fit-content !important;
}
.k-event {
width: fit-content !important;
}
.space {
width: 20px;
height: 15px;
display: inline-block;
}
.movie-template p {
margin: 5px 0 0;
display: inline-block;
}
EDIT
~~~~
Making the appointments fill the cells they belong to is either impossible or extremely complicated. I'll explain why:
The way the events are programmed, they exist on the same level on the DOM as the table of the scheduler and float above it. The scheduler calculates the position and size of the events based on their start and end times.
In order for you to place them as if they are full-day events you need to do one of two things:
Override the scheduler's automatic placement, with your own code that will calculate the position and size and set them accordingly. Note that this code will need to run every time the window is resized, re-focused, rotated and so on.
Define the events as "whole-day appointments" and store their real start and end times in other fields that you will use in your code. This might break other functionality you might already have in place.
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/scheduler/resources-grouping-vertical">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.timezones.min.js"></script>
</head>
<body>
<div id="example" class="k-content">
<div id="scheduler"></div>
</div>
<script id="event-template" type="text/x-kendo-template">
<div class="movie-template" style="width:100px">
<p>#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #</p>
<span class="space"></span>
</div>
</script>
<script>
var MyCustomTimelistView = kendo.ui.TimelineMonthView.extend({
options: {
name: "MyCustomTimelistView",
title: "Timeline Week",
selectedDateFormat: "{0:D} - {1:D}",
selectedShortDateFormat: "{0:d} - {1:d}",
majorTick: 1440,
numberOfDays: 7
},
name: "MyCustomTimelistView",
calculateDateRange: function() {
//create the required number of days
var start = this.options.date,
// start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1),
idx, length,
dates = [];
for (idx = 0, length = this.options.numberOfDays; idx < length; idx++) {
dates.push(start);
start = kendo.date.nextDay(start);
}
this._render(dates);
},
previousDate: function() {
var date = new Date(this.startDate());
date.setDate(date.getDate() - this.options.numberOfDays);
return date
}
});
$(function() {
$("#scheduler").kendoScheduler({
date: new Date("2013/6/13"),
startTime: new Date("2013/6/13 07:00 AM"),
height: 600,
eventTemplate: $("#event-template").html(),
views: [
"day",
{ type: "MyCustomTimelistView", selected: true,
},
"month",
"agenda",
"timeline"
],
timezone: "Etc/UTC",
dataBinding: function(e) {
var view = this.view();
$( ".k-scheduler-times > table > tbody > tr:eq(1)" ).hide();
$( ".k-scheduler-header-wrap > table > tbody > tr:eq(1)" ).hide();
},
dataSource: {
batch: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/meetings",
dataType: "jsonp"
},
update: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/update",
dataType: "jsonp"
},
create: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/create",
dataType: "jsonp"
},
destroy: {
url: "https://demos.telerik.com/kendo-ui/service/meetings/destroy",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
schema: {
model: {
id: "meetingID",
fields: {
meetingID: { from: "MeetingID", type: "number" },
title: { from: "Title", defaultValue: "No title", validation: { required: true } },
start: { type: "date", from: "Start" },
end: { type: "date", from: "End" },
startTimezone: { from: "StartTimezone" },
endTimezone: { from: "EndTimezone" },
description: { from: "Description" },
recurrenceId: { from: "RecurrenceID" },
recurrenceRule: { from: "RecurrenceRule" },
recurrenceException: { from: "RecurrenceException" },
roomId: { from: "RoomID", nullable: true },
attendees: { from: "Attendees", nullable: true },
isAllDay: { type: "boolean", from: "IsAllDay" }
}
}
}
},
group: {
resources: ["Rooms"],
orientation: "vertical"
},
resources: [
{
field: "roomId",
name: "Rooms",
dataSource: [
{ text: "Meeting Room 101", value: 1, color: "#6eb3fa" },
{ text: "Meeting Room 201", value: 2, color: "#f58a8a" }
],
title: "Room"
},
{
field: "attendees",
name: "Attendees",
dataSource: [
{ text: "Alex", value: 1, color: "#f8a398" },
{ text: "Bob", value: 2, color: "#51a0ed" },
{ text: "Charlie", value: 3, color: "#56ca85" }
],
multiple: true,
title: "Attendees"
}
]
});
});
</script>
<style>
.movie-template {
overflow: auto !important;
width: fit-content !important;
}
.k-event {
width: fit-content !important;
}
.space {
width: 20px;
height: 15px;
display: inline-block;
}
.movie-template img {
float: left;
margin: 0 8px;
}
.movie-template p {
margin: 5px 0 0;
display: inline-block;
}
.movie-template h3 {
padding: 0 0 5px;
font-size: 12px;
}
.movie-template a {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.k-state-hover .movie-template a,
.movie-template a:hover {
color: #000000;
}
</style>
</body>
</html>
you can create custom views like this and use it in your code
var CustomMonthView = kendo.ui.TimelineMonthView.extend({
options: {
name: "CustomMonth",
title: "Month"
},
name: "CustomMonth",
_positionEvent: function(eventObject) {
var eventHeight = this.options.eventHeight + 2;
var rect = eventObject.slotRange.innerRect(eventObject.start, eventObject.end, true);
var left = this._adjustLeftPosition(rect.left);
var width = rect.right - rect.left - 2;
if (width < 0) {
width = 0;
}
if (width < this.options.eventMinWidth) {
var slotsCollection = eventObject.slotRange.collection;
var lastSlot = slotsCollection._slots[slotsCollection._slots.length - 1];
var offsetRight = lastSlot.offsetLeft + lastSlot.offsetWidth;
width = this.options.eventMinWidth;
if (offsetRight < left + width) {
width = offsetRight - rect.left - 2;
}
}
eventObject.element.css({
top: eventObject.slotRange.start.offsetTop + eventObject.rowIndex * (eventHeight + 2) + 'px',
left: left,
width: width
});
},
_arrangeRows: function (eventObject, slotRange, eventGroup) {
var startIndex = slotRange.start.index;
var endIndex = slotRange.end.index;
var rect = eventObject.slotRange.innerRect(eventObject.start, eventObject.end, true);
var rectRight = rect.right + this.options.eventMinWidth;
var events = kendo.ui.SchedulerView.collidingEvents(eventObject.slotRange.events(), startIndex, endIndex);
slotRange.addEvent({
slotIndex: startIndex,
start: startIndex,
end: endIndex,
rectLeft: rect.left,
rectRight: rectRight,
element: eventObject.element,
uid: eventObject.uid
});
events.push({
start: startIndex,
end: endIndex,
uid: eventObject.uid
});
var rows = kendo.ui.SchedulerView.createRows(events);
if (eventGroup.maxRowCount < rows.length) {
eventGroup.maxRowCount = rows.length;
}
for (var idx = 0, length = rows.length; idx < length; idx++) {
var rowEvents = rows[idx].events;
for (var j = 0, eventLength = rowEvents.length; j < eventLength; j++) {
eventGroup.events[rowEvents[j].uid].rowIndex = idx;
}
}
}
});
hope this helps
I have a chart.js bar chart that pulls data via an ajax call to a Django APIView. The ajax call returns one dictionary with a stack of data inside I use to customize the chart. Here's the chart.js code:
var current_year = '{% url "saveskore:api-current-year-savings" %}'
$.ajax({
url: current_year,
type: 'GET',
cache: false,
dataType: 'json',
success: function(data) {
var ctx = document.getElementById('current-year-chart');
var chart = new Chart(ctx, {
type: 'bar',
data: {
labels: data['dates'],
datasets: [
{
label: data['income_label'],
backgroundColor: "#8e5ea2",
data: data['income'],
},
{
label: data['expense_label'],
backgroundColor: 'green',
data: data['expenses'],
},
{
label: data['savings_label'],
backgroundColor: "#3e95cd",
data: data['savings_goal'],
},
{
label: data['avail_label'],
backgroundColor: "#pink",
data: data['avail_to_spend'],
},
]
},
options: {
legend: { display: false },
title: {
display: true,
text: 'Savings for ' + data['year']
}
}
});
}
});
Works great. Looks great.
But! I have a django formset on a separate page that updates the table data that the chart pulls from.
When I update the data in the formset and submit, redirecting to the chart page ... NO UPDATE OCCURS.
If I make some code change or otherwise reload the browser, VOILA, the chart updates.
I have read about either cache=false and chart.update(), but find i have not been able to make either work, mainly because the exact details on their use are not clear.
I would really appreciate input on this.
Have you tried chart.destroy() method ? and then build again the chart with the new data .. that works for me.. take a look at my example
let flag = 0;
var xChart = "";
function dibujar(valor, meses) {
try {
if (valor.length > 0) {
$('#grafico').fadeIn('fast');
var canvas = document.getElementById('chart');
let tipGra = $('#slcTipGra').val();
if (flag !== 0) {
xChart.destroy();
}
//rgba(54, 162, 235, 0.2)
if (tipGra === "bar" || tipGra === "horizontalBar") {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
backgroundColor: "#3e95cd",
borderColor: "#3e95cd",
borderWidth: 2,
hoverBackgroundColor: "#3e95cd",
hoverBorderColor: "#3e95cd",
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
color: 'white',
anchor: 'end',
align: 'start',
font:
{
weight: 'bold'
}
}
},
scales: {
yAxes: [{
stacked: true,
gridLines:
{
display: true,
color: "rgba(255,99,132,0.2)"
}
}],
xAxes: [{
gridLines: {
display: true
}
}]
}
};
}
if (tipGra === 'line') {
var data = {
labels: meses,
datasets: [
{
label: "Dólares($)",
fill: false,
lineTension: 0.1,
backgroundColor: "rgba(75,192,192,0.4)",
borderColor: "rgba(75,192,192,1)",
borderCapStyle: 'butt',
borderDash: [],
borderDashOffset: 0.0,
borderJoinStyle: 'miter',
pointBorderColor: "rgba(75,192,192,1)",
pointBackgroundColor: "#fff",
pointBorderWidth: 1,
pointHoverRadius: 5,
pointHoverBackgroundColor: "rgba(75,192,192,1)",
pointHoverBorderColor: "rgba(220,220,220,1)",
pointHoverBorderWidth: 2,
pointRadius: 5,
pointHitRadius: 10,
data: valor,
}
]
};
var option = {
title: {
display: true,
fontSize: 20,
fontFamily: 'Helvetica',
text: 'Reporte Mensual de Ventas'
},
plugins: {
datalabels: {
backgroundColor: function (context) {
return context.dataset.borderColor;
},
borderRadius: 4,
color: 'white',
anchor: 'end',
align: 'end',
}
},
showLines: true
};
}
xChart = new Chart(canvas,
{
type: tipGra,
data: data,
options: option
});
flag = 1;
}
else {
$('#grafico').fadeOut('fast');
$('#graficoMessage').fadeIn('slow');
}
} catch (err) {
console.log(err);
}
}
I declare "xChart" as a global variable and a flag to know if it's the first chart to build. The example build 3 different types of charts (Vertical Bar, Horizontal Bar and Line) depending on the selection of the chart type "let tipGra = "$('#slcTipGra').val();"
I'm using the free jqGrid version 4.15.0, and I have a subgrid in the main grid and the right border of the subgrid is not visible.
jQuery version: 1.12.4
jQuery UI version: 1.11.4
fontawesome version: 4.7.0
See my fiddle or below code snippet: https://jsfiddle.net/eL7h9e8z/
You'll need to click the + sign to show the subgrid.
var maingriddata = [{
Column1: "Test1",
Column2: "Test1",
ShowSubGrid: true
}, {
Column1: "Test2",
Column2: "Test2",
ShowSubGrid: false
}];
var subgridData = [{
SubCol1: 'SubCol1',
SubCol2: 'SubCol2',
SubCol3: 'SubCol3'
}, {
SubCol1: 'SubCol11',
SubCol2: 'SubCol22',
SubCol3: 'SubCol33'
}];
$(function() {
"use strict";
var $grid = $("#policyGrid");
$grid.jqGrid({
datatype: "local",
data: maingriddata,
colNames: ["Column1", "Column2", "", ""],
colModel: [{
name: "Column1",
width: 50
}, {
name: "Column2"
}, {
name: "viewsubgrid",
align: "center",
width: 21,
formatter: function(cellvalue, options, rowObject) {
if (rowObject.ShowSubGrid) {
return "<span class='fa fa-fw fa-plus subgridIcon'></span>";
} else {
return " ";
}
}
}, {
name: "ShowSubGrid",
hidden: true
}],
cmTemplate: {
sortable: false,
resizable: false
},
iconSet: "fontAwesome",
loadonce: true,
altRows: true,
caption: "",
width: '100%',
height: '100%',
shrinkToFit: true,
autowidth: true,
height: 380,
pgbuttons: false,
pgtext: null,
toppager: false,
pager: true,
rownumbers: false,
threeStateSort: false,
subGrid: true,
subGridOptions: {
hasSubgrid: function(options) {
return options.data.ShowSubGrid;
},
reloadOnExpand: false,
openicon: "ui-helper-hidden"
},
subGridRowExpanded: function(subgridDivId, rowId) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgridDivId + "_t";
pager_id = "p_" + subgrid_table_id;
var $table = $("<table id='" + subgrid_table_id + "' class='scroll'></table>");
$("#" + subgridDivId).append($table);
$("#" + subgrid_table_id).jqGrid({
datatype: "local",
data: subgridData,
colNames: ['Sub Col 1', 'Sub Col 2', 'Sub Col 3'],
colModel: [{
name: "SubCol1",
width: 100,
resizable: false
}, {
name: "SubCol2"
}, {
name: "SubCol3"
}, ],
cmTemplate: {
sortable: false
},
rowNum: 0,
pgbuttons: false,
pgtext: null,
sortable: false,
toppager: false,
viewrecords: true,
pager: true,
rownumbers: false,
height: '80px',
autoresizeOnLoad: true,
idPrefix: subgridDivId + "_" + rowId + "_",
loadComplete: function(data) {
$("#" + subgrid_table_id).jqGrid("setGridHeight", '100%');
},
beforeSelectRow: function(rowid, e) {
return false;
}
}).unbind("contextmenu");
$("#" + subgrid_table_id).jqGrid('navGrid', {
add: false,
edit: false,
del: false,
refresh: false,
search: false
});
},
beforeSelectRow: function(rowid, e) {
var iCol = $.jgrid.getCellIndex(e.target);
if (iCol == $grid.jqGrid("getGridParam", "iColByName")['viewsubgrid']) {
var $btn = $(e.target).closest("td").find('.subgridIcon');
var $tr = $(e.target).closest("tr.jqgrow");
if ($tr.find(">td.sgcollapsed").length > 0) {
$(this).jqGrid("expandSubGridRow", rowid);
$btn.removeClass('fa-plus').addClass('fa-minus');
} else {
$(this).jqGrid("collapseSubGridRow", rowid);
$btn.removeClass('fa-minus').addClass('fa-plus');
}
}
return false;
}
}).jqGrid("navGrid", {
add: false,
edit: false,
del: false,
refresh: false,
search: false
})
.jqGrid("hideCol", "subgrid")
.unbind("contextmenu");
});
.ui-helper-hidden {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script type='text/javascript'>
$.jgrid = $.jgrid || {};
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.0/jquery.jqgrid.src.js"></script>
<link href="https://code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.0/css/ui.jqgrid.css" rel="stylesheet"/>
<div id="pnlGrid" style="margin-left: 10px; margin-right: 10px;width:700px;">
<table id="policyGrid">
</table>
</div>
Missing border image:
I've noticed that if I reduce (manually) '.ui-jqgrid-hdiv','.ui-jqgrid-bdiv' & '.ui-jqgrid-pager' by 2px, the border is visible.
Anybody has an idea?
Thanks.
Thank you for the bug report and for the demo, which reproduces the problem!
The reason of the problem is the usage of wrong box-sizing on .ui-jqgrid (outer div of the grid) in case of grid as subgrid. The box-sizing of all jqGrid elements should be border-box with the only exception .ui-jqgrid, which should be content-box. One can fix the problem by adding the following additional CSS rules:
.subgrid-data > .tablediv > .ui-jqgrid {
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
.subgrid-data > .tablediv > .ui-jqgrid > .ui-jqgrid-view {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
The first rule reset box-sizing of .ui-jqgrid to content-box and the next one changes it back to border-box for children of .ui-jqgrid-view. I updated the main code of ui.jqgrid.css on GitHub too (see the commit).
The demo https://jsfiddle.net/OlegKi/eL7h9e8z/2/ demonstrates working of the changes. I made some other small changes in your code to fix some minor problems.
I need to put a image on center of titlebar in sencha touch 2 , but I can't! I touch js and CSS but it's impossible.... any idea, please? Thanks!
try this one it will help for You..
Its very simple...
title:'give image tag with location thats all'
You can try setTitle('<div class="logo"/>')
and
.logo {
background: url('../images/logo.png') no-repeat center;
width:100px;
height:40px
}
ImageTitleBar class.
Ext.define('myapp.controls.ImageTitleBar', {
extend: 'Ext.TitleBar',
alias: 'widget.imageTitleBar',
requires: [
'Ext.Img'
],
config: {
imageSource: ''
},
applyInitialItems: function(items) {
var me = this,
defaults = me.getDefaults() || {};
me.initialItems = items;
me.leftBox = me.add({
xtype: 'container',
style: 'position: relative',
layout: {
type: 'hbox',
align: 'center'
},
listeners: {
resize: 'refreshTitlePosition',
scope: me
}
});
me.spacer = me.add({
xtype: 'component',
style: 'position: relative',
flex: 1,
listeners: {
resize: 'refreshTitlePosition',
scope: me
}
});
me.rightBox = me.add({
xtype: 'container',
style: 'position: relative',
layout: {
type: 'hbox',
align: 'center'
},
listeners: {
resize: 'refreshTitlePosition',
scope: me
}
});
me.titleComponent = me.add({
xtype: 'container',
hidden: defaults.hidden,
centered: true,
layout: {
type: 'hbox',
align: 'middle'
}
});
me.titleImage = me.titleComponent.add({
xtype: 'img',
width: 36,
height: 36
})
me.titleLabel = me.titleComponent.add({
xtype: 'title'
});
me.doAdd = me.doBoxAdd;
me.remove = me.doBoxRemove;
me.doInsert = me.doBoxInsert;
},
updateTitle: function(newTitle) {
this.titleLabel.setTitle(newTitle);
this.titleLabel.setHidden(!newTitle);
if (this.isPainted()) {
this.refreshTitlePosition();
}
},
updateImageSource: function(newImageSource) {
this.titleImage.setSrc(newImageSource);
this.titleImage.setHidden(!newImageSource);
if (this.isPainted()) {
this.refreshTitlePosition();
}
}
})