Related
I am using KTDatatable. it works like a charm in desktop view. but when I view the table on the mobile screen, only first two-column is being shown. Code:
<div class="kt-datatable"></div>
<script>
function listing(){
$('.kt-datatable').KTDatatable({
translate: {
records: {
processing: '{{"Please wait"|__}}...',
noRecords: '{{"No records found"|__}}'
},
toolbar: {
pagination: {
items: {
default: {
first: '{{"First"|__}}',
prev: '{{"Previous"|__}}',
next: '{{"Next"|__}}',
last: '{{"Last"|__}}',
more: '{{"More pages"|__}}',
input: '{{"Page number"|__}}',
select: '{{"Select page size"|__}}'
},
info: "{{"Displaying"|__}} {{ '{{' }}start{{ '}}' }} - {{ '{{' }}end{{ '}}' }} {{"of"|__}} {{total}} {{"records"|__}}"
}
}
}
},
// layout definition
layout: {
scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
},
// column sorting
sortable: true,
pagination: true,
search: {
input: $('#generalSearch'),
delay: 400,
},
data: {
type: 'remote',
source: {
read: {
url: '{{url("api/dashboardpayments")}}'
},
},
pageSize: 10, // display 20 records per page
serverPaging: true,
serverFiltering: true,
serverSorting: true,
},
// columns definition
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100
},
{
field: "amount",
title: "{{'Amount'|__}}",
sortable: false,
width: 'auto',
},
{
field: "trxId",
title: "{{'trxId'|__}}",
sortable: false,
width: 'auto'
},
{
field: "for",
title: "{{'Service'|__}}",
sortable: false,
width: 'auto'
},
{
field: "created_at_date",
title: "{{'Date'|__}}",
sortable: false,
width: 'auto',
},
{
field: "Actions",
width: 100,
title: "{{'Actions'|__}}",
sortable: false,
overflow: 'visible',
template: function (data) {
var output = '' +
'<div class="btn-group btn-group">'+
'<a href="javascript:;" data-id='+data.id+' class="btn btn-brand btn-sm btn-icon confirmPayment" data-skin="dark" data-toggle="kt-tooltip" data-placement="top" title="{{"OK"|__}}"><i class="fa fa-check"></i></button>';
'</div>';
return output;
},
}
]
});
$('body').tooltip({selector: '[data-toggle="kt-tooltip"]'});
}
</script>
I am trying a lot of possible ways of custom CSS. But no luck. Any idea?
To make this work you can add the following:
rows: {
autoHide: false
},
AND
// layout definition
layout: {
scroll: true, // enable/disable datatable scroll both horizontal and vertical when needed.
footer: false, // display/hide footer
header: true,
},
I just put autoHide:false in a column definition. i.e:
columns: [
{
field: "id",
title: "{{'#'|__}}",
sortable: true,
width: 100,
autoHide: false
}
]
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 am trying to implement sortable rows in jqgrid, I have searched a lot but still sortable rows is not working. Here is my js files I have included
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.6.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/jquery.layout.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/i18n/grid.locale-en.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/js/jquery.jqGrid.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jqgrid/jquery.jqGrid.src.js")"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
here is my code
function BindGridView(columnNames, colModel) {
myData = [
{ ID: "1", Name: "Aswin", Value: "2" },
{ ID: "3", Name: "bshley", Value: "2" },
{ ID: "2", Name: "sgnel", Value: "4" },
{ ID: "4", Name: "dnoop", Value: "6" }
];
var gridimgpath = '/Scripts/jqgrid/themes/redmond/images';
$("#dataList").jqGrid('GridUnload');
jQuery("#dataList").jqGrid({
datatype: "local",
data: myData,
loadonce: true,
colNames: ["ID", "Name", "Value"],
colModel: [
{ name: "ID", width: 80 },
{ name: "Name", width: 90 },
{ name: "Value", width: 80, align: "right" }
],
autowidth: true,
width: 'auto',
height: 'auto',
rowNum: 10,
rowList: [10, 20, 30],
scrolling: true,
shrinktofit: true,
pager: '#pager',
sortable: true,
sortname: 'Name',
rownumbers: false,
rownumWidth: 30,
viewrecords: true,
sortorder: "desc",
multiselect: false,
imgpath: gridimgpath,
}).navGrid("#pager",
{ refresh: false, add: false, edit: false, search: false, del: false },
{}, // settings for edit
{}, // settings for add
{}, // settings for delete
{} // Search options. Some options can be set on column level
);
}
jQuery("#dataList").jqGrid(
'sortableRows',
{
update: function (e, ui) {
console.log("sortable");
alert("item with id=" + ui.item[0].id + " is droped");
}
});
jQuery("#dataList").setGridParam({ data: myData }).trigger("reloadGrid");
Grid is loaded with data but drag drop functionality of sortable row is not working.
I need to display a checkbox for column "Active" and when I change the selection to be to able to make an ajax request, to update the database.
Some sample code will help me a lot.
Thanks.
Please check this link: Extjs Grid plugins.
You can check sources for second grid.
Also you need listen 'selectionchange' event for selection model of the grid - so you'll have selected rows and then you can submit a request to server or whatever you need.
If you need specific column (not the first one) - you can check this link: Checkbox in the grid
And I think this is same here too: how to add checkbox column to Extjs Grid
This is example from one of my projects:
Ext.define('Magellano.view.news.List' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.newslist',
store: 'News',
remoteSort: false,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Online',
id: 'online-button',
enableToggle: true,
icon: '/images/light-bulb.png',
pressed: true,
handler: onItemToggle
}, { text: 'Preview',
id: 'preview-button',
enableToggle: true,
pressed: true
}],
initComponent: function() {
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
singleSelect: false,
sortable: false,
checkOnly: true
});
this.columns = [
{ text: '', width: 28, renderer: function(val) { return "<img src='/images/star-empty.png' height='16' width='16'></img>"}},
{ text: 'Date', width: 60, dataIndex: 'newstime', renderer: renderDate},
{ text: 'Agency', width: 60, dataIndex: 'agency', renderer: function(val) { return val;}},
{ text: 'Category', width: 60, dataIndex: 'category', renderer: function(val) { return val;}},
{ text: 'Title', flex: 1, dataIndex: 'title',
renderer: function(val) { return Ext.String.format('<b>{0}</b>', val); }
}
];
this.title = "News from " + Ext.Date.dateFormat(new Date(), "j M Y");
this.callParent(arguments);
}
}
The important part is that in the initComponent you create the selection model:
this.selModel = Ext.create('Ext.selection.CheckboxModel', {
singleSelect: false,
sortable: false,
checkOnly: true
});
I have used 3.8.2 JQGrid file jquery.jqGrid.min.js which is only needed file with all the modules in it which will be selected from there side while downloading which is not working with one of the error = }).navGrid is not a function.
I than downloaded tonytomov-jqGrid-c3a2a2d folder from http://github.com/tonytomov/jqGrid/tree/master and used it which has path to all the modules residing in js folder and working fine. Below is the jquery.jqGrid.js file from github. I know jquery.jqGrid.js is for development purpose but jquery.jqGrid.min.js not working for me at all.
Why is that?. I have experimented alot and thats what I have found. May be I am missing something.
//This file should be used if you want to debug and develop
function jqGridInclude()
{
var pathtojsfiles = "/Scripts/js/"; // need to be ajusted
// set include to false if you do not want some modules to be included
var modules = [
{ include: true, incfile:'i18n/grid.locale-en.js'}, // jqGrid translation
{ include: true, incfile:'grid.base.js'}, // jqGrid base
{ include: true, incfile:'grid.common.js'}, // jqGrid common for editing
{ include: true, incfile:'grid.formedit.js'}, // jqGrid Form editing
{ include: true, incfile:'grid.inlinedit.js'}, // jqGrid inline editing
{ include: true, incfile:'grid.celledit.js'}, // jqGrid cell editing
{ include: true, incfile:'grid.subgrid.js'}, //jqGrid subgrid
{ include: true, incfile:'grid.treegrid.js'}, //jqGrid treegrid
{ include: true, incfile:'grid.grouping.js'}, //jqGrid grouping
{ include: true, incfile:'grid.custom.js'}, //jqGrid custom
{ include: true, incfile:'grid.postext.js'}, //jqGrid postext
{ include: true, incfile:'grid.tbltogrid.js'}, //jqGrid table to grid
{ include: true, incfile:'grid.setcolumns.js'}, //jqGrid setcolumns
{ include: true, incfile:'grid.import.js'}, //jqGrid import
{ include: true, incfile:'jquery.fmatter.js'}, //jqGrid formater
{ include: true, incfile:'JsonXml.js'}, //xmljson utils
{ include: true, incfile:'grid.jqueryui.js'}, //jQuery UI utils
{ include: true, incfile:'jquery.searchFilter.js'} // search Plugin
];
var filename;
for(var i=0;i<modules.length; i++)
{
if(modules[i].include === true) {
filename = pathtojsfiles+modules[i].incfile;
if(jQuery.browser.safari) {
jQuery.ajax({url:filename,dataType:'script', async:false, cache: true});
} else {
if (jQuery.browser.msie) {
document.write('<script charset="utf-8" type="text/javascript" src="'+filename+'"></script>');
} else {
IncludeJavaScript(filename);
}
}
}
}
function IncludeJavaScript(jsFile)
{
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oScript.setAttribute('type', 'text/javascript');
oScript.setAttribute('language', 'javascript');
oScript.setAttribute('src', jsFile);
oHead.appendChild(oScript);
}
}
jqGridInclude();
//My Js
jQuery().ready(function () {
var lastSel;
jQuery("#sandgrid").jqGrid({
url: '/JQSandbox/MyGridData/',
datatype: 'json',
mtype: 'POST',
height: 255,
width: 640,
colNames: ['Index', 'Name', 'City', 'State'],
colModel: [
{ name: 'companyID', index: 'companyID', width: 5 },
{ name: 'companyName', index: 'companyName', width: 30 },
{ name: 'companyCity', index: 'companyCity', width: 30 },
{ name: 'companyState', index: 'companyState', width: 4, sortable: false}],
pager: jQuery('#sandgridp'),
rowNum: 5,
rowList: [5, 10, 20, 50],
sortname: 'companyID',
sortorder: "desc",
viewrecords: true,
altRows: true,
caption: 'Sandbox Grid',
ondblClickRow: function (id) {
if (id && id !== lastSel) {
jQuery('#sandgrid').restoreRow(lastSel);
lastSel = id;
alert("You've seleted " + id);
}
},
subGrid: true,
subGridUrl: '/JQSandbox/MySubGridData/',
subGridModel: [
{
name: ['Name', 'Department', 'Hire Date', 'Supervisor'],
width: [80, 20, 80, 10],
align: ['left', 'left', 'left', 'center'],
params: ['companyID']
}]
}).navGrid('#sandgridp', { edit: false, add: false, del: false });
});
How one can see in the comment of jquery.jqGrid.min.js
Modules: grid.base.js;
jquery.fmatter.js; grid.custom.js;
grid.common.js;
jquery.searchFilter.js;
grid.inlinedit.js; grid.celledit.js;
jqModal.js; jqDnR.js; grid.subgrid.js;
grid.grouping.js; grid.treegrid.js;
grid.import.js; JsonXml.js;
grid.setcolumns.js; grid.postext.js;
grid.tbltogrid.js; grid.jqueryui.js;
you selected all jqGrid modules with exception grid.formedit.js. In the jqGrid download page it has the name "Form Edit" (see "Editing" group). I tested and I can download now all modules from the jqGrid download page. So it should be not a technical problem.
So you should just download the jqGrid one more time and you will not have any problems with the usage of navGrid in jquery.jqGrid.min.js.