In my jqGrid I'm using both inline editing and form editing.
One of my columns should not be editable in inline editing so I put the attribut editable to false in my colModel, but this column should be visible in form editing (readonly when editing and editable when adding).
Here is what I have tried :
colModel:[{name:'bordereau',index:'BORDEREAU',width:60,align:'center',title:false,editable:false,editoptions: { readonly: true },editrules:{required:true},sortable:true,search:true},
function addRowForm(){
grid.editGridRow("new",{
width:'auto',
height:'auto',
reloadAfterSubmit:true,
recreateFilter:true,
beforeInitData: function() {
grid.jqGrid('setColProp','bordereau',{editable:true});
grid.jqGrid('setColProp','bordereau',{editoptions: {readonly: false}});
},
afterShowForm: function() {
$("#editmod"+gridId).css("top",Math.round(((hauteurFenetreUtilisable)/2)-($("#editmod"+gridId).height()/2))+"px");
$("#editmod"+gridId).css("left",Math.round(((largeutFenetreUtilisable)/2)-($("#editmod"+gridId).width()/2))+"px");
grid.jqGrid('setColProp','bordereau',{editable:false});
grid.jqGrid('setColProp','bordereau',{editoptions: {readonly: true}});
$("#TblGrid_listeVar2 tr:visible:odd").addClass("jqgrow ui-row-ltr odd");
},
onclickPgButtons : function (which, formid, numeroBordereau) {
},
onClose: function() {
},
afterComplete: function() {
}
});
}
function editRowForm(numeroBordereau){
grid.restoreRow(numeroBordereau);
resetGridVar();
grid.editGridRow(numeroBordereau,{
width:'auto',
height:'auto',
reloadAfterSubmit:true,
recreateFilter:true,
beforeInitData: function() {
grid.jqGrid('setColProp','bordereau',{editable:true});
},
afterShowForm: function() {
$("#editmod"+gridId).css("top",Math.round(((hauteurFenetreUtilisable)/2)-($("#editmod"+gridId).height()/2))+"px");
$("#editmod"+gridId).css("left",Math.round(((largeutFenetreUtilisable)/2)-($("#editmod"+gridId).width()/2))+"px");
$("#TblGrid_listeVar2 tr:visible:odd").addClass("jqgrow ui-row-ltr odd");
grid.jqGrid('setColProp','bordereau',{editable:false});
},
onclickPgButtons : function (which, formid, numeroBordereau) {
},
onClose: function() {
},
afterComplete: function() {
}
});
}
Related
I am a student studying vue.
I used Vue-chartjs to draw a graph, and I'd like to display the value on a pie graph.
But I don't know what to do.
Please help me...
the current situation (image) : enter image description here
My wish (image) : enter image description here
Vue.component('pie-chart', {
extends : VueChartJs.Pie,
props: ['data', 'options'],
mounted(){
this.renderPieChart();
},
computed: {
attendanceData : function(){
return this.data
}
},
methods : {
renderPieChart : function(){
this.renderChart(
{
labels: ['a','b','c','d'],
datasets: [{
backgroundColor: ['#10a236', '#f9cd41', '#fe7272', '#5c7add'],
data: [10,20,30,40]
}]
},
{
responsive: true,
maintainAspectRatio: false,
pieceLabel: {
render: 'value',
precision: 1,
}
}
)
}
},
watch : {
attendanceData : function(){
this.$data._chart.destroy();
this.renderPieChart();
}
}
});
As The dicusstion on tooltip of chart.js at Stackoverflow, uses plugin is one solution.
then as Vue chart.js guide said,
in mounted(), uses this.addPlugin to add your plugin like below demo:
Vue.config.productionTip = false
//below plugin is copied from https://stackoverflow.com/a/37989832/5665870
let pluginConfig = {
id: 'my-plugin',
beforeRender: function (chart) {
if (chart.config.options.showAllTooltips) {
// create an array of tooltips
// we can't use the chart tooltip because there is only one tooltip per chart
chart.pluginTooltips = [];
chart.config.data.datasets.forEach(function (dataset, i) {
chart.getDatasetMeta(i).data.forEach(function (sector, j) {
chart.pluginTooltips.push(new Chart.Tooltip({
_chart: chart.chart,
_chartInstance: chart,
_data: chart.data,
_options: chart.options.tooltips,
_active: [sector]
}, chart));
});
});
// turn off normal tooltips
chart.options.tooltips.enabled = false;
}
},
afterDraw: function (chart, easing) {
if (chart.config.options.showAllTooltips) {
// we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
if (!chart.allTooltipsOnce) {
if (easing !== 1)
return;
chart.allTooltipsOnce = true;
}
// turn on tooltips
chart.options.tooltips.enabled = true;
Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
tooltip.initialize();
tooltip.update();
// we don't actually need this since we are not animating tooltips
tooltip.pivot();
tooltip.transition(easing).draw();
});
chart.options.tooltips.enabled = false;
}
}
}
Vue.component('pie-chart', {
extends : VueChartJs.Pie,
props: ['data', 'options'],
mounted(){
this.addPlugin(pluginConfig);
this.renderPieChart();
},
computed: {
attendanceData : function(){
return this.data
}
},
methods : {
renderPieChart : function(){
this.renderChart(
{
labels: ['a','b','c','d'],
datasets: [{
backgroundColor: ['#10a236', '#f9cd41', '#fe7272', '#5c7add'],
data: [10,20,30,40]
}]
},
{
responsive: true,
maintainAspectRatio: false,
pieceLabel: {
render: 'value',
precision: 1
},
showAllTooltips: true
}
)
}
},
watch : {
attendanceData : function(){
//this.$data._chart.destroy();
//this.renderPieChart();
}
}
})
var vm = new Vue({
el: '#app',
data: {
message: 'Hello World'
}
})
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://unpkg.com/vue-chartjs/dist/vue-chartjs.min.js"></script>
<div id="app">
<pie-chart></pie-chart>
</div>
i have a problem with my datatable.
Using require.js buttons are not showing up as I would expect.
I have tried without require.js and it is working fine, using require I have this problem.
Here the code snippet:
UPDATE 15.12.2016:
var jobDataTable = function(){
requirejs.config({
baseUrl: "./assets",
paths: {
jquery: "js/vendor/jquery-1.11.1.min.js",
bootstrap: 'js/bootstrap/js/bootstrap.min',
datatables: 'plugins/dataTables/js/jquery.dataTables.min',
'datatables.bootstrap': 'plugins/dataTables/js/dataTables.bootstrap.min',
buttons: "plugins/dataTables/extensions/buttons/dataTables.buttons.min",
colVis: "plugins/dataTables/extensions/buttons/buttons.colVis.min",
html5: " plugins/dataTables/extensions/buttons/buttons.html5.min",
flash: " plugins/dataTables/extensions/buttons/buttons.flash.min",
print: " plugins/dataTables/extensions/buttons/buttons.print.min",
jsZip: "js/jszip"
},
shim: {
'bootstrap':{ deps:['jquery']},
'datatables':{ deps:['jquery', 'bootstrap']},
'datatables.bootstrap':{ deps:['datatables']},
'buttons': { deps:['datatables']},
'html5': { deps:['datatables', 'buttons']},
'flash': { deps:['datatables', 'buttons']},
'colVis':{ deps:['datatables', 'buttons']},
'print': { deps:['datatables', 'buttons']}
}
});
require(['jquery', 'bootstrap', 'datatables'], function($){
var dataset = app.getJobsByUser();
var jobTable = $('#axCsJobsTable').DataTable({
aaData: dataset,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
aoColumns: [
{ "mDataProp": "JOB_ID" },
{ "mDataProp": "JOB_NAME" },
{ "mDataProp": "JOB_EXPORT_DATE" },
{ "mDataProp": "JOB_EXPORT_FORMAT" },
{ "mDataProp": "JOB_CDATE" },
{ "mDataProp": "JOB_STATUS",
"sClass": "status",
"mRender": function (data, type, row) {
if (parseFloat(data) > 0) {
return "<span class='glyphicon glyphicon-ok-circle'></span>";
} else {
return "<span class='glyphicon glyphicon-time'></span>";
}
}
},
{
"mDataProp": null,
"className": "center",
"defaultContent": "<button id='axCsJobRemove' type='button' class='btn btn-default btn-sm'> <span class='glyphicon glyphicon-trash'></span> Delete </button>"
},
{
"mDataProp": null,
"className": "center",
"defaultContent": "<button id='axCsJobConvert' type='button' class='btn btn-default btn-sm'> <span class='glyphicon glyphicon-save'></span> Convert </button>"
}
]
});
$('#axCsJobsTable tbody').on( 'click', '#axCsJobRemove', function () {
var data = jobTable.row( $(this).parents('tr') ).data();
if (removeJob(data)==1){
jobTable
.row( $(this).parents('tr') )
.remove()
.draw();
}
});
$('#axCsJobsTable tbody').on( 'click', '#axCsJobConvert', function () {
var data = jobTable.row( $(this).parents('tr') ).data();
if(startJob(data)==1){
console.log('Job run successfully');
$('#axCsJobsTable').dataTable().fnDestroy();
setTimeout(function() { jobDataTable(); }, 3000);
}
});
});
}
Some ideas where It hangs?
Missing some dependencies?
Regards,
Patric
While we can use virtualization or paging to speed up refreshing, the whole-grid refresh for each data change is not good at all. Is there a way to avoid this?
This gets worse when multiple data changes in the bound objects, the grid gets refreshed for each change, which is not good either.
function PresonDetails(_contactName, _contactTitle, _country, _companyName) {
Object.defineProperties(this, {
"ContactName": {
get: function () {
return this._contactName;
},
set: function (value) {
this._contactName = value;
},
enumerable: true,
configurable: true
},
"ContactTitle": {
get: function () {
return this._contactTitle;
},
set: function (value) {
this._contactTitle = value;
},
enumerable: true,
configurable: true
},
"Country": {
get: function () {
return this._country;
},
set: function (value) {
this._country = value;
},
enumerable: true,
configurable: true
},
"CompanyName": {
get: function () {
return this._companyName;
},
set: function (value) {
this._companyName = value;
},
enumerable: true,
configurable: true
}
});
this.ContactName = _contactName;
this.ContactTitle = _contactTitle;
this.Country = _country;
this.CompanyName = _companyName;
}
(function () {
var details = [];
details.push(new PresonDetails("ContactName1", "ContactTitle", "USA", "MICro"));
var refresh = window.kendo.ui.Grid.fn.refresh;
window.kendo.ui.Grid.fn.refresh = function () {
alert("Grid Refresh");
refresh.call(this,arguments);
}
var $grid = $('#grid');
$grid.kendoGrid({
scrollable: true,
dataSource: details,
groupable: false,
sortable: false,
editable: true,
columns: [{
field: "ContactName",
title: "Contact Name",
width: 200
}, {
field: "ContactTitle",
title: "Contact Title",
width: 250
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150,
}]
});
})();
here is the demo
Preventing the dataBinding event of the grid will stop the refresh:
funnction avoidRefresh(e) {
e.preventDefault();
}
// stop refresh
grid.bind("dataBinding", avoidRefresh);
// allow refresh
grid.unbind(avoidRefresh);
Is it possible for pagination last button reload in jquery datatable?
I have used jquery datable ,Now my record more than one lack's data.
So I have page initialize 1000 record load and then last pagination button click reload data 1000.
can give me any other idea...?
For your reference:
$("#tblExmaple").hide();
jQuery(document).ready(function ($) {
getRecords();
function getRecords() {
jQuery.support.cors = true;
$.ajax({
cache: false,
type: "GET",
url: "http://localhost:1111/TestSample/api/getRecords",
datatype: "json",
data: { Arg1: "Values1",Arg2: "Values2",Arg2: "Values3" },
statusCode: {
200: function (data) {
$.each(data, function (index, obj) {
var colRes1 = obj.Res1;
var colRes2 = obj.Res2;
var dataAdd = [colRes1, colRes2];
getData.push(dataAdd);
});
// Server Side Code
setTimeout(function () {
$('#tblExmaple').dataTable({
"sPaginationType": "full_numbers",
"sScrollXInner": "50%",
"sScrollyInner": "110%",
"aaData": getData,
"iDisplayLength": 8,
"sInfoEmpty": false,
"bLengthChange": false,
"aoColumns": [
{ "sTitle": "Column1" },
{ "sTitle": "Column2" }
];
})
}, 500);
setTimeout(function () {
$("#tblExmaple").show();
}, 500);
},
408: function (data) {
var response_Text = JSON.stringify(data, undefined, 50);
if (data.response_Text == undefined) {
window.location = "/Home/Index";
}
else {
timeoutClear();
}
}
}
});
}
how can i change cell input to "readonly" after i loaded all grid's data?
I want only the loaded rows to have this cell as readonly , when i add new rows i don't want this cell to be readonly.
Thank's In Advance.
UPDATE:
this is my code:
$("#Grid1").jqGrid(
{
editurl: "clientArray",
datatype: 'xmlstring',
datastr: '<%=_xml_string %>' ,
colNames:['','cell1','cell2', 'cell3'],
colModel:[
{name:'cell1',index:'cell1', hidden: true},
{name:'cell2',index:'cell2', width:150, editable:true, edittype:'text',sorttype:"int" ,
editoptions:
{
maxlength:5,
dataInit: function (elem)
{
$(elem).numeric(false);
$(elem).blur(function(event_)
{
});
},
dataEvents:
[
{
type: 'keydown',
fn: function(e)
{
var key = e.charCode || e.keyCode;
if(key == 113)
{
}
}
}
]
}
},
{name:'cell3',index:'cell3', width:150 , editable:true,sorttype:"text" ,
editoptions:
{
readonly: 'readonly' ,
dataInit: function (elem)
{
$(elem).attr("tabindex","-1");
}
}
}
],
height: '120px' ,
autowidth: true,
shrinkToFit: false,
beforeSelectRow: function(rowid, e)
{
if (required_field != rowid && required_field!="") return false;
else
{
if( $(this).getGridParam('selrow') == rowid)
return false;
else
return true;
}
},
onSelectRow: function(id)
{
save_row(lastSel);
get_grid().editRow(id,false,'','','','','','','');
jQuery ('#' + id + _cell2').focus();
lastSel=id;
},
loadComplete: function()
{
var grid = $("#Grid1");
var ids = grid.jqGrid('getDataIDs');
for (var i=0;i<ids.length;i++)
{
var id_=ids[i];alert(id_);
grid.jqGrid('setCell',id_,'cell2','','not-editable-cell');
}
}
});
If you use some editing mode to edit the grid you can set any time 'not-editable-cell' on the cell or 'not-editable-row' on the row to prevent the cell or the row be editable. See this answer for the code example.