I'm trying to set form for modifying bootstrap table and I'm using JQuery .html() method for that. I did step by step from Jquery API Documentation but can't get why my save button doesn't fire. Where is my mistake?
this is my plunk
JS:
$(function () {
$("#button").click(function () {
$('#table').bootstrapTable('refreshOptions', {
data: data,
detailView: false,
filterControl: true,
columns: [
{
field: 'name',
title: 'Name',
sortable: true,
editable: true,
filterControl: 'input'
}, {
field: 'stargazers_count',
title: 'Structure',
sortable: true,
editable: true,
filterControl: 'input'
}, {
field: 'forks_count',
title: 'Class',
sortable: true,
editable: true,
filterControl: 'input'
}, {
field: 'description',
title: 'Description',
sortable: true,
editable: true,
filterControl: 'input'
}
]
});
});
$('#table').bootstrapTable({
detailView: true,
formatNoMatches: function () {
return "This table is empty...";
},
onClickCell: function(field, value, row, $element) {
if (field == 'name') {
$element.parent('tr').find('>td>.detail-icon').click();
// NOTE: needs index to call to expandRow
var $tr = $element.parent('tr');
// NOTE: literally first google result: http://stackoverflow.com/questions/469883/how-to-find-the-index-of-a-row-in-a-table-using-jquery
var index = $("> tr", $('#table').find('> tbody')).index($tr);
$('#table').bootstrapTable('expandRow',index);
}
},
onExpandRow: function(index, row, $detail) {
// console.log(row)
$detail.html('<table></table>').find('table').bootstrapTable({
columns: [{
field: 'id',
title: 'id'
}, {
field: 'status',
title: 'stat'
}, {
field: 'date',
title: 'date'
}],
data: row.children,
// Simple contextual, assumes all entries have further nesting
// Just shows example of how you might differentiate some rows, though also remember row class and similar possible flags
});
}
});
});
$(function () {
var $result = $('#form');
$( "#newTable" ).submit(function( event ) {
alert("your changes has been saved");
});
$("form").on("submit", function(){
alert("form has been submitted.");
return false;
});
$('#table').on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
function getSelectedRow() {
var index = $('#table').find('tr.success').data('index');
return $('#table').bootstrapTable('getData')[index];
}
$result.html(
'<form action="">' +
'<table id="newTable" border="0" align="left" style="padding: 10px; margin: 10px; font-size: 14px; color: #0f0f0f">' + '<h3>'+
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Name</td>' + '<td> </td>' + '<td><input type="text" id="frm-name" name="frm-name" value="' + getSelectedRow().name + '"/></td>' + '</tr>' +
'<tr align="left" style="padding: 10px; margin: 10px;">' + '<td style="font-weight: bold;">Structure</td>' + '<td> </td>' + '<td><input type="text" id="frm-structure" name="frm-structure" value="' + getSelectedRow().stargazers_count + '"/></td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Class</td>' + '<td> </td>' + '<td><input type="text" id="frm-class" name="frm-class" value="' + getSelectedRow().forks_count + '"/></td>'+ '</tr>'+
'<tr align="left" style="padding: 10px; margin: 10px;"> '+ '<td style="font-weight: bold;">Description</td>' + '<td> </td>' + '<td><input type="text" id="frm-description" name="frm-description" value="' + getSelectedRow().description + '"/></td>'+ '</tr>'+
'</h3>' + '<input style="float: right; margin-top: 20%; margin-right: 15px;" class="btn btn-default" type="button" id="btn-submit-form" value="Save" type="submit"/>'
+ '</table>' + '</form> '
)
});
});
working plunk
Your submit event with #newTable is table, not form.
It should be:
$(document).on('submit', "#form form", function( event ) {
alert("Your change has been saved");
});
Your current input type for your save button is 'button' and not 'submit', which is why it is not getting submitted.
On line 104 of your table.js replace your ' And now just add the JS/jQuery for this submit event.
Related
Below is the code sample i'm trying to add a onclick function, but it seems not working as expected. The aim is to take the div tag text value and put it in a variable or return it through a func like myFunction I also tried adding listeners but don't know how it works . As its a template its hard to debug. and onclick event or call hierarchy is not easy to find. How to tackle it with simple javascript?
var resultTmpl = '<div id="group_header_{locationName}" class="current_list_audit_location expcol_{locationName:removeSpaces}" style="display:none;">'+
'<tpl for="pickslipid">' +
'<div class="audit_stage_list" style="margin-top: 6px !important;">' +
'<div class="orderpickingpicklistimageurlStage margin-top"></div>' +
'<div style="float:left;">' +
'<div class="orderpickingpicklistStagedesc orderpickingpicklistStagedesc2" id={pickupSlipId} onclick="myfunction()" > {pickupSlipId}</div></div>' +
'<div class="order_pick_right_stage_count_main_group_list audit_stage_pickup_date_list">' +
'<div>Pickup Date: {pickupDate}</div>' +
'</div>' +
'</div>' +
'</tpl>';
// pass the root node of the data object
Ext.define('sif.view.mapping.templates.EX04AuditStagingTpl', {
extend: "Ext.XTemplate",
html: resultTmpl,
myfunction : function(){
return document.getElementByClass("orderpickingpicklistStagedesc orderpickingpicklistStagedesc2").value;
},
constructor: function() {
console.log(resultTmpl);
return this.callParent([this.html]);
}
});
Ext.util.Format.removeSpaces = function(value) {
return !value ? value : String(value).replaceAll(" ", "_");
};
String.prototype.replaceAll = function(search, replacement) {
var target = this;
return target.split(search).join(replacement);
};
The above code is called from another class EX04AuditStagingLocation as given below:
var ex04AuditStagingList = Ext.create('sif.view.mapping.templates.EX04AuditStagingTpl');
var ex04AuditStageItems = {
xtype: 'panel',
width: '100%',
height: '100%',
cls: 'my-panel',
ui: 'plain',
itemId: 'ex04showdetailspanel',
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'list',
cls: 'current_page_cycle_count',
store: 'AuditStagingStore',
itemTpl: ex04AuditStagingList,
itemHeight: '100%',
height: '100%',
emptyText: '<p id="empty-text" style="text-align:center; left: 25px;">' + PhoneTopUtil.getLocaleString(1280040) + '</p>',
grouped: true,
zIndex: 10,
pinHeaders: true,
style: 'font-family: RobotoRegular;',
loadingText: "",
itemId: 'ex04AuditStageList',
id: 'ex04AuditStageList',
listeners: {
painted: function(element, ths) {
SifUtils.customImageLoad(element.select('img').elements, 0, IMAGELOADING.CONFIRMPICKUP);
},
refresh: function(element, options) {
SifUtils.customImageLoad(element.element.select('img').elements, 0, IMAGELOADING.CONFIRMPICKUP);
},
itemtap: function(list, index, target, record) {
AuditOrMoveUtil.controller.onAmMoveAction(list, null, null, record);
},
}
}
My problem is the following:
I've added to a grid row edit buttons as templates.
Now what i want to do is to allow editing of the cell text when i click the "edit button" inside that cell.
Does anyone has any idea how can i acive this ? How can i enable the edit of the cell in which the button is ?
Adding the template:
template:
"#if(" + columnWeekField + "!=null && IsEditable){#\<strong >#: " + columnWeekField + "# </strong> <span>(#:" + columnWeekFieldSum + "#) </span> <button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button > \
#}\
Here is what i've tried
$(grid.tbody).on("click", "[name='EditCell']", function (e) {
var cellElement = this;
var cell = $(cellElement);
var grid = $("#grid").getKendoGrid();
grid.editCell(cell);
console.log("button clicked");
});
If anyone has any idea that would be great. I'm sorry if the post already exists but i couldn't find any answers on this. If there are please point me to them.
You almost got it. To use editCell() you need to pass the td element to it. You are passing the button.
Just change this...
var cell = $(cellElement);
To this...
var cell = $(cellElement).closest("td");
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<script>
$(function() {
let grid = $("#grid").kendoGrid({
dataSource: {
data: [{ A: 1, B: 2, C: 2}]
},
columns: [{
field: "A",
template: "#= data.A #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
},{
field: "B",
template: "#= data.B #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
},{
field: "C",
template: "#= data.C #<button class='btn waves - effect waves-light' type='submit' name='EditCell'>Edit</button >"
}],
editable: true
}).data("kendoGrid");
$(grid.tbody).on("click", "[name='EditCell']", function (e) {
var cellElement = this;
var cell = $(cellElement).closest("td");
var grid = $("#grid").getKendoGrid();
grid.editCell(cell);
});
});
</script>
</head>
<body>
<div id="grid"></div>
</body>
</html>
Demo
With kendo grid for jquery, something like this worked for me
$("#grid").kendoGrid({
editable: "incell",
scrollable: true,
resizable: true,
pageable: {
refresh: true,
pageSizes: true,
previousNext: true,
responsive: false
},
noRecords: {
template: "<div class='container'>" + "<div class='row mb-3 '>" + "<div class='col-5 mx-auto'>" + "<div class='d-flex flex-column'>" +
"<img class='w-50 mt-3 align-self-center' src='/Content/EbizAssets/No-Invocies-Found.svg'>" +
"<span><strong>No invoices found.</strong></span>" +
"</div>" + "</div>" + "</div>" + "</div>"
},
columns: [
{
selectable: true
},
{
field: "CustomerName",
title: "Customer Name",
editable: true
},
{
field: "AmountDue",
title: "Amount Due",
template:
"<span>$#= parseFloat(data.AmountDue).toFixed(2) #<span>" +
"<img src='/Content/Images/icons-nav/Edit.svg' alt='EditCell' class='edit-icon-placement-so' />",
width: 200,
format: "{0:c2}",
/*editable: true*/
},
{
field: "EmailAddress",
title: "Email Address",
width: 260,
editable: false,
template: "#= EmailAddress #<img src='/Content/Images/icons-nav/Edit.svg' alt='EditCell' class='edit-icon-placement-ea' />"
},
],
selectable: "multiple, row",
}).data("kendoGrid");
}
});
});
} },
I'm trying to implement Child Rows into my DataTable. I've followed the tutorial and reviewed multiple posts on Stack about the Cannot set property 'style' of null child rows. Most of which mention missing <th></th> tags in the html.
I've made sure to include these but still get the Cannot set property 'style' of null child rows
My code below;
HTML:
<table id="activeCandidatesList" class="display" style="overflow-x: auto;">
<thead>
<tr>
<th></th>
<th>Candidate ID</th>
<th>Candidate Name</th>
<th>Candidate Email</th>
<th>Requisition Applied To</th>
<th>Application Source</th>
<th>Applied On Date</th>
</tr>
</thead>
</table>
Javascript:
//Candidate List
function format(d) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr>' +
'<td>Req Applied To:</td>' +
'<td>' + d.RequisitionAppliedTo + '</td>' +
'</tr>' +
'<tr>' +
'<td>Source:</td>' +
'<td>' + d.ApplicationSource + '</td>' +
'</tr>' +
'<tr>' +
'<td>Applied Date:</td>' +
'<td>' + d.AppliedOnDate + '</td>' +
'</tr>' +
'</table>';
};
var candCandId = jQuery('CandId').val();
var candCandidateName = jQuery('CandidateName').val();
var candPrimaryEmailAddress = jQuery('PrimaryEmailAddress').val();
var candRequisitionAppliedTo = jQuery('RequisitionAppliedTo').val();
var candApplicationSource = jQuery('ApplicationSource').val();
var candAppliedOnDate = jQuery('AppliedOnDate').val();
jQuery(document).ready(function () {
jQuery.ajax({
url: "/WebServices/getCandidateList.asmx/GetCandidateList",
method: "POST",
data: '{"CandId":"' + candCandId + '", "CandidateName": "' + candCandidateName + '", "PrimaryEmailAddress": "' + candPrimaryEmailAddress + '", "RequisitionAppliedTo": "' + candRequisitionAppliedTo + '","ApplicationSource": "' + candApplicationSource + '","AppliedOnDate": "' + candAppliedOnDate + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
var table = jQuery('#activeCandidatesList').DataTable({
data: data.d,
serverSide: true,
retrieve: true,
//responsive: true,
columns:
[
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "data": "CandId" },
{ "data": "CandidateName" },
{ "data": "PrimaryEmailAddress" },
{ "data": "RequisitionAppliedTo" },
{ "data": "ApplicationSource" },
{ "data": "AppliedOnDate" },
],
order: [[0, "ASC"]],
pageLength: 5,
dom: 'Bfrtip',
dom: 'Bfrtip',
buttons: [
{
extend: 'copyHtml5',
text: '<i class="fa fa-files-o"></i>',
titleAttr: 'Copy'
},
{
extend: 'excelHtml5',
text: '<i class="fa fa-file-excel-o"></i>',
titleAttr: 'Excel'
},
{
extend: 'csvHtml5',
text: '<i class="fa fa-file-text-o"></i>',
titleAttr: 'CSV'
},
{
extend: 'pdfHtml5',
text: '<i class="fa fa-file-pdf-o"></i>',
titleAttr: 'PDF'
}
]
});
}
});
// Add event listener for opening and closing details
$('#activeCandidatesList tbody').on('click', 'td.details-control', function () {
var tr = jQuery(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
});
i have problem with my kendo grid edit inline using dropdownlist inside the grid, this is my ScreenShoot
screenShoot1->please look field "icon"
when i click the icon's field, the field is change to dropdown list
like this
screenshoot2 after i clicked the field icon
, so what must i do ,if i want the field icon is a dropdown list before clicked ??
this is my code:
$("#customers").kendoDropDownList({
dataTextField: "pis_icon_url",
dataValueField: "pis_icon_id",
valueTemplate: '<span class="selected-value" style="background-image: url(\'#:pis_icon_url#\')"></span>',
template: '<span class="k-state-default" style="background-image: url(\'#:pis_icon_url#\')"\></span>',
dataSource: {
transport: {
read: {
dataType: "json",
url: "/api/icon-priority"
}
},
schema:{
data:'list'
}
},
height: 400
});
var dropdownlist = $("#customers").data("kendoDropDownList");
//in field: "pis_icon_id", please check "template", i already add property "id='customers'" in tag input but it doesn't work
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 550,
columns: [
{ field:"pis_priority_name",title:"Priority Name", width: "180px" },
{ field: "description", title: "Description", width: "380px" },
{ field: "pis_icon_id", title: "Icon", width: "300px",template:"<input id='customers' data-bind='value:pis_icon_id' style='width:100%;'>",
editor:categoryDropDownEditor
// "<div style='width: 100%;'><img src='#:pis_icon_url#' style='width: 22px;height: 22px;'> </div>"
},
{ field: "pis_priority_color", title: "Color",
width: "100px",
editor: function (container, options) {
$("<input type='color' name='"+options.field+"' data-bind='value:" + options.field + "' />")
.appendTo(container)
.attr("pis_priority_color", options.field)
.kendoColorPicker({
buttons: true
});
},
template: "<span style='display: inline-block; width: 50%; height: 50%; background-color: #= pis_priority_color #'></span>"
},
{ field: "is_default",
title: "Default",
width: "100px",
template:"<input name='is_default' class='ob-paid' type='checkbox' data-bind='checked: is_default' #= is_default? checked='checked' : '' #/> "
},
{ field: "active",
title:"Active",
template:"<input name='active' class='ob-paid' type='checkbox' data-bind='checked: active' #= active ? checked='checked' : '' #/> "
,width: "130px"
},
{ command: "destroy", title: " ", width: "150px" }],
editable: {
update:true
}
I was able to get it working using a MVC wrapper and by following this post:
http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#configuration
The key was adding the save event due to a known Kendo grid bug - seems to me the Kendo docs should have some mention of this issue.
I tried implementing the same logic using the javascript implementation but could not get it working.
I would like to launch a LightBoxNano image popup when clicking a cell in a dgrid.
How can I achieve this?
Thanks!
Here is some code:
var columns = [
{
label: 'Picture',
field: 'filename',
formatter: function(filename){
return '<div class="icon" style="background-image:url(/images/client/thumbnails/' + filename + ');"><a data-dojo-type="dojox.image.LightboxNano" class="iconlink" href="/images/client/' + filename + '"> </a></div>';
}
},
Editor({label: 'Type', field: 'filetype', widgetArgs: {store: filetypeStore, maxHeight: 150, style: "height: 20px;"}}, FilteringSelect),
Editor({label: 'Subtype', field: 'filesubtype', widgetArgs: {store: filesubtypeStore, maxHeight: 150, style: "height: 20px;"}}, FilteringSelect)
];
Do I miss something??
Thanks!
So, I used a Dialog insted of a Lightboxnano.
imageList.on(".dgrid-content .iconlink:click", function (evt) {
evt.preventDefault();
var data = dojo.getAttr(this, "href");
var picdial = new Dialog({
title: "Pic: " + data.substr(15),
content: '<img src="' + data + '">'
});
picdial.show();
});