Trying to mimic http://mleibman.github.io/SlickGrid/examples/example1-simple.html on http://jsfiddle.net/mejo/u5S8T/1/ but it is not working. What is wrong?
HTML:
<table width="100%">
<tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:600px;height:500px;"></div>
</td>
<td valign="top">
<h2>Demonstrates:</h2>
<ul>
<li>basic grid with minimal configuration</li>
</ul>
</td>
</tr>
</table>
JavaScript:
var grid;
var columns = [
{id: "title", name: "Title", field: "title"},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})
Because you are missing references to required js files,
jquery-1.7.min.js
jquery.event.drag-2.2.js
slick.core.js
slick.grid.js
Related
List item
I have a page which loads a kendo TreeList by pressing a button. The data is for the moment statically defined in a variable where it stays as a basis for the Kendo TreeList datasource.
I have a datasource definition which I mostly copied from Telerik Website.
I have a treelist with a couple of requirements in terms of CRUD.
level1 - nothing
level2 - add new childnodes only
level3 - edit and delete
Edit should be doubleclick on a level3 item
CRUD command buttons need to be icon-only (no text in the buttons)
I could not achieve this with the buildin CRUD controls unfortunately so I used a Template column where the buttons are placed based on their "Type" field.
Now this has worked but after some changes which I can't undo somehow the add function does not work anymore. It works but new childnode is only visible after a edit ordelete of another node. (as if the change event is not triggered during add). The Add button in the treeList calls a function addProduct where at the end I try to pushCreate directly to the datasource. However the Transport.create is never invoked. It only gets invoked after another Crud action triggers it
Can anybody see what's wrong and couldn't this all be achieve with much easier approach?
Here's the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Grid - CRUD operations with local data</title>
<style>
html {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="Scripts/jquery-2.1.3.min.js"></script>
<!--<script src="Scripts/kendo.all.min.js"></script>-->
<script src="Scripts/kendo.all.js"></script>
</head>
<body>
<style>
.hidden {
display: none;
}
.k-grid tbody .k-button, .k-ie8 .k-grid tbody button.k-button {
min-width: 0px;
padding-left: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
margin: 0px;
}
</style>
<div id="buttons">
<br />
<p>
<button name="clear" id="clear" onclick="myclear()">Clear grid</button>
<button name="load" id="load" onclick="loadLocal()">Load from local DB</button>
</p>
<br />
version 1.01<br />
<br />
</div>
<div id="treelist"></div>
<script id="btn-template" type="text/x-kendo-template">
# if (Code == "Product") { #
<a id="btnupdate" class="k-button k-button-icontext k-grid-update column hidden" title="Update product" onclick="update(this)" href="\#"><span class="k-icon k-update"></span></a>
<a id="btndelete" class="k-button k-button-icontext k-grid-delete column" title="Delete product" data-command="destroy" href="\#"><span class="k-icon k-delete"></span></a>
# } else if (Code == "Requirement") { #
<a class="k-button k-button-icontext k-grid-add column" title="Add a product to this requirement" onclick="addProduct(this)" href="\#"><span class="k-icon k-add"></span></a>
# } #
</script>
<script>
var EPDdata // For holding the data of the TreeList
function loadLocal() {
EPDdata = [
{ Id: 1, Description: "Item1", Code: "Category", parentId: null },
{ Id: 2, Description: "Item2", Code: "Requirement", parentId: 1 },
{ Id: 3, Description: "Item3", Code: "Product", parentId: 2 },
{ Id: 4, Description: "Item4", Code: "Requirement", parentId: 1 },
{ Id: 5, Description: "Item5", Code: "Product", parentId: 4 },
{ Id: 6, Description: "Item6", Code: "Product", parentId: 4 },
{ Id: 7, Description: "Item7", Code: "Requirement", parentId: 1 },
{ Id: 8, Description: "Item8", Code: "Requirement", parentId: 1 },
{ Id: 9, Description: "Item9", Code: "Product", parentId: 8 },
{ Id: 10, Description: "Item10", Code: "Product", parentId: 8 }
]
LoadTree();
};
function LoadTree() {
var EPDdataNextID = EPDdata.length + 1;
var LocaldataSource = new kendo.data.TreeListDataSource({
transport: {
read: function (e) {
// on success
e.success(EPDdata);
},
create: function (e) {
// assign an ID to the new item
e.data.Id = EPDdataNextID++;
// save data item to the original datasource
EPDdata.push(e.data);
// on success
e.success(e.data);
},
update: function (e) {
// locate item in original datasource and update it
EPDdata[getIndexById(e.data.Id)] = e.data;
// on success
e.success();
},
destroy: function (e) {
// locate item in original datasource and remove it
EPDdata.splice(getIndexById(e.data.Id), 1);
// on success
e.success();
}
},
error: function (e) {
// handle data operation error
alert("Status: " + e.status + "; Error message: " + e.errorThrown);
},
pageSize: 10,
expanded: true,
batch: false,
schema: {
model: {
id: "Id",
expanded: true,
fields: {
Id: { type: "number", editable: false, nullable: true },
Description: { type: "string", validation: { required: true } },
Code: { type: "string" },
parentId: { type: "number", editable: true, nullable: true }
}
}
}
});
$("#treelist").empty(); // only 1 treelist on the page please
$("#treelist").kendoTreeList({
dataSource: LocaldataSource,
pageable: false,
edit: onEdit,
columns: [
{ field: "Description", title: "Description", width: "400px" },
{ field: "Code", width: "120px" },
{ field: "Id", title: "ID", width: "30px" },
{ field: "parentId", title: "PID", width: "30px" },
{ width: "35px", template: $("#btn-template").html() },
{ command: ["create", "edit", "destroy"] }
],
editable: "inline"
});
var treeList = $("#treelist").on("dblclick", function (e) {
var treeList = $("#treelist").data("kendoTreeList");
var rowindex = e.target.parentNode.rowIndex; // get rowindex
var tr = $(e.target).closest("tr"); // get the current table row (tr)
var dataItem = $("#treelist").data("kendoTreeList").dataItem(tr);
if (dataItem.Code == "Product") {
$("#treelist").find(".edit").addClass("hidden");
$("#treelist").find(".edit").removeClass("edit");
$("#treelist").find(".delete").removeClass("hidden");
$("#treelist").find(".delete").removeClass("delete");
treeList.saveRow(); // first save all other rows
treeList.editRow(tr[0]);
};
}); // double click function
}; // Function CreatetreeList
function onEdit(arg) {
var tr = $(arg.container);//.closest("tr"); // get the current table row (tr)
tr.find("#btndelete").addClass("hidden"); //remove btndelete from commandcolumn
tr.find("#btndelete").addClass("delete"); //put class to select the btn later on
tr.find("#btnupdate").removeClass("hidden"); //make btnupdate visible in commandcolumn
tr.find("#btnupdate").addClass("edit"); //put class to select the btn later on
};
function update(e) { // update the edited row
var tr = $(e).closest("tr"); // get the current table row (tr)
var treeList = $("#treelist").data("kendoTreeList");
treeList.saveRow();
tr.find("#btndelete").removeClass("hidden");
tr.find("#btndelete").removeClass("delete");
tr.find("#btnupdate").addClass("hidden");
tr.find("#btnupdate").removeClass("edit");
};
function addProduct(e) {
var treeList = $("#treelist").data("kendoTreeList");
var dataSource = treeList.dataSource;
var data = dataSource.data;
var tr = $(e).closest("tr"); // get the current table row (tr)
var dataItem = treeList.dataItem(tr);
dataSource.pushCreate({ Id: 15, Description: "New", Code: "Product", parentId: dataItem.Id });
alert("Done");
};
function getIndexById(id) {
var idx,
l = EPDdata.length;
for (var j; j < l; j++) {
if (EPDdata[j].Id == id) {
return j;
}
}
return null;
}
</script>
</body>
</html>
I found the answer !!!
The datasource pagesize is set to 10 and the TreeList was set to paging: false. In all my tests I started with sample data of 10 nodes. All the time I was adding an 11th and 12th record which wasn't showing up until I deleted another node...
Do these things only happen to me?
Please have a look at http://jsfiddle.net/43Nh9/2/
row template is working when using declarative approach but when i initialize a div to kendo Grid it doesn't work for text box. Help me getting this work.
here is my code
<div id="grid" data-role="grid" data-editable="inline" data-bind="source: data" data-row-template="row-template"></div>
<script id="row-template" type="text/x-kendo-template">
<tr class="k-grid-edit-row" data-uid="#= uid #">
<td>
<input class='k-textbox' data-bind="value:Name" />
</td>
<td>
<span>#:Name#</span>
</td>
</tr>
</script>
var viewModel = kendo.observable({
data: [{
Name: "1Chai",
Price: 18.00
}, {
Name: "2Chai",
Price: 18.00
}, {
Name: "3Chai",
Price: 18.00
}, {
Name: "4Chai",
Price: 18.00
}, {
Name: "5Chai",
Price: 18.00
}, ]
});
kendo.bind(document.body, viewModel);
var grid = $("#grid2").kendoGrid({
dataSource: {
data: [{
Name: "1Chai",
Price: 18.00
}, {
Name: "2Chai",
Price: 18.00
}, {
Name: "3Chai",
Price: 18.00
}, {
Name: "4Chai",
Price: 18.00
}, {
Name: "5Chai",
Price: 18.00
}, ]
},
rowTemplate: kendo.template($("#row-template").html())
}).data("kendoGrid");
Thanks in advance.
You will need to manually bind the row models to the TR elements of the Grid. You can do this in the dataBound event handler.
e.g.
dataBound: function(){
var grid = this;
this.tbody.find('tr').each(function(){
var tr = $(this);
kendo.bind(tr, grid.dataItem(tr));
})
},
Fiddle
There is already an example of jqxGrid that is labeled "jqGrid integration with existing Durandal solution". However, I don't have the option of using jqxGrid.
Does any one have an example of using jqGrid with durandal. This is what I'm trying now and it is not working.
Unable to parse bindings.
Bindings value: attr: { href: 'animals/' + id, title: name }, text: id
Message: id is not defined;
viewmodel.js
///
define(['durandal/app', 'jqgrid', 'kojqgrid'], function (app) {
var initialData = [
{ id: 1, name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ id: 2, name: "Speedy Coyote", sales: 89, price: 190.00 },
{ id: 3, name: "Furious Lizard", sales: 152, price: 25.00 },
{ id: 4, name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ id: 5, name: "Brooding Dragon", sales: 0, price: 6350 },
{ id: 6, name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ id: 7, name: "Optimistic Snail", sales: 420, price: 1.50 }
];
var ctor = function () {
this.animals = ko.observableArray([]);
this.disabled = ko.observable(false);
this.activate = function () {
this.animals(initialData);
return true;
}
};
//Note: This module exports a function. That means that you, the developer, can create multiple instances.
//This pattern is also recognized by Durandal so that it can create instances on demand.
return ctor;
});
View
-------------------------------------------------------------------
<h3>Customers</h3>
<table id="animals" data-bind="grid: { data: animals }" >
<caption>Amazing Animals</caption>
<thead>
<tr>
<th data-field="actions" style="width:27px;"></th>
<th data-field="name" width="150px">Item Name</th>
<th data-field="sales">Sales Count</th>
<th data-field="price">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td data-field="actions">
<a class="grid-edit" data-bind="attr: { href: 'animals/' + id, title: name }, text: id"></a>
</td>
</tr>
</tbody>
</table>
Any help would be greatly appreciated.
The reason you are getting id is undefined is because the ctor function does not expose id or name attribute but the animals observableArray. In your view you need to loop over the animals obserbavbleArray to get access to id and name attribute for each animal. Try the following code:
<tbody data-bind='foreach:animals'>
<tr>
<td data-field="actions">
<a class="grid-edit" data-bind="attr: { href: 'animals/' + id, title: name }, text: id"></a>
</td>
</tr>
</tbody>
You need to put your activate handler on the prototype:
ctor.prototype.activate = function () {...}
Durandal likely cannot find your activate handler and, therefore, never initializes the data.
Also, I can only assume that the jqGrid binding is looking at the table definition and harvesting from the DOM what it needs to build a proper binding. The reason I say that is that, strictly speaking, #nimrig is right: there needs to be a foreach somewhere. It must be that the jqGrid is building that foreach.
I want to reduce the height when a row is removed from ng-grid. I am able to delete a row reduce the grid height by a row. but grid footer is not moving from its position.
here is the code I am using
--html
<div class="gridStyle" ui-if="InterestInfo.length>0" ng-grid="gridOptions" ng- style="getTableStyle()" >
</div>
--javascript
var varFooterTempate = '<div><button type="button" class="btn btn-xs btn-success" ng-click="edit(row)" > ' +
' <span class="glyphicon glyphicon-plus"></span>' +
'</button>'
$scope.getTableStyle = function () {
var rowHeight = 35;
var headerHeight = 30;
var footerHeight = 30;
return {
height: ($scope.InterestInfo.length * rowHeight + headerHeight + footerHeight + 5) + "px"
};
};
$scope.gridOptions = {
data: 'InterestInfo',
headerRowHeight: 30,
rowHeight: 35,
footerRowHeight: 30,
showFooter: true,
footerTemplate: varFooterTempate,
columnDefs: [{ field: 'name', displayName: 'Name' },
{ field: 'type', displayName: 'Type' },
{ field: 'number', displayName: 'Number' },
{ field: '', displayName: 'Action', width: 140, sortable: false, cellTemplate: editableInPopup}],
multiSelect: false
};
$scope.removeRow = function () {
var index = this.row.rowIndex;
alert(index);
$scope.gridOptions.selectItem(index, false);
$scope.InterestInfo.splice(index, 1);
};
I believe that the documentation is currently wrong on this topic. Try setting gridFooterHeight instead of footerRowHeight in your gridOptions object.
When I'm using other "groupable" row template doesn't work in the kendo grid
But before there was no problem and now how to use the grouping together of row template
I put the code I wrote in a review do
jsfiddle :
Click here to check with jsfiddle
<script>
$(document).ready(function () {
var ds = new kendo.data.DataSource({
transport: {
read: {
url: '/api/clientssnapshot',
dataType: 'json',
type: 'get'
}
}
});
$('.table').kendoGrid({
dataSource: ds,
sortable: true,
groupable: true,
selectable: true,
navigatable: true,
height: 500,
scrollable: true,
rowTemplate: kendo.template($("#client-row-template").html().replace('class="k-alt"', '')),
altRowTemplate: kendo.template($("#client-row-template").html()),//#class="k-alt"#
dataBound: function () {
$('.spark').sparkline([1, 2, 3, 4, 5, 6, 85, 2, 1]);
//$('.spark').each(function (i, e) {
// var $this = $(this);
// //console.info($this.attr('data-inrate'));
// var arr = eval('[' + $this.attr('data-inrate') + ']');
// console.log(this);
// $this.sparkline(arr);
//});
}
});
});
</script>
<body class="menu_hover">
<script id="client-row-template" type="text/x-kendo-template">
<tr role="row" class="k-alt">
<td role="gridcell" >#= Mac #</td>
<td role="gridcell" >#= RadioName #</td>
<td role="gridcell" > #=ApName# </td>
<td role="gridcell" > #=RemoteIp# </td>
<td role="gridcell" > <a href=#"#= AccountingId #" target="_blank" > #= AccountingName # </a> </td>
<td role="gridcell" >#= TX #</td>
<td role="gridcell" >#= RX #</td>
<td role="gridcell" >#= Signal #</td>
<td role="gridcell" >#= Uptime #</td>
<td role="gridcell">
<span class="spark" data-inrate="#= InRateHistory #" > </span>
</td>
</tr>
</script>
<div class="span6 box gradient main_stting">
<div class="dataTables_filter" id="txtSearch">
<label>
Search:
<input type="text" aria-controls="DataTables_Table_0"></label>
</div>
<div class="title">
<h3></h3>
</div>
<div class="content">
<table class="table">
<colgroup>
<!-- Mac -->
<col style="width: 170px">
<col style="width: 150px">
<col style="width: 80px">
<col style="width: 160px">
<col style="width: 130px">
<col style="width: 44px">
<col style="width: 50px">
<col style="width: 50px">
<col style="width: 78px">
<!-- Usage -->
<!-- <col style="width: 100px" />-->
</colgroup>
<thead>
<tr>
<th>Mac</th>
<th>Radio</th>
<th>AP</th>
<th>Remote IP</th>
<th>Name</th>
<th>TX</th>
<th>RX</th>
<th>Signal</th>
<th>Uptime</th>
<th>Usage</th>
</tr>
</thead>
</table>
</div>
</div>
</body></html>
You can do it in your own template with a trick that was posted in this thread: http://www.telerik.com/forums/grid-grouping-problem-when-using-row-template-bug
Which contains this JSFiddle: http://jsfiddle.net/THRQV/
Here's the code from that fiddle.
Markup
<table id="grid" style="width: 100%;">
</table>
<script id="rowTemplate" type="text">
<tr>
#= new Array(this.group().length + 1).join('<td class="k-group-cell"></td>') #
<td>${Id}</td>
<td>${StatusText}</td>
<td>${CommissionTypeText}</td>
</tr>
</script>
Javascript
var localData = [
{Id: 1, StatusText: "Status 1", CommissionTypeText: "Commission 1"},
{Id: 2, StatusText: "Status 2", CommissionTypeText: "Commission 2"},
{Id: 3, StatusText: "Status 3", CommissionTypeText: "Commission 3"}
];
var dataSource = new kendo.data.DataSource( {
data: localData,
schema: {
model: {
fields: {
Id: { type: "number" },
StatusText: { type: "string" },
CommissionTypeText: { type: "string" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
rowTemplate: $.proxy(kendo.template($("#rowTemplate").html()), dataSource),
scrollable: true,
height: 500,
sortable: true,
filterable: true,
groupable: true,
pageable: true,
columns: [
{
field: "Id",
title: "Id",
filterable: false
},
{
field: "StatusText",
title: "StatusText"
},
{
field: "CommissionTypeText",
title: "CommissionTypeText"
}
]
});
Basically you are passing in the datasource, calling group() on it, and injecting the group cell when applicable.
When you group cells, KendoUI inserts a new cell in front of the existing but this is only done for the standard template, not for your templates.
My recommendation is switching to a template for each cell. Basically your column definition would become:
columns : [
{ field: "Mac", title: "Mac", width: 170 },
{ field: "RadioName", title: "Radio", width: 150 },
{ field: "ApName", title: "Ap", width: 80, template: '#=ApName#' },
{ field: "RemoteIp", title: "Remote IP", width: 160, template: '#=RemoteIp#' },
{ field: "AccountingName", title: "Name", width: 130, template: ' #= AccountingName # ' },
{ field: "TX", title: "TX", width: 44 },
{ field: "RX", title: "RX", width: 50 },
{ field: "Signal", title: "Signal", width: 50 },
{ field: "Uptime", title: "Uptime", width: 78},
{ field: "Usage", title: "Usage", template: '<span class="spark" data-inrate="#= InRateHistory #"> </span>' },
{ command: [ "edit" ], title: " " }
],
In addition, you simply define the grid HTML placeholder as:
<div class="table"></div>
Your JSFiddle modified here: http://jsfiddle.net/OnaBai/Dyb9Y/10/