We Keep Coding

How Link to Route in JS

I'm using Laravel 8.
I wish I could link the field "nama" to show the categories in detail (the examples in red arrows).
JS for table
#push('scripts')
<script>
$(function() {
$('#kategoris-table').DataTable({
processing: true,
serverSide: true,
ajax: 'kategori/json',
columns: [
{ data: 'id', name: 'id' },
{ data: 'nama', name: 'nama' },
{ data: 'created_at', name: 'created_at' },
{ data: 'updated_at', name: 'updated_at' }
]
});
});
</script>
#endpush
I also wish to know how to set the date format because when I looked at that field it feels so messed up. Here's my view table.

Try this
$(function() {
$('#kategoris-table').DataTable({
processing: true,
serverSide: true,
ajax: 'kategori/json',
columns: [
{ data: 'id', name: 'id' },
{ data: 'nama', name: 'nama',
fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='/category_details/"+oData.id+"'>"+oData.nama+"</a>");
}
},
{ data: 'created_at', name: 'created_at' },
{ data: 'updated_at', name: 'updated_at' }
]
});
});
You can read here more about it - https://datatables.net/reference/option/columns.createdCell

how to check status in if condition

I want to check the status which is come from a model in the form 0 and 1 but I have to show 0 as a enable and 1 as a disable but don't know how to use if below code
#push('scripts')
<script type="text/javascript">
$(document).ready(function() {
$('#role-table').DataTable({
serverSide: true,
processing: true,
responsive: true,
ajax: '{{ route("admin.role.getRoleList") }}',
columns: [
{ data: 'id', name: 'id',className:'text-center' },
{ data: 'name', name: 'name' },
{ data: 'status', name: 'status' },
{ data: 'action', name: 'action', classrole: 'text-center', orderable: false }
],
stateSave: true
});
});
</script>
#endpush

For formatting your status column, use this:
{
data: 'status',
name: 'status',
render: function ( data, type, row ) {
return data?$'<span> disable </span>':'<span> enable </span>';
}
}
Note that you have the power to use HTML tags for formatting your data columns.
For more information visit DataTable Renders

Write your yajra datatables query like this:
return datatables()->of($model)
->editColumn('status', function ($query) {
if($query->status == 0)
{
return 'enable';
}
else
{
return 'disable';
}
})
->escapeColumns([])
->make(true);

How to set cutom template for kendo grid columns

I need to set Kendo grid action button Icon based on value. My code as follows,
function InitProductServicesGrid() {
var prodServiceDataSource = new kendo.data.DataSource({
transport: {
type: "json",
read:
{
url: SERVER_PATH + "/LTSService/ProductsService.asmx/GetProductServiceDetailsList",
type: "POST",
contentType: 'application/json',
data: GetAdditonalData,
datatype: "json"
},
update:
{
url: SERVER_PATH + "/LTSService/ProductsService.asmx/SaveProductService",
type: "POST",
contentType: 'application/json',
datatype: "json"
}
},
schema: {
data: function (result) {
return JSON.parse(result.d);
},
model: {
id: "Id",
fields: {
Id: { type: "int" },
ServiceTime: { type: "string" },
IsActive: { type: "boolean"}
}
}
},
requestEnd: function (e) {
if (e.type === "destroy") {
var grid = $("#productServicesGrid").data("kendoGrid");
grid.dataSource.read();
}
},
error: function (e) {
e.preventDefault();
if (e.xhr !== undefined && e.xhr !== null) {
var messageBody = e.xhr.responseJSON.Message;
ShowGritterMessage("Errors", messageBody, false, '../App_Themes/Default/LtsImages/errorMessageIcon_large.png');
var grid = $("#productServicesGrid").data("kendoGrid");
grid.cancelChanges();
}
},
pageSize: 20,
});
$("#productServicesGrid").kendoGrid({
dataSource: prodServiceDataSource,
sortable: true,
filterable: false,
pageable: true,
dataBound: gridDataBound,
editable: {
mode: "inline",
confirmation: false
},
columns: [
{ field: "Id", title: "", hidden: true },
{
field: "ServiceTime",
title: "Time Standard",
sortable: false,
editor: function (container, options) {
var serviceTimeTxtBox = RenderServiceTime();
$(serviceTimeTxtBox).appendTo(container);
},
headerTemplate: '<a class="k-link" href="#" title="Time Standard">Time Standard</a>'
},
{
title: "Action", command: [
{
name: "hideRow",
click: hideRow,
template: comandTemplate
}
],
width: "150px"
}
]
});
}
I wrote a custom template function as follows,
function comandTemplate(model) {
if (model.IsActive == true) {
return '<a title="Hide" class="k-grid-hideRow k-button"><span class="k-icon k-i-lock"></span></a><a title="Hide"></a>';
}
else {
return '<a title="Show" class="k-grid-hideRow k-button"><span class="k-icon k-i-unlock"></span></a><a title="Show"></a>';
}
}
But when I debug the I saw the following value for model value.
I followed this sample code as well. here you can see, I also set the custom template like the sample code. Please help me to solve this. Why I can't access model IsActive value from comandTemplate function.
Updated
When clicking hideRow action, I access the dataItem as follows.
function hideRow(e) {
e.preventDefault();
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
if (dataItem.IsActive == true) {
dataItem.IsActive = false;
}
else {
dataItem.IsActive = true;
}
}
Is there any possible way to access data from template function as above or any other way?

I would suggest a different approach because you can't access grid data while rendering and populating grid.
My suggestion is to use two actions and hide it based on the flag (in your case IsActive).
Something like this: Custom command
NOTE: in visible function you can access item!
EDIT: you can access it and change it on dataBound traversing through all data.
Check this example: Data bound

I don't see the advantage of relying on the grid commands. You can render any button you want yourself and and use the dataBound event to bind a click handler:
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{
template: function(dataItem) {
const isActive = dataItem.isActive;
return `<a title=${isActive ? "Hide": "Show"} class="k-grid-hideRow k-button"><span class="k-icon k-i-${isActive ? 'lock' : 'unlock'}"></span></a>`
}
}
],
dataBound: function(e) {
e.sender.tbody.find(".k-grid-hideRow").click(evt => {
const row = evt.target.closest("tr")
const dataItem = e.sender.dataItem(row)
dataItem.set("isActive", !dataItem.isActive)
})
},
dataSource: [{ name: "Jane Doe", isActive: false }, { name: "Jane Doe", isActive: true }]
});
Runnable Dojo: https://dojo.telerik.com/#GaloisGirl/eTiyeCiJ

Data table with bootstrap using angularjs app

I am using jquery data table with bootstrap and facing one little issue which i don't understand.
Here is my code
$scope.LoadTypesView = function() {
$http({
method : 'POST',
url : "servierapi.php",
data : SessionId, // pass in data as strings
headers : { 'Content-Type': 'application/json' } // set the headers so angular passing info as form data (not request payload)
})
.success(function(data) {
if(data.aaData.status=="success") // i get two message error and success and work well
{
$scope.Type = data.aaData.response;
var oTable = $('#typess').dataTable( {
"sDom": "<'row-fluid'<'span6'T><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"oTableTools": {
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": 'Save <span class="caret" />',
"aButtons": [ "csv", "xls", "pdf" ]
}
]
},
"bProcessing": true,
"sAjaxSource": '$scope.Type'
} );
$('#types').modal('show');
}
});
};
Here is my json array which i receive from server and assign to $scope.Type variable
{"aaData":{"status":"success","response":[{"UserTypeId":"1","TypeName":"Admin","CreatedOn":"2014-02-24 00:00:00","AssignedUsers":[{"UserId":"7","UserTypeId":"1","UserRegionId":"1","UserDepartmentId":"1","UserDesignationId":"1","CNIC":"xxxxxxxx","FirstName":"Hafiz","LastName":"Haseeb","Dob":"January 1,1970","PhotoName":"","PhotoPath":"","Email":"xxxxxx","EducationLevel":"","MartialStatus":"","City":"","State":"","Country":"","MobileNumber":"","EmergencyNumber":"","AddressOne":"","AddressTwo":"","CreatedOn":"0000-00-00 00:00:00","Salary":""}]}]}}
I also check JSON array on this link http://jsonformatter.curiousconcept.com/ and json array is valid.
why i am getting this error
Data Tables warning: JSON data from server could not be parsed. This is caused by a JSON formatting error.?

You are using "sAjaxSource": '$scope.TypeId' as a string , this is variable you can use this like sample code and some data functions and its parameters
"sAjaxSource": $scope.TypeId,
"sAjaxDataProp": "aaData",
'fnServerParams' : function (aoData) {
aoData.push({"name":"SessionId", "value":Session_Id});
}
I hope this will help to solve your problem

this.Display_error = false; this.sign_report.value.status = 0;
this.signOptions = {pagingType: 'full_numbers', paging: true, ordering: false, dom: 'Bflrtip', pageLength: 10,
processing: true, serverSide: true, buttons: ['copyHtml5', {extend: 'excelHtml5', text: 'To Excel', title: this.in_header},
{extend: 'pdfHtml5', text: 'To Pdf', title: this.in_header},
{extend: 'print', text: 'Direct Print', title: this.in_header}],
ajax: (dataTablesParameters: any, callback) => {
this.http.post<DataTablesResponse>(this.db.CheckIf_url, dataTablesParameters, {}).subscribe(resp => {
console.log(resp.data); this.signinoutmodel = resp.data;
callback({
draw: resp.draw,
recordsTotal: resp.recordsTotal,
recordsFiltered: resp.recordsFiltered,
data: resp.data
});
});
},
fnServerParams: function(dt) {
dt.signedfrom = fd.signedfrom;
dt.signedtill = fd.signedtill;
dt.status = fd.status;
dt.sort_event = fd.sort_event;
dt.signed_in_at = fd.signed_in_at;
dt.signed_out_at = fd.signed_out_at;
dt.sort_category = fd.sort_category;
},
columns: [{ data: 'tblid' }, { data: 'staff_id' }, { data: 'fullname' }, { data: 'event_name' },
{ data: 'sign_in' }, { data: 'sing_out'}, { data: 'date_signed' } ]
};

jTable Master record Id not being sent on Child record's update request

$('#PermissionGroupGrid').jtable({
ajaxSettings: {
type: 'GET',
dataType: 'json'
},
sorting: true,
paging: true,
useBootstrap: true,
pageSize: 5,
title: 'List of Permission Group',
actions: {
listAction: '/PermissionGroup/List',
deleteAction: '/PermissionGroup/Delete',
updateAction: '/PermissionGroup/Update',
createAction: '/PermissionGroup/Create'
},
defaultSorting: 'PermissionGroupName ASC',
fields: {
Id: {
key: true,
create: false,
edit: false,
list: false
},
Permissions: {
title: 'Permissions',
width: '5%',
sorting: false,
edit: false,
create: false,
display: function (permissionData) {
var $img = $('<img src="../../Images/list_metro.png" title="Assign Permissions" />');
$img.click(function () {
console.log(permissionData);
console.table(permissionData);
$('#PermissionGroupGrid').jtable('openChildTable',
$img.closest('tr'),
{
ajaxSettings: {
type: 'GET',
dataType: 'json'
},
title: permissionData.record.PermissionGroupName + ' - Permissions',
actions: {
listAction: '/Permission/ListPermission?PermissionGroupId=1',
deleteAction: '/Demo/DeleteExam',
updateAction: '/Demo/UpdateExam',
createAction: '/Demo/CreateExam'
},
fields: {
PermissionGroupId: {
type: 'hidden',
defaultValue: permissionData.record.Id
},
Id: {
key: true,
create: false,
edit: false,
list: false
},
PermissionName: {
title: 'Permission Name'
}
}
}, function (data) {
data.childTable.jtable('load');
});
});
return $img;
}
},
PermissionGroupName: {
title: 'PermissionGroupTitle'
}
}
});
$('#PermissionGroupGrid').jtable('load');
When any of the child record is requesting for Update, child record's Id is being sent in the GET request but not the Id of the Master record. I followed the demo on jtable.org exactly. When console.log 'permissionData.record.Id' I can see the master record's Id. FTR, both Master and Child table's key column has name 'Id'.
Can some one please suggest a solution?

Based on jTable 2.4.0 debugging, defaultValue is used only on create form. If you are editting existing item record[fieldName] is used instead. In your case record["PermissionGroupId"]. That means you need to include PermissionGroupId field on your child record object to make it work.