We Keep Coding

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
},

Why does BootstrapTable work just once?

I'm making a webApp and in one screen there are two tables, the first one for the categories I store on a DB and the second for the elements that belong to those categories. Both are BootstrapTable. What I'm trying to do is that when the user clicks on a row of the first table, the items of that category will load in the second table, and I managed to do so but it just works once. If I click on the first table then the second fills up, but if i click again over any other element of the first table nothing happens. I even used console.log to see if the event works and it does, before and after the table "reload".
function getProductos(Categoria) {
var id_cat=Categoria||iSeldCat;
$('div#tableProds').bootstrapTable({
url: '../../../controllers/classproductos?getProductos=-&categoria='+id_cat,
cache: false,
condensed: true,
striped: true,
search: true,
language: 'spanish',
showColumns: false,
showRefresh: false,
columns: [
{
field: 'codigo',
title: 'Código',
width: '15%'
},{
field: 'rutaImg',
title: 'Imagen',
formatter: utils().imagenProductoCRUD,
width: '130px'
}, {
field: 'descripcion',
title: 'Nombre',
width: '35%'
}, {
field: 'precioventa',
title: 'Precio Venta',
formatter: utils().formatPriceTable,
width: '10%'
}, {
field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: '10%'
}
]
});
console.log(id_cat + " Print");
}
When running that code, I get in my console 1 Print, 3 Print and son on, but the table just doesn't do anything.
This is the first table, including the event which as I said before, works everytime:
function getCategorias(){
$('div#categoriastab').bootstrapTable({
method: 'post',
url: '../../../controllers/classcategorias?getCategorias=-',
dataType: 'json',
cache: false,
condensed: true,
striped: true,
search: true,
showColumns: false,
showRefresh: false,
idField: 'id_categoria',
columns: [{
field:'id_categoria',
title: 'ID'
},{
field: 'imagencat',
title: 'Imagen',
formatter: utils().imagenCRUD,
align: "left",
width: "15%"
},{
field: 'nombre',
title: 'Categoría',
align: "left",
width: "65%"
}, {field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: "20%;"
}
]
}).on('click-row.bs.table', function (e, row, $element) {
iSeldCat=row.id_categoria;
getProductos(iSeldCat);
});
}
Any idea what it could be?

This approach of bootstrapping the table again should be avoided. Handle this in the following way.
On document ready
$(document.ready(function() {
$('div#categoriastab').bootstrapTable({
method: 'post',
url: '../../../controllers/classcategorias?getCategorias=-',
dataType: 'json',
cache: false,
condensed: true,
striped: true,
search: true,
showColumns: false,
showRefresh: false,
idField: 'id_categoria',
columns: [{
field:'id_categoria',
title: 'ID'
},{
field: 'imagencat',
title: 'Imagen',
formatter: utils().imagenCRUD,
align: "left",
width: "15%"
},{
field: 'nombre',
title: 'Categoría',
align: "left",
width: "65%"
}, {field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: "20%;"
}
]
}).on('click-row.bs.table', function (e, row, $element) {
iSeldCat=row.id_categoria;
getProductos(iSeldCat);
});
$('div#tableProds').bootstrapTable({
data: [],
cache: false,
condensed: true,
striped: true,
search: true,
language: 'spanish',
showColumns: false,
showRefresh: false,
columns: [
{
field: 'codigo',
title: 'Código',
width: '15%'
},{
field: 'rutaImg',
title: 'Imagen',
formatter: utils().imagenProductoCRUD,
width: '130px'
}, {
field: 'descripcion',
title: 'Nombre',
width: '35%'
}, {
field: 'precioventa',
title: 'Precio Venta',
formatter: utils().formatPriceTable,
width: '10%'
}, {
field: '',
title: 'Acciones',
formatter: utils().buttonCRUD,
align: 'center',
width: '10%'
}
]
});
}
On selection of item
function getProductos(iSeldCat) {
$('div#tableProds').bootstrapTable('refresh', {url: "../../../controllers/classproductos?getProductos=-&categoria=" + iSeldCat});
}
I have not tested this code functionality. But this should be the approach. You may refer Bootstrap Table documentation for property and method call details.

Dropdown field select/returns null kendo ui grid - mvc

I am working on kendo ui grid, the dropdown fills with the data from api call.....
The problem is,
selected item value is not passing to viewModel or passing null value
I am doing something terrible, please help...thanks for your time:)
Script
...
schema: {
model: {
id: "ProjectId",
fields: {
ProjectId: { editable: true, nullable: false, type: "number" },
ClientId: { editable: true, nullable: false, type: "number" },
Name: { editable: true, nullable: true, type: "string" },
// Status: { editable: true, nullable: true, type: "string" },
Status: { editable: true, nullable: true, type: "string", defaultValue: { StatusId: "NotCompleted"}},
IsActive: { editable: true, nullable: false, type: "boolean" },
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
toolbar: ["create"],
scrollable: false,
sortable: true,
groupable: true,
filterable: true,
columns: [
{ field: "Name", title: "Project Name", width: "170px" },
//{ field: "Status", title: "Status", width: "110px" },
{ field: "Status", title: "Status", width: "150px", editor: statusDropDownEditor },
{ field: "IsActive", title: "Active", width: "50px" },
{ command: "", template: "<a href='Project/Task'>Manage Task</a>", width: "30px", filterable: false },
{ command: "", template: "<a href='Project/Setting'>Setting</a>", width: "30px", filterable: false },
{ command: ["edit", "delete"], title: " ", width: "80px" }
],
editable: "popup"
});
function statusDropDownEditor(container, options) {
$('<input required data-value-field="StatusID" data-bind="value:' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataSource: {
type: "odata",
transport: {
read: "/api/dropdown/GetProjectStatus"
}
}
});
}

have you add the
dataTextField: "name",
dataValueField: "id"
?

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.