We Keep Coding

Datatables problem's on render data into input

I am currently maintenance on some project using Datatables:
I found a problem when export the column that is successfully displayed on page failed to display after use render as below :
this._dataTable = this.$mainTable.DataTable({
ajax: {
url: this.url,
dataSrc: ''
},
dom: 'Bfrtip',
fixedColumns: {
leftColumns: 3,
rightColumns: 1
},
orderable: false,
rowId: 'fsId',
scrollX: true,
scrollCollapse: true,
columns: [{
className: 'input-cell',
data: 'stadate',
render(data) {
const time = data ? moment(data).format('HH:mm DD-MM-YYYY') : '';
return time;
},
width: '100px'
},
{
className: 'input-cell',
data: 'slotTime',
render(data) {
const time = data ? moment(data).format('HH:mm') : '';
return `<input name="slotTime" class="form-control" data-time value="${time}" size="5" readonly>`;
},
width: '72px'
},
],
buttons: [{
extend: 'print',
customize: function(win) {
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}]
});
Data in column stadate can be displayed successfully, both on webpage and export page, but data slotTime successfully displays on webpage only.
Appreciate for any solution to fix it.. regards

finally, I can found sollution from here Datatables - Export values inside and outside the field input and value of the select field and here my final code :
this._dataTable = this.$mainTable.DataTable({
ajax: {
url: this.url,
dataSrc: ''
},
dom: 'Bfrtip',
fixedColumns: {
leftColumns: 3,
rightColumns: 1
},
orderable: false,
rowId: 'fsId',
scrollX: true,
scrollCollapse: true,
columns: [{
className: 'input-cell',
data: 'stadate',
render(data) {
const time = data ? moment(data).format('HH:mm DD-MM-YYYY') : '';
return time;
},
width: '100px'
},
{
className: 'input-cell',
data: 'slotTime',
render: function (data, type, row) {
const time = data ? moment(data).format('HH:mm') : '';
return type === 'export' ? time : `<input name="slotTime" class="form-control" data-time value="${time}" size="5" readonly>`;
},
width: '72px'
},
],
buttons: [{
extend: 'print',
exportOptions : {
orthogonal: 'export',
},
}]
});
thx all

Kendo Grid - pass over edited values in button click

Im relatively new to javascript/jquery so forgive me if this sounds like a silly question.
I have a Kendo UI grid which is bound to a url from a controller method. This all works fine, but I want the user to be able to change the value on some of the fields. I have enabled the 'editable' flag on the table itself to allow these values to be changed, but when the button is clicked, it passes over the original value instead of the updated ones. Am i missing something simple?
<div id="productlist-grid"></div>
<script>
$(function() {
$("#productlist-grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: { url: "#Html.Raw(dataUrl)", type: "POST", dataType: "json", data: additionalData }
},
schema: { data: "Data", total: "Total", errors: "Errors" },
error: function(e) {
display_kendoui_grid_error(e);
// Cancel the changes
this.cancelChanges();
},
pageSize: #(defaultGridPageSize),
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
pageable: {
refresh: true,
pageSizes: [#(gridPageSizes)]
},
editable: true,
scrollable: false,
columns:
[
{ field: "ProductPictureUrl", title: "Picture", template: '<img src="#=ProductPictureUrl#" />', width: 100, editable: false },
{ field: "ProductName", title: "Product Name", editable: false },
{ field: "ProductSku", title: "Sku", editable: false},
{ field: "Quantity", title: "Quantity", type: "number"},
{ field: 'SplitPack', title: 'Split Pack', template: kendo.template($("#template").html())},
{ field: "AddToCart", title: "", template: 'Add To Cart', editable: false}
]
});
});
</script>
Many Thanks in advance!!

kendo ui Grid virtual scrolling - where is the scroll?

When using virtual scrolling kendo-ui grid there is no visible scroll.
I'm using virtual scrolling in manner to show some records from DataBase but I don't see any scroll in my grid and it displays just six first rows.
I can't understand where is my problem.
This is my code:
$("#cargoGrid").kendoGrid({
dataSource: {
serverPaging: true,
serverSorting: true,
pageSize: 20,
transport: {
read: {
url: "/frmPermission/api/readAllCargo",
type: "POST",
contentType: "application/json",
dataType: "json",
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
schema: {
data: "data",
total: "total",
model: {
fields: {
cargoId: {
type: "number"
},
title: {
type: "string"
},
}
}
},
},
scrollable: {
virtual: true
},
pageable: {
numeric: false,
previousNext: false,
messages: {
display: "تعداد {2} رکورد نمایش داده شده است",
empty: "اطلاعاتی برای نمایش وجود ندارد"
}
},
columns: [
{field: "cargoId", title: "Id", hidden: true},
{field: "title", title: "نوع بار"},
{
filed: "",
title: "انتخاب",
template: "<button class='select k-button' onclick=\"clickSelectCargo( #=cargoId# , '#=title#' )\">انتخاب</button>",
width: "200px"
}
],
selectable: "single",
// sortable: true
});
I found when I use "sortable: true," and I clicked on header column it worked but before click dosen't display Virtual scrolling

scrollable: {
endless: true
},

Error while inserting an item into the dataSource using kendo ui library

I am trying to insert a new item into an existing kendo ui table but I get nothing displayed. DataSource is charged from an ajax request. Here in the definition of my kendo ui table
var baseUrl = '/SMART/api/Build/GetAll';
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: baseUrl,
dataType: "json",
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return {
models: kendo.stringify(options.models)
};
}
}
},
batch: true,
pageSize: 15
});
$("#listGrid").kendoGrid({
dataSource: dataSource,
pageable: true,
reorderable: true,
resizable: true,
sortable: true,
filterable: {
mode: "row"
},
columns: [
{
filterable: {
cell: {
enabled: true,
showOperators: false,
operator: "contains"
}
},
field: "Name",
title: "Name"
},
{
filterable: {
cell: {
enabled: true,
showOperators: false,
operator: "contains"
}
},
field: "Type",
title: "Type"
},{
filterable: {
cell: {
enabled: true,
showOperators: false,
operator: "contains"
}
},
field: "ToBeDisplayed",
title: "To be displayed",
template: "<input name='ToBeDisplayed' type='checkbox' data-bind='checked: ToBeDisplayed' #= ToBeDisplayed ? checked='checked' : '' # class='build-tobedisplayed-checkbox'/>"
},
]
})
Here is the code of the insertion
var grid = $("#listGrid").data("kendoGrid");
grid.dataSource.insert({ Name: "6.03", Type: "WIP", ToBeDisplayed: true });

The issue is a simple one.
The insert command also requires an index position as part of the insert ie:
this
grid.dataSource.insert({ Name: "6.03", Type: "WIP", ToBeDisplayed: true });
would be
grid.dataSource.insert(1,{ Name: "6.03", Type: "WIP", ToBeDisplayed: true });
as per the documentation link. datasource insert
if you want to add a new item to the datasource collection then use the add method instead.
datasource add

How to rearrange KendoGrid Tab Order?

I'm using a KendoGrid and doing a inline batch edit. Only a select few columns are editable. When hit tab the next column selected but it is not the next editable column. Is there a way to control the tab order in a KendoGrid? How would I make the tabs skip columns that are not editable?
My Mark-UP:
<div id="employeeGoalsGrid"></div>
My Javascript:
var goalsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/MVC/ResearcherPoints/GetEmployeeResearchers',
type: 'POST',
contentType: 'application/json'
},
update: {
url: '/MVC/ResearcherPoints/UpdateEmployeeGoal',
type: 'POST',
contentType: 'application/json'
//dataType: "jsonp"
},
parameterMap: function (options, type) {
debugger;
$.extend(options, { ID: options.id });
return JSON.stringify(options);
}
},
batch: false,
schema: {
model: {
id: 'ID',
fields: {
id: { editable: false, nullable: false },
FirstName: { editable: false, nullable: true },
LastName: { editable: false, nullable: true },
Title: { editable: false, nullable: true },
TeamName: { editable: false, nullable: true },
PointsGoal: { type: "number", nullable: true, validation: { required: false, min: 1 } }
}
}
},
sortable: true,
filterable: true,
columnMenu: true
});
$('#employeeGoalsGrid').kendoGrid({
dataSource: goalsDataSource,
navigatable: true,
sortable: true,
resizable: true,
toolbar: ["save", "cancel"],
columns: [
{ field: "FirstName", title: "First Name", width: 200},
{ field: "LastName", title: "Last Name", width: 200 },
{ field: "Title", title: "Title", width: 200 },
{ field: "TeamName", title: "Team", width: 200 },
{ field: "PointsGoal", title: "Goal", width: 200 }],
editable: true,
filterable: true,
});
Any suggestions would be greatly appreciated.

To skip cell you need to use tabindex="99999"
I created a jsfiddle for testing purposes: http://jsfiddle.net/danieltulp/kfG7y/
I think you need to look at using attributes: { tabindex: "999999" } in
{ field: "UnitsInStock", title: "Units In Stock", width: 110, attributes: { tabindex: "999999" } }
but this doesn't seem to work. Anyone a better idea?
Perhaps this just isn't possible?

Can you try changing the editable property on the grid options from true to "inline" and let me know if that fixes the issue? I've created a similar scenario in this JSBin and the tab order works fine (Chrome on OSX) when I edit a row.