We Keep Coding

Isnull function and how to display the correct set of data through javascript to a html table

I have this set of javascript script on datatable:
<script>
$(document).ready(function() {
var table = $('#elogbooktable').DataTable( {
"ajax": {url: "testing_getdetaildata.php", dataSrc: ""},
'columnDefs': [ {
'targets': 3,
'createdCell': function(td, cellData, rowData, row, col) {
if(rowData[4]) {
$(td).html(rowData[4]);
}
}
} ],
'filterDropDown': {
columns: [
{
idx: 5
}
],
bootstrap: true
},
rowCallback: function(row, data, index){
if(new Date(data[42]) < Date.now()){
$(row).find('td:eq(42)').css('background-color', '#f8d7da');
}
},
})
<?php $i=13;
foreach($columns as $id=>$value) {
print "showHideColumn($id, $i);\n";
$i++;
}
?>
//Add a text search box to each footer cell
table.columns().every( function () {
$(this.footer()).html("<input type='text' style='width:100%;' placeholder='Search'/>");
});
//Full table search functionality
// Column search function
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
if ( that.search() !== this.value ) {
that.search( this.value, true ).draw();
}
});
});
var buttons = new $.fn.dataTable.Buttons(table, {
'buttons': ['pageLength','copyHtml5',
{
extend: 'excelHtml5',
},
{
extend: 'print',
}]
}).container().appendTo($('#envdetail_wrapper .col-sm-6:eq(0)'));
setInterval( function () {
table.ajax.reload();
}, 300000 );
});
function showHideColumn(id, number) {
var dtable = $('#elogbooktable').DataTable();
if(dtable.column(number).visible() === true) {
if($(id).attr("class").includes("btn-primary")) {
$(id).removeClass("btn-primary");
$(id).addClass("btn-default");
}
dtable.column(number).visible(false);
}
else {
if($(id).attr("class").includes("btn-default")) {
$(id).removeClass("btn-default");
$(id).addClass("btn-primary");
}
dtable.column(number).visible(true);
}
}
</script>
The MySQL query is like this from testing_getdetaildata.php:
select *, ifnull(Board_ID,'') as Board_ID1 from Lab_WIP_History a LEFT join chamber_data b ON
a.LOT_LOCATION = b.Testtag LEFT JOIN chamber_data_1 c
ON a.LOTID = c.lotid;
And the query table is like this:
LOT_LOCATION, Zone, LOT_ID, DESIGN_ID, BOARD_ID, BOARD_ID1
SGBAKE.0012, '', CVN4BL2.11, NM112, NULL, ''
In the webpage, esp for
'targets': 3,
'createdCell': function(td, cellData, rowData, row, col) {
if(rowData[4]) {
$(td).html(rowData[4])
, the printed result in the webpage is like this:
LOT_LOCATION, Zone, LOT_ID, BOARD_ID
SGBAKE.0012, '', CVN4BL2.11, NM112
Which is not what i want since I want the Board_ID value in the table displayed to be replaced by BOARD_ID1. So, what I want is like this:
LOT_LOCATION, Zone, LOT_ID, BOARD_ID
SGBAKE.0012, '', CVN4BL2.11, ''
Does anyone know how to solve this table display issue? Any help is appreciated thank you!

JS return result from list if *either* option A or option B is selected from dropdown

I created a filter for a list of scholarships and it was working fine using the code below, but now I realize that I need to be able to display a particular scholarship when either "Freshmen" or "Sophomores" is selected from the "Standing" dropdown—but I can't figure out how to include multiple standings per scholarship.
Is it possible to accomplish this with an adjustment to the code below, or have I set myself up for failure?
var filters = {
need: "",
standing: "",
};
need.value = filters.need;
standing.value = filters.standing;
need.addEventListener("input", function() {
filters.need = need.value;
update();
});
standing.addEventListener("input", function() {
filters.standing = standing.value;
update();
});
function filterNeed(scholarship) {
return !filters.need.length || scholarship.need == filters.need;
}
function filterStanding(scholarship) {
return !filters.standing.length || scholarship.standing == filters.standing;
}
function update() {
let filteredCards = getScholarships().filter(filterNeed).filter(filterStanding);
console.log(filters);
output.innerHTML = filteredCards.map(scholarship => `<span>${scholarship.name}</span>`).join("");
};
update();
function getScholarships() {
return [
{
name: "Scholarship 1",
link: "#",
need: "yes",
standing: "Freshmen",
},
{
name: "Scholarship 2",
link: "#",
need: "no",
standing: "Sophomore",
},
{
name: "Scholarship 3",
link: "#",
need: "yes",
standing: "Junior",
}
];
}

Use arrays:
...
standing: ["Junior", "Sophomore"],
and fix filterStanding:
function filterStanding(scholarship) {
return !filters.standing.length || scholarship.standing.some(v => v == filters.standing);
}

Kendo Grid checkbox disable to edit

I'm looking a solution how to disable checkbox to be checked if checked='yes' in my dataSource.
Full Demo in Dojo
$("#grid").kendoGrid({
columns: [
{ selectable: true, headerTemplate:'<b>Some title</b>' },
{ field: "name" }
],
dataSource: [ { name: "Jane Doe", checked:"yes" },
{ name: "John Doe", checked:"no" },
{ name: "Doe John", checked:"yes" },
{ name: "John", checked:"no" } ],
dataBound:function(e){
var grid = this;
var rows = grid.items();
$(rows).each(function(e) {
var row = this;
var dataItem = grid.dataItem(row);
if (dataItem.checked == 'yes' ){
grid.select(row);
//grid.select('disable',true);
//grid.addClass(".k-state-selected");
}
});
}
});

You were almost there. Just add class for disabling mouse events on that row.
.disabled{
opacity:0.5;
pointer-events:none;
}
dataBound:function(e){
var grid = this;
var rows = grid.items();
$(rows).each(function(e) {
var row = this;
var dataItem = grid.dataItem(row);
if (dataItem.checked == 'yes' ){
grid.select(row);
console.log(row);
$(row).addClass("disabled");
}
}
Note: this will disable entire row from any events, if you want you can disable only checkbox by finding inner checkbox element:
$(row).find(".k-checkbox-label").addClass("disabled");
Your modified example: Disable checked

I am getting an error since I tried to move into this function csvDownload

I am trying to download the file from the grid.
when I click open first window link a popup opens.
in that popup you will see a grid.
but right now I am getting an error since I tried to move into this function
csvDownload Uncaught SyntaxError: Unexpected token <.
I am trying to download the file like the sample prototype fiddle.
can you guys tell me how to fix it providing my code below
sample prototype
http://jsfiddle.net/khfL1jsh/
Uncaught SyntaxError: Unexpected token < not working
http://jsfiddle.net/2s79mnq5/
template: function csvDownload() {
//return "testing" + that.FinancialDocuments.ImageType(model);
<a id=\"sportsDataPlayer\" download=\"download.csv\" type=\"text\/csv\">#= FileName.substring(FileName.lastIndexOf('/')+1) #</a>"
var csv = "a,b,c\n1,2,3\n";
var data = new Blob([csv]);
var a2 = document.getElementById("sportsDataPlayer");
alert("I am here");
a2.href = URL.createObjectURL(data);
}

I have modified the JS file a bit and now at least is not firing the error.
Take a look:
$("#open1").click(function() {
$("#win1").show().kendoWindow({
width: "500px",
height: "500px",
modal: true,
title: "Window 1"
});
});
//debugger;
$("#open2").click(function() {
$("#win2").show().kendoWindow({
width: "500px",
height: "500px",
modal: true,
title: "Window 2"
}).data("kendoWindow").center();
});
$("#close2").click(function() {
$("#win2").data("kendoWindow").close();
});
$(document).ready(function() {
$('.pai-del-menu').hide();
var cnt = 0;
var grid = $("#grid").kendoGrid({
dataSource: {
data: [{
FileName: '1 Download CSV (via btoa)',
ThreeDots: 'ThreeDots1'
}, {
FileName: '2 Download CSV (via btoa)',
ThreeDots: 'ThreeDots2'
}, {
FileName: '3 Download CSV (via btoa)',
ThreeDots: 'ThreeDots3'
}, {
FileName: '4 Download CSV (via btoa)',
ThreeDots: 'ThreeDots4'
}, {
FileName: '5 Download CSV (via btoa)',
ThreeDots: 'ThreeDots4'
}],
schema: {
model: {
fields: {
FileName: {
type: "string"
},
ThreeDots: {
type: "string"
}
}
}
},
sort: {
field: "FileName",
dir: "asc"
},
pageSize: 10
},
height: 500,
scrollable: true,
sortable: true,
selectable: true,
filterable: true,
pageable: true,
columns: [{
field: "FileName",
title: "File Name",
//template: "<a id=\"sportsDataPlayer\" download=\"download.csv\" type=\"text\/csv\">#= FileName.substring(FileName.lastIndexOf('/')+1) #</a>"
template: function csvDownload() {
//return "testing" + that.FinancialDocuments.ImageType(model);
var htmlString = "<a id=\'sportsDataPlayer\' download=\'download.csv\' type=\'text\/csv\'>#= FileName.substring(FileName.lastIndexOf('/')+1) #</a>"
var csv = "a,b,c\n1,2,3\n";
var data = new Blob([csv]);
var a2 = document.getElementById("sportsDataPlayer");
alert("I am here");
a2.href = URL.createObjectURL(data);
},
field: "ThreeDots",
title: "Last Name",
template: "<span class='deleteRow'>ThreeDots</span>"
}]
}).data("kendoGrid");
//var csv = "a,b,c\n1,2,3\n";
//var data = new Blob([csv]);
//debugger;
//var a2 = document.getElementById("sportsDataPlayer");
//alert("I am here");
//a2.href = URL.createObjectURL(data);
// grid.tbody.parents(".k-grid-content").eq(0).kendoScroller({ useOnDesktop: false });
// Start by hiding the confirmation
$('.testingConfirmation').hide();
// Create a persistent value for the window
var testingWindowVal;
// Listen to save button click
$("#save").click(function() {
// Set the persistent value
testingWindowVal = $("#fname").val();
// Show the dialog
if (testingWindowVal) {
$('.testingConfirmation').show();
}
});
// Listen to yes from the confirmation
$('#deleteDocumentYes').click(function() {
// Update necessary things
grid.dataSource.add({
"FileName": testingWindowVal,
"ThreeDots": "Last Name"
});
$("#fname").val('');
// Remove the value
testingWindowVal = null;
// Hide the dialog
$('.testingConfirmation').hide();
});
// Listen to no from the confirmation
$('#deleteDocumentNo').click(function() {
// Remove the value
testingWindowVal = null;
// Reset the #fname
$("#fname").val('');
// Hide the dialog
$('.testingConfirmation').hide();
});
});
This is the updated fiddle:
http://jsfiddle.net/2s79mnq5/#&togetherjs=CVveJp1NKp

jQuery datatable - unexpected vertical scrollbar

I am trying display data in jQuery datatable but, I am seeing unexpected vertical scrollbar.
Fiddler: https://jsfiddle.net/8f63kmeo/15/
HTML:
<table id="CustomFilterOnTop" class="table table-bordered table-condensed" width="100%"></table>
JS
var Report4Component = (function () {
function Report4Component() {
//contorls
this.customFilterOnTopControl = "CustomFilterOnTop"; //table id
//data table object
this.customFilterOnTopGrid = null;
//variables
this.result = null;
}
Report4Component.prototype.ShowGrid = function () {
var instance = this;
//create the datatable object
instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({
columns: [
{ title: "<input name='SelectOrDeselect' value='1' id='ChkBoxSelectAllOrDeselect' type='checkbox'/>" },
{ data: "Description", title: "Desc" },
{ data: "Status", title: "Status" },
{ data: "Count", title: "Count" }
],
"paging": true,
scrollCollapse: true,
"scrollX": true,
scrollY: "50vh",
deferRender: true,
scroller: true,
dom: '<"top"Bf<"clear">>rt <"bottom"<"Notes">i<"clear">>',
buttons: [
{
text: 'Load All',
action: function (e, dt, node, config) {
instance.ShowData(10000);
}
}
],
columnDefs: [{
orderable: false,
className: 'select-checkbox text-center',
targets: 0,
render: function (data, type, row) {
return '';
}
}],
select: {
style: 'multi',
selector: 'td:first-child',
className: 'selected-row selected'
}
});
};
Report4Component.prototype.ShowData = function (limit) {
if (limit === void 0) { limit = 2; }
var instance = this;
instance.customFilterOnTopGrid.clear(); //latest api function
instance.result = instance.GetData(limit);
instance.customFilterOnTopGrid.rows.add(instance.result.RecordList);
instance.customFilterOnTopGrid.draw();
};
Report4Component.prototype.GetData = function (limit) {
//structure of the response from controller method
var resultObj = {};
resultObj.Total = 0;
resultObj.RecordList = [];
for (var i = 1; i <= limit; i++) {
resultObj.Total += i;
var record = {};
record.Description = "Some test data will be displayed here.This is a test description of record " + i;
record.Status = ["A", "B", "C", "D"][Math.floor(Math.random() * 4)] + 'name text ' + i;
record.Count = i;
resultObj.RecordList.push(record);
}
return resultObj;
};
return Report4Component;
}());
$(function () {
var report4Component = new Report4Component();
report4Component.ShowGrid();
report4Component.ShowData();
});
function StopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
}
else {
evt.cancelBubble = true;
}
}
ISSUE:
I am wondering why the vertical scrollbar is appearing and why I am seeing an incorrect count...? Is it because my datatable has rows with multiple lines? As I have already set the scrolly to 50vh, I am expecting all the rows to be displayed.
Note:
The table should support large data too. I have enabled scroller for that purpose as it is required as per the application design. To verify that click on "Load all" button.
Any suggestion / help will be greatly appreciated?

You just need to remove property " scroller: true" it will solve your problem.
For demo please check https://jsfiddle.net/dipakthoke07/8f63kmeo/20/