Edit cell in slickgrid - slickgrid

I'm with problems trying to edit a cell in slickgrid. I'm still not familiar with slickgrid... I can normally put the data in the grid but I can't edit the cells value. I already set in my options the editable camp as true (editable:true), but still nothing happens when I try to edit. I guess I have to call something else to make the cell editable? Sorry if this question looks stupid, but indeed I'm still a "noob" with slickgrid. Below is my script where I initiate the grid
var grid;
var columns = [
{ id: "Id", name: "Id", field: "Id" },
{ id: "Name", name: "Name", field: "Name", minWidth: 70 },
{ id: "Salary", name: "Salary", field: "Salary" },
{ id: "Address", name: "Address", field: "Address" }
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false,
multiColumnSort: true,
asyncEditorLoading: true,
forceFitColumns: true,
editable: true
};
$(function () {
var myData = [];
$.getJSON('/Home/getEmployeeList', function (data) {
myData = data;
console.log(myData);
grid = new Slick.Grid("#myGrid", myData, columns, options);
});
});

You have to add this
editor: Slick.Editors.Text,
editor: Slick.Editors.LongText
editor: Slick.Editors.Date
editor: Slick.Editors.Checkbox
based on your requirement to a particular cell which needs to be edited
{ id: "Name", name: "Name", field: "Name", minWidth: 70, editor: Slick.Editors.Text},

The best place to start is the examples.
You probably want this one: http://6pac.github.io/SlickGrid/examples/example3-editing.html
I'd advise you to use the 6pac repo, it's up to date. The original mleibman one has not been updated for about four years.

I got similar issue and resolved it by including slick.editors.js.
<script src="slickgrid/slick.editors.js"></script>

Related

shieldUI grid filter / sort persistence on grid refresh

Is it possible to persist grid sort/filter/selection on grid.refresh() in some smart optimized way? I need to refresh grid on window resize event to adjust to a new window size. I guess refresh internally destroys and recreates grid, not accounting for possible active sort/filter/selection. Because grid can contain a lot of data (virtual scrolling), I would like to a avoid unnecessary db querying, rendering and sorting. I guess I am looking for a refresh which will refresh on existing data.
Seams like they just implemented it - here is the example.
Maybe to be included in the next release.
Here is the code in the example that does this:
jQuery(function ($) {
$("#grid").shieldGrid({
dataSource: {
data: gridData,
schema: {
fields: {
id: { type: Number },
name: { type: String },
company: { type: String },
phone: { type: String },
age: { type: Number },
gender: { type: String }
}
},
filter: {
// create the initial filter in that form
and: [
{ path: "name", filter: "con", value: "John" }
]
}
},
filtering: {
enabled: true
},
paging: true,
columns: [
{ field: "id", width: "250px", title: "ID" },
{ field: "name", title: "Person Name", width: "250px" },
{ field: "company", title: "Company" },
{ field: "phone", title: "Phone", width: "250px" },
{ field: "age", title: "Age" }
]
});
});
I found the solution in refresh method it self. It accepts options objects where one can provide current data source options to persist. Example to persist sort and/or filter:
var options = {
dataSource: $("#grid").swidget().dataSource
}
$("#grid").swidget().refresh(options);
Please stand me correct if I am wrong here. For selections I guess one can retrieve selected indices and reselect after calling refresh.
EDIT: filter and sort are preserved, but filter row resets (loses all active input values). Could this be a bug? How to keep values in filter row?

Autoupdate kendo grid cell after enter another cell

I'm quite new using kendo grids.
So far I've managed to do a few stuff and got a workaround for all my problems.
I have a grid with 2 columns.
One column is a product code that the user should enter, and the other is product quantity that should be filled automatically after the user enter the product code. This should be done on change event.
The product quantity is obtained by a service.
So far I have the following code:
var dataSource = new kendo.data.DataSource({
batch: false,
autoSync: false,
data: [],
pageSize: 20,
schema: {
model: {
id: "ProductID",
fields: {
ProductCode: { type: "string", validation: { required: true } },
ProductQuantity: { type: "number", validation: { required: false, editable: false } }
}
}
},
edit: function (e) {
if (e.model.isNew() == false) {
$('[name="ProductQuantity"]').attr("readonly", true);
}
},
change: function (e) {
if (e.action == "itemchange") {
debugger;
apModel.getProductQuantities(e.items[0].ProductCode).ifFetched().then(function (data) {
var data = JSON.parse(data.Response);
})
//how to access next cell???
$("#ap-grid").data("kendoGrid").saveRow();
}
}
});
$("#ap-grid").kendoGrid({
dataSource: dataSource,
pageable: false,
height: 550,
toolbar: ["create"],
columns: [
{ field: "ProductCode", title: "Product Code" },
{ field: "ProductQuantity", title: "Quantity" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }],
editable: "inline",
});
I can't find a way how to access the next cell to add the data to it.
Can you give me a hint?
thanks in advance,
André
When you set e.items[0].ProductQuantity in OnChange event handler grid cell should automatically update value if datasource bind correctly.
According to kendo docs:
e.items - The array of data items that were affected (or read).
That means it reference at original row of datasource.

Kendo UI, Grid "Toolbar" with Typescript

I am using Kendo UI's Grid system for a data grid, and am migrating my code to Typescript. I am loving it so far, but have hit a few snags; One of which is that the declaration for the grid seems to be a bit incomplete, even with Telerik's official Typescript definitions.
For example, this code works in javascript. However if I run this exact same code in Typescript, I am told that the toolbar property is invalid, because it is expecting a type of GridToolbarItem. I have traced GridToolbarItem down and, while I do find the interface for it, I cannot seem to actually declare or create it, thus I am not being allowed to create a toolbar for my grid!
elements.grid = $('#grid').kendoGrid({
dataSource: {
transport: {
read: {
url: "/administrator/data/items",
dataType: "json",
type: 'GET',
cache: false
}
},
schema: {
total: "total",
data: "data"
},
page: 0,
pageSize: 15,
take: 15,
serverPaging: true,
serverFiltering: true,
type: "aspnetmvc-ajax"
},
toolbar: kendo.template($("#search-byName").html()),
pageable: {
refresh: true,
pageSizes: true
},
selectable: "row",
columns: [
{
field: "Id",
width: 25,
title: "Identity"
},
{
field: "Name",
width: 40,
title: "Name",
template: "<div class='#: Quality.CSS #'>#: Name #</div><div>#: (Origin.Label != null) ? Origin.Label : '' #</div>"
}
],
change: function (e) {
// do some stuff when an item is selected
},
}).data("kendoGrid");
TypeScript's type system is different from that of Java or C# in that it's the shape of the type that matters, not the names in the class hierarchy. I like to think of it as a contract. The contract says you have to have certain things and it doesn't matter why you have them or if you have more.
Here's a lame example I cooked up:
interface BagOfStuff {
anum: number;
astring: string;
anany: any;
}
function processBag(bag: BagOfStuff): void { }
var aBag = {
anum: 5,
astring: "foo",
anany: {},
bonusThing: "bar"
};
processBag(aBag); // works
aBag never said it was of type BagOfStuff, but it satisfies all the requirements of one so I can pass it into processBag and that will work.

Kendo Grid - In Firefox triggering an alert in the save event causes a page reload

I want to know if anyone has seen this. I have a kendo grid and in the save event, I want to do some validation. Basically to make sure that the new values difference between the old is less than or equal to the balance.
So if it is greater than the balance, I trigger an alert and preventDefault. However displaying an alert causes the page to reload in FireFox.
Here is my grid:
$("#gridOpenInvoices").kendoGrid({
autoBind: false,
dataSource: openInvoicesData,
scrollable: true,
sortable: false,
navigatable: true,
toolbar: [{name:"save",
text:strings.ApplyUpdates},
{name: "SplitPayment",
text: strings.SplitPayment},
{name: "PaidOut",
text: strings.PaidOut},
{name: "CreateCredit",
text: strings.CreditBalance},
{name: "UndoAllocation",
text: strings.UndoAllocation}],
columns: [
{
field: "CustomerName",
title: strings.AccountName,
hidden: true
},
{
field: "OpenTransactionId",
title: strings.OpenTransaction,
width:90
},
{
field: "InvoiceNumber" ,
title: strings.InvoiceNumber,
width:65
},
{
field: "GrossSales",
title: strings.OriginalAmount,
width: 75,
format: "{0:c}",
decimals: 2,
min: 1,
value: 0
},
{
field: "Balance",
title: strings.TransBalance,
width: 75,
format: "{0:c}",
decimals: 2,
min: 1,
value: 0
},
{
field: "Date",
title: strings.Date,
width:75,
format: "{0:MM/dd/yy}"
},
{
field: "Age",
title: strings.Age,
width:55
},
{
field: "CheckNumber",
title: strings.CheckNumber,
width:85
},
{
title: strings.ApplyPayment,
width:75,
template: "<input class='k-chk-applied chkbox' type='checkbox' data-bind='source: IsApplied' name='IsApplied' #= IsApplied ? 'checked' : ''#/>",
attributes:{"class":"tdIsApplied"}
},
{
field:"AppliedAmount",
title: strings.AppliedAmount,
format: "{0:c}",
width: 95,
attributes: {"class" : "tdAppliedAmount"}
}],
save: function(e) {
var model = e.model;
if (e.values.AppliedAmount != null) {
var remainingBalance = context.getRemainingBalance();
var difference = e.values.AppliedAmount - model.AppliedAmount;
if (remainingBalance >= difference) {
var balanceCopy = model.BalanceCopy;
model.Balance = model.GrossSales - e.values.AppliedAmount;
model.BalanceCopy = model.GrossSales - e.values.AppliedAmount;
if (model.Balance == 0 && model.IsUncollected) {
model.IsUncollected = false;
context.UpdateBalance(balanceCopy, 0, true);
}
context.UpdateBalance(model.AppliedAmount, e.values.AppliedAmount, true);
this.refresh();
context.showButtons();
}
else {
alert("The applied amount exceeds the remaining balance");
e.preventDefault();
}
}
}, editable:"incell"});
This seems to be only happening when you edit the applied amount and hit enter to commit. Any idea of why this is happening?
The solution is fairly simple: Do not use an alert.
I do have the same problem in some events in kendoUI Widgets.
If you need to display something to the user, use kendoWindow with it's modal property set to true.
Alerts should only be used for debugging purposes, like console.log.

How to get selected row data of kendo detail grid

I am able to get the selected row in kendo grid ( master grid), But I am unable to get the selected row data in detail grid. Please provide me a code sample.
Thanks,
abhi
It is like for the main grid. Being childgrid the grid corresponding to details, do:
var row = childgrid.select();
var data = childgrid.dataItem(row);
console.log("row", row);
console.log("data", data);
Where I defined master grid as:
$("#grid").kendoGrid({
...
detailInit: detailInit,
...
});
And details grid is created using the following function when a row in master grid is expanded:
function detailInit(e) {
childgrid = $("<div/>").appendTo(e.detailCell).kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
},
serverPaging: true,
serverSorting: true,
serverFiltering: true,
pageSize: 5,
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
},
scrollable: false,
sortable: false,
selectable: true,
pageable: true,
columns:
[
{ field: "OrderID", width: "70px" },
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
{ field: "ShipAddress", title: "Ship Address" },
{ field: "ShipName", title: "Ship Name", width: "200px" }
]
}).data("kendoGrid");
}
Running example here : http://jsfiddle.net/OnaBai/2M86L/ (When you click on Show button, its displays in the console of your browser the selected row and its data).
Here a somewhat simpler example on how to get to the data of the clicked row: http://jsfiddle.net/Corne/AQqMH/5/
This is the code where the magic happens:
change: function (arg) {
var selectedData = this.dataItem(this.select());
// selectedData now points to the selected dataSource item!
alert("Clicked id: " + selectedData.id);
}

Resources