Editing subrow - jquery easyui edatagrid - edit

OK- I have been beating my head against this since last Friday, I figure it is finally time to post for help. I think I have my code fairly settled, and I think things should work.
I have a grid where I edit the row, add rows, and then I expand the rows loading a subgrid (editable edatagrid). I want to simply edit and cancel the editable subgrid. However also want to take the ID column that I pass to the server page for updating from the parent row (api).
Editing and adding new rows is working, opening the fields I want as editable in an editable grid in the sub row is working. However getting the sub grid to cancel edit, save, and use iconCls will not work (iconCls code removed at the moment for the subgrid). I have not included all the code, just what is relevant to the question here so there are some other calls with missing javascript. If anybody would like that code just holler, and I will include it.
master grid
<section class="grid">
<table id="wells" class="easyui-datagrid" title=" " style="width:100%;height:500px"
pagination="true" idField="api" fitColumns="true" url="getinfo.php"
collapsible="true" singleSelect="true" toolbar="#tb" resizeHandle="both"
autoRowHeight="true" nowrap="false" rownumbers="true" pageList="[10,25,50,100,5000]">
<thead>
<tr>
<th data-options="field:'well_name', width:48" sortable="true">Name</th>
<th data-options="field:'well_num',width:18" sortable="true">Num</th>
<th data-options="field:'field',width:48" sortable="true">Field</th>
<th data-options="field:'pad',width:36" sortable="true">Pad</th>
<th data-options="field:'api',width:32" sortable="true">API</th>
<th data-options="field:'legal_description',width:46" sortable="true">Legal</th>
<th data-options="field:'county_state',width:40" sortable="true">County, State</th>
<th data-options="field:'lease',width:33" sortable="true">Lease</th>
<th data-options="field:'unit_ca_pa',width:57" sortable="true">Unit CA PA</th>
<th data-options="field:'status',width:27">Status</th>
<th data-options="field:'status_date',width:22">Updated</th>
<th data-options="field:'wildlife_stips',width:75">Wildlife Stips</th>
<th data-options="field:'notes',width:75">Notes</th>
</tr>
</thead>
</table>
master grid toolbar
<div id="tb" style="padding:3px"><span>Field:</span>
<input id="field" style="line-height:22px;border:1px solid #ccc">
<span>Pad:</span>
<input id="pad" style="line-height:22px;border:1px solid #ccc">
<span>API:</span>
<input id="api" style="line-height:22px;border:1px solid #ccc">
Search
Reset
New Well
Edit Well
</div>
expandable, edatagrid section
<script type="text/javascript">
$('#wells').datagrid(
{
view: detailview,
detailFormatter:function(index,row)
{ return '<div style="padding:2px"><table class="ddv"></table></div>'; },
onExpandRow: function(index,row)
{
var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
ddv.edatagrid(
{
url:'geteditexpand.php?api='+row.api,
saveUrl:'updateeditwell.php?api='+row.api,
fitColumns:true,
singleSelect:true,
rownumbers:true,
loadMsg:'',
height:'auto',
columns:[[
{field:'location',title:'Location'},
{field:'NorthSouth',title:'N+S-',editor:'text'},
{field:'EastWest',title:'E+W-',editor:'text'},
{field:'latitude',title:'Latitude',editor:'text'},
{field:'longitude',title:'Longitude',editor:'text'},
{field:'lot',title:'Lot',editor:'text'},
{field:'tract',title:'Tract',editor:'text'},
{field: 'action', title: 'Action',
formatter:function(value,row,index)
{
var s = 'Save ';
var c = 'Cancel';
return s+c;
}
}
]],
onResize:function()
{ $('#wells').edatagrid('fixDetailRowHeight',index); },
onLoadSuccess:function()
{
setTimeout(function(){
$('#wells').edatagrid('fixDetailRowHeight',index);
},0);
}
});
$('#wells').datagrid('fixDetailRowHeight',index);
}
});
</script>

you dont have updateURL, im not sure
url(source)
saveUrl(NewRecord)
missing
updateUrl:'updatefile.php'

Related

Add active class a column to table (as in netflix)

I need help to select a table header and select your column using classes. As in Netflix. I'm noob in VueJS
Example GIF
My code is
<table class="table">
<thead class="text-center">
<tr>
<th scope="col"><button type="button" class="btn plan_columnA selected" #click="planSelect('plan_columnA')">Column A</button></th>
<th scope="col"><button type="button" class="btn plan_columnB" #click="planSelect('plan_columnB')">Column B</button></th>
<th scope="col"><button type="button" class="btn plan_columnC" #click="planSelect('plan_columnC')">Column C</button></th>
</tr>
</thead>
<tbody class="text-center">
<tr>
<td class="plan_columnA selected">Mark</td>
<td class="plan_columnB">Otto</td>
<td class="plan_columnC">#mdo</td>
</tr>
<tr>
<td class="plan_columnA selected">Jacob</td>
<td class="plan_columnB">Thornton</td>
<td class="plan_columnC">#fat</td>
</tr>
<tr>
<td class="plan_columnA selected">Larry</td>
<td class="plan_columnB">the Bird</td>
<td class="plan_columnC">#twitter</td>
</tr>
</tbody>
</table>
My style is
.btn {
background-color: darkgrey;
color: white;
}
button.selected {
background-color: red;
}
td.selected {
color: red;
}
I try to do this, but I do not know if it's right
export default {
data () {
return {
planSelected: '',
}
},
methods: {
planSelect (plan) {
this.planSelected = plan;
$('.selected').removeClass('selected');
$('.' + this.planSelected).addClass('selected');
},
},
}
I tried JQuery, but I want to do it in VueJS.
Thanks!
That's fairly easy, i've made an example for you in a fiddle, hope it helps you on the way. It should be made more dynamically, for better overview, but you can play around with the code i've made.
In the perfect scenario, you would generate all rows/columns from a data variable, instead of doing all this manually.
https://jsfiddle.net/6aojqm0k/
What i've made is just having 1 data variable, which you set and check for on the different tds and buttons.
data: () => ({
planSelected: 'plan_columnA'
})
Button to choose the plan:
<button type="button" class="btn plan_columnA" :class="{selected: planSelected === 'plan_columnA' }" #click="planSelected = 'plan_columnA'">Column A</button>
And the actual column to show selected
<td class="plan_columnA" :class="{selected: planSelected === 'plan_columnA' }">Mark</td>
Pro tip: Never combine jQuery and VueJS - Just use VueJS

Angular Datatable Responsive Extention not working with *ngFor directive

I am working on jhipster 5.7.2 project with angular 7 and I am using angular datatables and it's responsive extension is working fine when I have static data, but when I use *ngFor directive in tag it doesn't collapse the column on resizing, just hides the column header but the column is still there.
After I resize to small window size and size back to normal the orientation of the first table row gets distorted and doesn't get fixed until I reload the page.
P.S - Struggled a lot on finding a fix, and tried giving width=100% to the table but the issue still persists.
user-management-component.html
<div>
<table datatable [dtOptions]="dtOptions" class="row-border hover" width="100%">
<thead>
<tr class="tr-bg">
<th>ID</th>
<th>Login</th>
<!-- <th>Last name</th> -->
</tr>
</thead>
<tbody>
<tr *ngFor="let user of users; trackBy: trackIdentity">
<td><span>{{user.id}}</span></td>
<td><span>{{user.login}}</span></td>
<!-- <td><span>Bar</span></td> -->
</tr>
</tbody>
</table>
</div>
Here is the ngOnInit() function where dtOptions are declared.
user-management-component.ts
ngOnInit() {
this.dtOptions = {
responsive: true
};
this.accountService.identity().then(account => {
this.currentAccount = account;
this.loadAll();
this.registerChangeInUsers();
});
}
Full size page table
Table After resizing the window
Thanks in advance for the help!
I have a half answer to your question, the code below adjusts the table, im using it to readjust my tables on sidemenu open/close. Its a half answer because I dont know when should you call it. I hope It helps
datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
dtInstance.columns.adjust().draw();
})

Fixed Column on HTML Table with Vue JS

I'm having a problem with my table when I scroll to the right
this is my code
TableComponent.vue
<div id="main-container">
<table class="maint-table">
<thead id="table-header">
<tr>
<th class="dates"> </th>
<th v-for="data in dateHeader">{{data}}</th>
</tr>
<tr>
<th class="title"> </th>
<th v-for="data in dayOfWeek">{{data}}</th>
</tr>
</thead>
<tbody id="table-body" #scroll="fixedScroll">
<table_block :table_data="dataHeader"></table_block>
<table_block :table_data="allData"></table_block>
</tbody>
</table>
</div>
...
...
...
<script>
components: {
table_block
},
methods: {
fixedScroll() {
fixedScroll(event) {
var thead = document.getElementById("table-header");
var tbodyScroll = document.getElementById("table-body").scrollLeft;
thead.scrollLeft = tbodyScroll;
}
</script>
I made a props to pass the data to my TableBlock to loop through the data and display it on the table. This is my TableBlock Code.
TableBlock.vue
<template>
<div>
<tr v-for="row in table_data">
<td>
<div class="drop-down-container"><span class="drop-down-controller"">{{ row.title }}</span></div>
</td>
<td v-for="cel in row.data" class="group-header">{{ cel }}</td>
</tr>
</div>
</template>
When I scroll it to the right, the first column must freeze but it's not.
I tried to create a dummy data inside TableComponent.vue with a normal HTML Table without passing the data to another component using props, it works perfectly. But when I use these codes, it doesn't work correctly.
Scenario
Let say I have 10 columns in the table, when I scroll it to the right, the 1st column will stick which is normal but when the 10th column reach to 1st column, the 1st column will scroll away together with the 10th column.
I'm trying my best to illustrate the scenario but this is the best that I can do. If someone can help, please help me.

Bootstrap 3 - Popover in wrong position the first time page loads

Bootstrap 3 popper's container is not correctly placed on the page the first time the user 'hovers' over the element triggering it. the second time onward, works like a charm.
HTML:
<table>
<thead>
<th>1</th>
<th>2</th>
<th>3</th>
</thead
<tbody>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>
<span class="glyphicon glyphicon-cog popover-me"></span>
</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
<tr>
<td>AAA</td>
<td>BBB</td>
<td>CCC</td>
</tr>
</tbody>
</table>
JS:
$('.popover-me').popover({
html: true,
trigger: 'hover',
placement: 'auto right',
container: 'body',
title: 'Title',
content: function(){
return '<img src="http://via.placeholder.com/150x150"/>';
}
});
JSFiddle: https://jsfiddle.net/wp083g18/2/
(you need to refresh if you want to see it again)
I think the problem is due to image loading, so the popover content is resized after showing.
So I suggest to add CSS to fix size of popover content:
.popover-content {
min-width: 150px;
min-height: 150px;
}
and/or preload image:
var img_url = "https://via.placeholder.com/150x150";
function preloadImage(url) {
console.log("preloadImage: "+url);
var img = new Image();
img.src = url;
}
preloadImage(img_url);
Check this fiddle: https://jsfiddle.net/beaver71/sysz405s/
Another option is dynamic placement of popover:
placement: function(pop, ele) {
if ($(ele).parent().is('td:last-child')) {
return 'left';
}
return 'right';
},

dijit.Dialog.hide() exception in animation handler for: onEnd

I am creating a dijit Dialog and then hiding it with a OK/Cancel button. As the dialog hides, I always get the follow errors in the javascript console:
exception in animation handler for: onEnd
TypeError: Cannot read property 'remove' of undefined(…)
See here: https://www.youtube.com/watch?v=QcEUsllrRGs
The error doesn't seem to affect anything, but I'd sure love to resolve it so I don't confuse that error for a real functional issue while debugging.
I've read many suggestions regarding similar errors... using lang.hitch, disconnecting from events, but nothing seems to work/be applicable. Help?!
Here's a snippet of my Dialog code:
function showMessageDialog(title, message, width) {
var content,
focusOnOkButton = function () {
dojo.byId('messageDialogOk').focus();
};
if (!dijit.byId("messageDialog")) {
new dijit.Dialog({}, "messageDialog").startup();
new dijit.form.Button({
onClick: function() {
dijit.byId('messageDialog').hide();
}
}, "messageDialogOk").startup();
}
if (width) {
dojo.byId('messageDialogTable').style.width = width + "px";
} else {
dojo.byId('messageDialogTable').style.width = "450px";
}
dijit.byId('messageDialog').resize();
dijit.byId('messageDialog').set("title", title);
content = dojo.byId("messageDialogMessage");
dojo.empty(content);
content.innerHTML = message;
dijit.byId('messageDialog').show();
setTimeout(focusOnOkButton, 50);
}
....and the associated HTML:
<div id="messageDialog" style="display:none;">
<table id="messageDialogTable" style="width:450px;table-layout: fixed;">
<tr>
<td colspan="2" style="padding: 0 0px 0px 5px;">
<table style="width: 100%;">
<tr>
<td id="messageDialogMessage" style="font-size: 10pt;"></td>
</tr>
<tr>
<td style="padding: 5px;text-align: center;">
<div id="messageDialogOk">OK</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
I tried to duplicate the problem with a simple JSFiddle example, but could not... so there's something going in in my app... but not sure what it could be.