Going through my first SlickGrid examples. I encounter this issue where the header row that shows the column names would simply run way pass the table itself.
I am attaching a screenshot that shows the misbehavior. Please pay attention to the length of the header where the column names appear.
My code is below. Please help.
<html>
<head>
<link rel="stylesheet" href="./slick/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="./slick/examples/examples.css" type="text/css"/>
<script src="./slick/lib/jquery-1.7.min.js"></script>
<script src="./slick/lib/jquery-ui-1.8.16.custom.min.js"></script>
<script src="./slick/lib/jquery.event.drag-2.0.min.js"></script>
<script src="./slick/slick.editors.js"></script>
<script src="./slick/slick.core.js"></script>
<script src="./slick/slick.grid.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var grid,
data = [],
columns = [
{ id: "col1", name: "Col1", field: "col1"},
{ id: "col2", name: "Col2", field: "col2" },
{ id: "col3", name: "Col3", field: "col3" },
{ id: "col4", name: "Col4", field: "col4" },
{ id: "col5", name: "Col5", field: "col5" },
{ id: "col6", name: "Col6", field: "col6" }
],
options = {
editable: false,
enableAddRow: true,
enableCellNavigation: false,
autoHeight: true
};
for (var i = 5; i-- > 0;) {
data[i] = {
col1: "",
col2: "",
col3: "",
col4: "",
col5: "",
col6: ""
};
}
grid = new Slick.Grid("#container", data, columns, options);
</script>
</body>
</html>
Setting the width of the div container to the exact width of the table resolves the problem.
<div id="container" style="width:480px;"></div>
Related
Using Tabulator, I have a cell which contains a unique URL that the entire row should link.
I've tried the following code:
{rowHandle:true, formatter:"handle", headerSort:false, frozen:true,
minwidth:30, minWidth:30},
{title:"Database", field:"database", minwidth:110, editor:"input"},
{title:"Environment", field:"environment", minwidth:140, editor:"input"},
{title:"Product", field:"product", minwidth:140, editor:"input"},
{title:"URL", field:"url", formatter:"link", minwidth:130,
editor:"input"},'''
$("#tabulator-example").tabulator({
rowClick:function(e,row){
},
});
The Tabulator table simply disappears each time I try to add the rowClick line of code from the example.
This is the way I've been creating tables (below).
Then in your rowClick function, you can access the row data:
rowClick: function (e, row) {
// alert("Row " + row.getData().id + " Clicked!!!!");
},
let dataTable = new Tabulator("#data-list", {
height: "84vh",
width: 150,
virtualDomBuffer: 30,
// layout: "fitDataFill",
layout: "fitColumns",
resizableColumns: false,
selectable: 1,
responsiveLayout: "hide",
placeholder: "No Data",
columns: [
{
title: "Meeting",
field: "startDate",
formatter: eventListRowFormatter,
variableHeight: true,
headerSort: false
},
{ formatter: deleteIcon, width: 5, align: "center", cellClick: deleteFromEventList }
],
rowClick: function (e, row) {
// do something
},
rowDeselected: function (row) {
// do something
},
ajaxLoader: false
});
Use Selectable selectable: true,
const tabledata = [{
id: 1,
name: "Oli Bob",
EDN: ''
},
{
id: 2,
name: "Mary May",
EDN: ''
},
{
id: 3,
name: "Christine Lobowski",
EDN: ''
},
{
id: 4,
name: "Brendon Philips",
EDN: ''
},
{
id: 5,
name: "Margret Marmajuke",
EDN: ''
},
{
id: 6,
name: "Frank Harbours",
EDN: ''
},
];
const table = new Tabulator("#example-table", {
data: tabledata,
selectable: true,
columns: [{
title: "ID",
field: "id"
},
{
title: "Name",
field: "name"
},
{
title: "EDN",
field: "EDN",
}
]
});
<!DOCTYPE html>
<html>
<head>
<!-- Tabulator CDN -->
<link href="https://unpkg.com/tabulator-tables#4.2.7/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables#4.2.7/dist/js/tabulator.min.js"></script>
</head>
<body>
<div id="example-table"></div>
</body>
</html>
Is it possible to add a column to the kendo ui grid by clicking on a buutton? I have tried to add it but this column doesn't initialased in the grid and I have no any data from it. How to add a col to schema dynamically? Mabye I should somehow reinitialize it?
I want to add empty column only with the header and its name and column.field name, than to edit it in other rows. I never know beforehand what columns it will be and how much. They should be dynamic. And after adding the col new row should be with it.
The most problem is to add field to grid.dataSource.schema.model.fields.
let gridProducts = $('#gridProducts').kendoGrid({
dataSource: new kendo.data.DataSource({
data: e.event.products,
autoSync: true,
schema: {
model: {
id: "productID",
fields: {
productName: {
defaultValue: productDefault.products[0].productName,
validation: {
required: true
},
type: "string"
},
productCategory: {
defaultValue: productDefault.products[0].productCategory
},
productDiscount: {
defaultValue: productDefault.products[0].productDiscount,
type: "array"
}
}
}
}
}),
dataType: "object",
pageable: false,
toolbar: ["create"],
columns: [{
field: "productID",
title: "id"
},
{
field: "productName",
title: "Name"
},
{
field: "productCategory",
title: "Category",
template: "1",
editor: productCategoryDropDownEditor,
},
{
field: "productDiscount",
title: "Discount"
},
{
command: "destroy",
title: "x",
width: 29
},
],
editable: true,
sortable: true,
resizable: true
});
$("#addPrice").click(function() {
addPriceDialog.data("kendoDialog").open();
});
addPriceDialog.kendoDialog({
width: "450px",
title: "Add price",
closable: true,
modal: true,
actions: [{
text: 'Cancel',
action: function() {
return false;
},
},
{
text: 'Ок',
primary: true,
action: function() {
let name = $("#priceName ").val();
let type = $("#priceType").val();
let val = $("#priceValue").val();
let price = $("#price").val();
let grid = $("#gridProduct").data("kendoGrid");
let columns = grid.columns;
let newCol = {
title: "Price -" + name,
field: "price" + type + [columns.length],
format: "",
};
$("#gridTicket").data("kendoGrid").columns[(columns.length)] = newCol;
return true;
},
}
]
});
You can use setOptions to redefine the columns of the grid.
See the snippet for a demo.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>
</head>
<body>
<button onclick="addColumn()">Add Column</button>
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
function addColumn() {
grid.setOptions({
columns: grid.columns.concat([
{ field: "test" }
])
});
}
</script>
</body>
</html>
In the code below, unable to set the checkbox to checked. I would like to set certain checkbox checked=true. is there any way to solve the problem in kendo-mvvm where the databind will be done in the html part?
expected output is
[ ]General
[X]Name
[ ]Device
[X]Status
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<script>
$(function() {
$("#treeview").kendoTreeView({
dataSource: {
data: [{
id: 7,
parent_id: 0,
text: "Work Order assignment",
value: "Work Order assignment",
expanded: true,
items: [
{ id: 71, parent_id: 7, text: "Name", value: "woName" },
{ id: 72, parent_id: 7, text: "Device", value: "woDevice" },
{ id: 73, parent_id: 7, text: "Status", value: "woStatus" }]
}]
},
checkboxes: true
});
var values = ["woName","woStatus"];
var setTreeViewValues = function(values) {
var tv = $("#treeview").data("kendoTreeView");
tv.dataItems().forEach(function(dataItem) {
if (values.indexOf(dataItem.text) > -1) {
dataItem.set("checked", true);
}
});
};
setTreeViewValues(values);
});
</script>
</head>
<body>
<div id="treeview"></div>
</body>
</html>
$("#treeview").data("kendoTreeView").dataItems() this method does not return all items in tree. It returns first level items. So if you want to check child nodes you may want to travel nodes recursively.
indexOf(string) function doesn't work with javascript arrays. You need to get values in loop.
http://www.w3schools.com/jsref/jsref_indexof.asp
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.914/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>
<script>
$(function() {
$("#treeview").kendoTreeView({
dataSource: {
data: [{
id: 7,
parent_id: 0,
text: "Work Order assignment",
value: "Work Order assignment",
expanded: true,
items: [
{ id: 71, parent_id: 7, text: "Name", value: "woName" },
{ id: 72, parent_id: 7, text: "Device", value: "woDevice" },
{ id: 73, parent_id: 7, text: "Status", value: "woStatus" }]
}]
},
checkboxes: true
});
var dataItems = $("#treeview").data("kendoTreeView").dataItems();
setTreeViewValues(dataItems);
});
var values = ["woName","woStatus"];
function setTreeViewValues(dataItems){
dataItems.forEach(function(dataItem){
values.forEach(function(value){
if (value.indexOf(dataItem.text) > -1) {
dataItem.set("checked", true);
}
if(dataItem.hasChildren){
// checking child dataItems recursively
setTreeViewValues(dataItem.children.data());
}
});
});
}
</script>
</head>
<body>
<div id="treeview"></div>
</body>
</html>
I'm building a Kendo Grid using the MVVM pattern and I want 2 custom filters:
A general grid filter with extra = false and custom operators
A custom column filter with a combobox
Very similar to this Kendo Grid demo. I just can't seem to get it working with MVVM pattern using data-filterable attribute or filterable ui on the column:
<div data-role="grid"
data-filterable="customGridFilter"
data-columns="[
{ field: 'Id', hidden: 'true' },
{ field: 'Name', filterable: '{ ui: customNameFilter }' },
{ field: 'Value' }
]"
data-bind="source: gridDs">
</div>
I've created a JS Fiddle to illustrate what I'm going for.
Actually it just missed some point like
data-filterable="customGridFilter" should become
data-filterable="true",
and also in the kendo dojo they are using jQuery 1.9.1 and yours is
compact(edge) which cause the issue.
After changing to jQuery 1.9.1 it works fine like below
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div id="test">
<script>
var customNameFilter = customNameFilter || null;
</script>
<div data-role="grid" data-filterable="true" data-columns="[
{ field: 'Id', hidden: 'true' },
{ field: 'Name', filterable: { ui: customNameFilter } },
{ field: 'Value' }
]" data-bind="source: gridDs"></div>
</div>
<script>
$(document).ready(function() {
customNameFilter = function(e) {
console.log("test")
e.kendoComboBox({
dataSource: {
data: [{
Id: 1,
Name: "Test1"
}, {
Id: 2,
Name: "Test2"
}, {
Id: 3,
Name: "Test3"
}]
},
dataValueField: "Id",
dataTextField: "Name",
filter: "contains"
});
};
var viewModel = kendo.observable({
gridDs: new kendo.data.DataSource({
data: [{
Id: 1,
Name: "Test1",
Value: 3
}, {
Id: 2,
Name: "Test2",
Value: 5
}, {
Id: 3,
Name: "Test3",
Value: 2
}, {
Id: 4,
Name: "Test4",
Value: 7
}]
}),
customGridFilter: {
extra: false,
operators: {
string: {
contains: "Contains",
doesnotcontain: "Does not contain",
eq: "Is equal to",
neq: "Is not equal to",
startswith: "Starts with",
endswith: "Ends with"
}
}
},
});
kendo.bind($('#test'), viewModel);
});
// this doesn't work
//var grid = $('#test').data('kendoGrid');
//grid.options.filterable = customFilter;
</script>
</body>
</html>
I have simple treeview with hierarchical data in 3 level in deep.
I load all data on load page.
I have simple schema
model: {
hasChildren: function (item) {
return item.items && item.items.length > 0;
},
id: "id",
children: "items"
}
Default filter work only on first level, How can I change this logic?
Not sure what you mean but default filter does not work only on first level. Check the following example where I show anything that starts with "F". You will see that it shows the root and node in the first level. What it does not show are nodes bellow a node that does not meet the condition of starting with "F" but that's what I would have expected.
var inlineDefault = new kendo.data.HierarchicalDataSource({
data: [
{
text: "Full",
items: [
{
text: "Furniture",
items: [
{ text: "Tables & Chairs" },
{ text: "Sofas" },
{ text: "Occasional Furniture" }
]
},
{
text: "Decor",
items: [
{ text: "Bed Linen" },
{ text: "Curtains & Blinds" },
{ text: "Carpets" }
]
}
]
}
],
filter: { field: "text", operator: "startswith", value: "F" }
});
$("#treeview-left").kendoTreeView({
dataSource: inlineDefault
});
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.2.1008/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://cdn.kendostatic.com/2014.2.1008/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.2.1008/js/kendo.all.min.js"></script>
<div id="treeview-left"></div>