Is anybody who used jtable plugin and create static nested tables inside their parents table? In this code $("#Table TBODY tr td:first-child") selector does not exist in moment when child table loading because he was loading her content before parent #Table load and create placeholder for his child -> $(#Table TBODY tr td:first-child) selector. Exaple in http://www.jtable.org/Demo/MasterChild is not same.
function loadCaloriestable() {
var d = $.Deferred();
$('#Table').jtable({
paging: true, //Enable paging
pageSize: 5, //Set page size (default: 10)
sorting: true, //Enable sorting
defaultSorting: 'Name ASC', //Set default sorting
actions: {
listAction: '/MNR/Fun'
},
fields: {
Total: {
title: 'Total',
width: '10%'
},
Goal: {
title: 'Goal',
width: '10%'
},
Remains: {
title: 'Remains',
width: '10%'
},
//-----------------
//CHILD TABLE DEFINITION
Days: {
width: '30%',
sorting: false,
edit: false,
create: false,
display: function () {
$('#Table').jtable('openChildTable',
$("#Table TBODY tr td:first-child"),
{
title: 'Dayssss',
defaultSorting: 'Name ASC', //Set default sorting
actions: {
listAction: '/Patient/Days'
},
fields: {
Day1: {
title: 'Daya',
width: '18%'
},
Day2: {
title: 'Dayy',
width: '18%'
}
}
}
, function (data) { //opened handler
data.childTable.jtable('load');
}
);
}
}
//---------------------
}
});
$('#Table').jtable('load');
}
You didn't create something to display in Days field.
Days: {
width: '30%',
sorting: false,
edit: false,
create: false,
display: function (){
var $img = $("<button title='View Days'></button>");
$img.click(function(){
$('#Table').jtable('openChildTable',$img.closest('tr'),{
title: 'Dayssss',
defaultSorting: 'Name ASC',
actions:{
listAction: '/Patient/Days'
},
fields: {
Day1: {
title: 'Daya',
width: '18%'
},
Day2: {
title: 'Dayy',
width: '18%'
}
}
},function (data) { //opened handler
data.childTable.jtable('load');
});
});
return $img; //<== Return $img to display in cell
}
}
Related
I'm using Gijgo Grid and I have added a button to the grid rows using the cellDataBound event but I can't get the button click event to fire. Anyone any idea what the issue may be ?
CompanyUsersGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('Subscribed' === column.field) {
if (record.Subscribed === '1') {
$displayEl.html('<Span style="color: green;">Subscribed</Span>');
}
else if (record.Subscribed === '0') {
$displayEl.html('<button type="button" id="btnCompanyUserSubscribed" style="width: 92px;" class="btn btn-danger">Renew</button>');
}
}
});
$('#btnCompanyUserSubscribed').on('click', function (e) {
alert('Button has been clicked')
})
I think that would be best if you use column.renderer about this. You should assign the click event right after the creation of the element.
<table id="grid"></table>
<script>
var subscribeRenderer = function (value, record, $cell, $displayEl) {
var $btn = $('<button type="button" class="btn btn-danger">Renew</button>').on('click', function () {
alert('clicky');
});
$displayEl.empty().append($btn);
};
$('#grid').grid({
dataSource: '/Players/Get',
columns: [
{ field: 'ID', width: 56 },
{ field: 'Name' },
{ field: 'subscribe', renderer: subscribeRenderer }
]
});
</script>
The code above should be also useful with cellDataBound event.
Give the event click function inside the columns and use cellDataBound.Like this
reportGrid = $('#eventReportData').grid({
primaryKey: 'UserPrivilegeRequestsID',
autoLoad: false,
responsive: true,
bodyRowHeight: 'fixed',
dataSource: '/Admin/GetDiscrepencyReport',
columns: [
{
field: 'UserName', title: 'Trainer', sortable: true,
events: {
'click': function (e) {
var userName = e.data.record.UserName;
popupGrid(userName);
}
}
},
{ field: 'Organization', title: 'Organization', sortable: true },
{ field: 'Country', title: 'Country', sortable: true },
{ field: 'Action', width: 170, renderer: editManager }
],
params: { sortBy: 'UserName', direction: 'desc' },
pager: { limit: 10, sizes: [5, 10, 15, 20] },
});
reportGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('UserName' === column.field) {
$displayEl.html("<div data-toggle='modal' data-target='#myModal2' >" + record.UserName + "</div>");
}
});
function popupGrid(userName) {
alert(userName);
}
Make it a function and do it like this:
$(document).ready(function () {
CompanyUsersGrid.on('cellDataBound', function (e, $displayEl, id, column, record) {
if ('Subscribed' === column.field) {
if (record.Subscribed === '1') {
$displayEl.html('<Span style="color: green;">Subscribed</Span>');
}
else if (record.Subscribed === '0') {
$displayEl.html('<button type="button" id="btnCompanyUserSubscribed" style="width: 92px;" class="btn btn-danger">Renew</button>');
$('#btnCompanyUserSubscribed').on('click', CompanyUserSubscribed);
}
}
});
});
function CompanyUserSubscribed() {
alert('Button has been clicked');
}
you can create your button this way:
$(document).ready(function () {
function Edit(e, type) {
alert("Button was clicked for row: " + e.data.record.recid)
}
grid = $("#myGrid").grid({
dataKey: "recid",
uiLibrary: "bootstrap",
dataSource: //SomeURL,
columns: [
{ field: 'recid', title: 'RecordID', width: 20, resizable: true, align: 'center' },
{ title: 'Edit', field: 'Edit', width: 15, type: 'icon', icon: 'glyphicon-pencil', tooltip: 'Edit', events: { 'click': Edit }, align: 'center' }
]
});
});
Most important part is calling your Edit function here:
events: { 'click': Edit }
Below is how I structured my kendo grid:
CreateListGrid: function () {
$("#PlanListGrid").kendoGrid({
dataSource: {
transport: {
read:{
url: BrowserSide.Url.getFullUrl("PlanningList/ReadPlans"),
type: "POST",
data: {
searchVal: $('#category').val(),
status: $('#ListFilterType').val(),
},
},
dataType: "json",
},
pageSize: 10,
schema: {
data: "Data",
total: "Total",
model: {
fields: {
FirstName: { editable: false, nullable: true },
LastName: { editable: false, nullable: true },
Title: { editable: false },
Id: { editable: false }
}
},
errors: "Errors"
},
},
toolbar: kendo.template($("#template").html()),
selectable: "row",
//groupable: true,
sortable: true,
//scrollable:true,
pageable: true,
columns: [{
field: "FirstName",
title: "First Name",
width: 160,
template: "#= SearchItems_Highlight(FirstName)#"
}, {
field: "LastName",
title: "Last Name",
width: 160,
template: "#= SearchItems_Highlight(LastName)#"
},
{
field: "Title",
title: "Plan Title",
width: 180,
template: "#= SearchItems_Highlight(Title)#"
},
{
field: "Id",
title: "Id",
width: 0
},
]
});
var grid = $("#PlanListGrid").data("kendoGrid");
grid.hideColumn("Id");
$("#PlanListGrid > .k-grid-header").css({ "padding-right": "0px;" });
}
I have the text fields in my kendo grid ellipsed if they are too long for the column width. Now I am having trouble adding a qtip to the ellipsed words in my kendo grid.
EDIT:
Because I'm lazy, I found a similar example online using kendo grid. I added the style for .k-grid td which is similar to what I have now that ellipses the text if it's too long. My question now is how do I add a jquery qtip to the ellipsed text? Rather where in the code should I add the qtip?
Here's the fiddle
You can apply qtip after grid creation.
function applyTooltip() {
$(".k-grid-content tbody td").each(function (index, element) {
var td = $(element);
td.qtip({
content: td.text(),
//hide: { when: 'unfocus', delay: 100 },
style: {
border: {
width: 1,
radius: 10
},
padding: 2,
textAlign: 'center',
tip: true,
name: 'cream'
},
position: {
adjust: {
screen: true
}
}
});
});
}
updated fiddle: http://jsfiddle.net/Sbb5Z/1610/
You can restrict qTip to columns who have data exceed a certain number of characters (ellipsis)
fiddle: http://jsfiddle.net/Sbb5Z/1611/
I'm trying to display 10 records per page but is hows the NAN values Below is the Code snippet
$('#JarDistHist').jtable('detach');
$('#JarDistHist').jtable({
title: 'Jar Distribution History',
paging: true,
pageSize: 10,
sorting: true,
defaultSorting: 'Date ASC',
actions: {
listAction: 'StudentActions.php?action=list&DistId='+cname+'&fitem='+fitem+'',
deleteAction: 'StudentActions.php?action=delete'
},
fields: {
id: {
key: true,
create: false,
edit: false,
list: false,
},
Date: {
title: ' Date',
type: 'date',
displayFormat: 'dd-mm-y',
width: '40%'
},
TotRecvJars: {
title: 'Rec. ',
width: '30%',
display: function (data) {
return $(''+data.record.TotRecvJars+'');
// return $('<a href="JarFillingDetail.php?id=' + data.record.id + '">'+data.record.Date.format('DD-MM-YY')+');
}
},
NoOfJarsFill: {
title: 'Filled ',
width: '30%',
type:'integer',
display: function (data) {
return $(''+data.record.NoOfJarsFill+'');
}
},
BalanceJars: {
title: 'Bal. ',
width: '30%',
type:'integer',
display: function (data) {
return $(''+data.record.BalanceJars+'');
}
}
}
});
//Load person list from server
$('#JarDistHist').jtable('load');
In your column definitions you are saying type: 'integer' (NoOfJarsFill and BalanceJars), which means you want to display a number. But then you are returning HTML content as the value, which is not a number. "Not A Number" is exactly what NAN stands for.
Change type: 'integer' to type: 'string' and your problem will be solved.
I am using Jtable (Jquery based).
I have some trouble with the child table.
In the child table I added a new button in the toolbar.
With this new button in the toolbar, che close icon disappear, how can I fix it?
(if I remove the toolbar element the X of close button is correctly displayed).
$('#ListHeader').jtable({
title: 'ExpensesAccounts' ,
actions: {
listAction: function (postData, jtParams) {
return getListDataHeader();
}
},
fields: {
ID:{
key: true,
list:false
},
Details: {
title: '',
width: '5%',
sorting: false,
edit: false,
saveUserPreferences: false,
create: false,
display: function (headerData) {
//Create an image that will be used to open child table
var $img = $('<img src="../Images/viewDetails.png" width="20p" height="20p" title="View Details" />');
//Open child table when user clicks the image
$img.click(function () {
$('#ListHeader').jtable('openChildTable',
$img.closest('tr'),
{
title: headerData.record.Title + ' - Row' ,
saveUserPreferences: false,
paging: true,
pageSize: 3,
showCloseButton:true,
toolbar: {
items: [{
icon: '../scripts/jtable/themes/metro/add.png',
text: 'Add New Row',
click: function (headerID) {
window.location = "InsertRow.aspx";
}
}]
},
actions: {
listAction: function (postData, jtParams) {
return getListDataRow(headerData.record.ID, jtParams.jtStartIndex, jtParams.jtPageSize);
//return { "Result": "OK", "Records": [] };
},
deleteAction: function (postData) {
return deleteItem(postData, 'Expense Account Rows');
}
},
fields: {
HeaderID: {
type: 'hidden',
defaultValue: headerData.record.ID
},
ID: {
key: true,
create: false,
edit: false,
list: false
},
Title: {
title: 'Title',
width: '20%'
}
}
}, function (data) { //opened handler
data.childTable.jtable('load');
});
});
//Return image to show on the person row
return $img;
}
},
Title: {
title: 'Title'
},
Status: {
title: 'Status',
width: '8%'
}
}
});
$('#ListHeader').jtable('load');
Thanks,
Nk
I want to execute an action when click event of a delete button in a grid is done. How can I know when is clicked in Javascript?
(Read IMPORTANT at the end)
Use:
$("tr .k-grid-delete", "#grid").on("click", function(e) {
alert("deleted pressed!");
})
Where #grid is the id of your grid.
If you want to know the data item you can do:
var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
Alternatively, you can define the command in the grid.columns as:
{
command: [
"edit",
{
name : "destroy",
text : "remove",
click: myFunction
}
],
title : "Commands",
width : "210px"
}
where myFunction is:
function myFunction(e) {
alert("deleted pressed!");
var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
// item contains the item corresponding to clicked row
}
IMPORTANT: You might want to define you own destroy button where only the styling is copied from the original one (no other actions / checks). If so define your grid.columns.command as:
{
command: [
"edit",
{
name : "destroy",
text : "remove",
className: "ob-delete"
}
],
title : " ",
width : "210px"
}
and then define:
$(document).on("click", "#grid tbody tr .ob-delete", function (e) {
e.preventDefault();
alert("deleted pressed!");
var item = $("#grid").data("kendoGrid").dataItem($(this).closest("tr"));
// item contains the item corresponding to clicked row
...
// If I want to remove the row...
$("#grid").data("kendoGrid").removeRow($(this).closest("tr"));
});
simple. You can make use of remove: to capture destroy event in kendo.
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px' }
],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
alert("save event captured");
//Do your logic here before save the record.
},
remove:function(e){
alert("delete event captured");
//Do your logic here before delete the record.
}
});
$(document).ready(function() {
var gridDataSource = new kendo.data.DataSource({
data: [
{ id: 1, description: 'Test 1', begin: new Date() }
],
schema: {
model: {
id: 'id',
fields: {
id: { type: 'number' },
description: { type: 'string' },
begin: { type: 'date' }
}
}
}
});
$('#grid').kendoGrid({
dataSource: gridDataSource,
scrollable: true,
sortable: true,
toolbar: ['create'],
columns: [
{ field: 'id', title: 'ID', width: 'auto' },
{ field: 'description', title: 'Description', width: 'auto' },
{ field: 'begin', title: 'Begin', width: 'auto', format: '{0:d}' },
{ command: ['edit', 'destroy'], title: ' ', width: '172px' }
],
editable: {
mode: 'inline',
confirmation: false
},
save:function(e){
alert("save event captured");
},
remove:function(e){
alert("delete event captured");
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="grid"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script src="script.js"></script>
</body>
</html>