I'm working with Kendo UI Grid and I want to know if it is possible to have both column and row headers, like this:
colHeader1 colHeader2 colHeader3
rowHeader1
rowHeader2
rowHeader3
My grid:
$("#dataGrid").kendoGrid({
editable: true,
columns: [
{ field: "name", title: "Name" },
{ field: "age", title: "Age" }
],
dataSource: _dataSource()
});
var _dataSource = function () {
return new kendo.data.DataSource({
transport: {
read: {
type: "GET",
crossDomain: true,
url: url + "person",
dataType: "json"
}
},
schema: {
data: "data",
total: "total"
}
});
};
My grid datasource will always have 30 records (fixed).
Try using rowTemplate:
rowTemplate: kendo.template($("#template").html())
And the template being:
<script id="template" type="text/x-kendo-template">
<tr data-uid="#= uid #">
<td class='k-header'>#: fixed #</td>
<td>#: name #</td>
<td>#: age #</td>
</tr>
</script>
Demo
Related
How to make a column data as hyperlink in jQuery DataTable
Here's my table
<thead>
<tr>
<th>Province</th>
<th>District</th>
<th>Number 1</th>
</tr>
</thead>
Here's my Script
function fill_datatable(filter_district = '', filter_outlet = '')
{
var dataTable = $('#outlet_data').DataTable({
processing: true,
serverSide: true,
ajax:{
url: "{{ route('customsearch.index') }}",
data:{filter_district:filter_district, filter_outlet:filter_outlet}
},
columns: [
{
data:'province',
name:'province'
},
{
data:'district',
name:'district'
},
{
data:'no1',
name:'no1'
}
]
});
}
I want to make the column Number 1 as hyperlink and it should get the number from the database value from dataase .
You can use columns.render option to make the column Number 1 as hyperlink and get the number from the database like:
var dataTable = $('#outlet_data').DataTable({
processing: true,
serverSide: true,
ajax: {
url: "{{ route('customsearch.index') }}",
data: {
filter_district: filter_district,
filter_outlet: filter_outlet
}
},
columns: [
{
data: 'province',
name: 'province'
},
{
data: 'district',
name: 'district'
},
{
data: 'no1',
"render": function(data, type, row, meta) {
if (type === 'display') {
data = '' + data + '';
}
return data;
}
}
]
});
I am trying to edit a row in jquery kendo grid popup editor. But when I click on update button it does not submit selected dropdown values to the controller while it submits the other properties without any issues. I have tried many examples but nothing works well.
This is my code
var element = $("#grid").kendoGrid({
dataSource: {
type: "json",
transport: {
read: '/controller/GetEmployees',
update: {
url: "/controller/UpdateEmployee",
dataType: "json"
},
},
pageSize: 10,
serverPaging: true,
serverSorting: false,
schema: {
model: {
id: "EmployeeID",
fields: {
EmployeeID: { type: "number", editable: false },
EmployeeName: { type: "string", editable: true },
EmployeeStatus: { defaultValue: { ID: 1, Name: "Active" }, editable: true }
}
}
}
},
height: 500,
sortable: false,
pageable: false,
editable: "popup",
toolbar: ["create"],
columns: [
{
field: "EmployeeName",
title: "Employee Name",
width: "110px"
},
{
field: "EmployeeStatus",
title: "Status",
width: "110px",
editor: activeInactiveDropDownEditor,
template: "#=EmployeeStatus.Name#"
},
{
command: "edit",
width: "80px"
}
]
});
});
}
function activeInactiveDropDownEditor(container, options) {
$('<input required name="' + options.field + '" data-bind="ID"/>')
.appendTo(container)
.kendoDropDownList({
//autoBind: true,
dataTextField: "Name",
dataValueField: "ID",
dataSource: {
type: "json",
transport: {
read: "/controller/GetStatusList"
}
}
});
}
could anyone found the fault here please ?
Finally I found a solution. I just modified update request with a type property and it works well now.
update: {
type: 'post', // just added this and works well
url: "/controller/UpdateEmployee",
dataType: "json"
},
I think your problem is with the binding, I mean, it is not just add a data attribute bind with the field name, sometimes binding models to widgets needs some level of complexity. As I can't reproduce your whole snippet, I would suggest you to use options.model to set the input value, hence the widget can initialize with the right value:
function activeInactiveDropDownEditor(container, options) {
$('<input required name="' + options.field + '" value="' + options.model.ID + '" />')
If that doesn't works, set the value init parameter or anything like that.
I'm trying to populate a kendo grid with data retrieved via ajax. Here is the ajax:
var model = #Html.Raw(Json.Serialize(Model));
$(document).ready(function () {
$.ajax({
url: "/Utilities/Report/Run",
data: JSON.stringify(model),
contentType: "application/json",
type: "POST",
success: function(result) {
var ds = new kendo.data.DataSource({
data: result
});
alert(result);
$("#grid").data("kendoGrid").setDataSource(ds);
},
error: function(result) {
options.error(result);
}
});
$("#grid").kendoGrid({
toolbar: ["excel", "pdf"],
excel: {
fileName: "test"
},
pdf: {
fileName: "test"
},
});
});
At the alert(result) this is what the data looks like:
[
{"TEST":"one"},
{"TEST":"two"},
{"TEST":"three"}
]
The ajax call appears to be working and the data looks good to me, but the kendo grid is not updating, it remains blank. I also do not get any error. I've tried placing the kendoGrid inside the ajax success function with the same result. I've tried using transport and read in the DataSource to retrieve the data but that kept giving me an error: n.slice is not a function. However, others seemed to think that was because there was no schema defined. Due to the kind of data I am retrieving, I cannot define this. The data retrieved from the server could have any column/field names, and any number of columns. It is not complex JSON however.
How do I get my grid to populate with this data?
I have created a new Datasource and mapped it to the existing one outside the success method.
Can you try this one below :
var newDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/Utilities/Report/Run",
dataType: "json",
data: JSON.stringify(model),
error: function (result) {
options.error(result);
}
}
}
});
var d1 = $("#grid").data("kendoGrid");
d1.dataSource.data([]);
d1.setDataSource(newDataSource );
make changes as per your necessity if I have missed any . Kendo data binding is always confusing :D
Kendo DataSource is very powerful. Ideally, you do not need to make a manual Ajax call. Instead, DataSource can Ajax request data from URL by itself, if Grid needs data.
https://jsfiddle.net/6gxqsrzu/
$(function() {
var dataSource = new kendo.data.DataSource({
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: {
type: "number"
},
Freight: {
type: "number"
},
ShipName: {
type: "string"
},
OrderDate: {
type: "date"
},
ShipCity: {
type: "string"
}
}
}
},
serverPaging: true,
pageSize: 5,
serverSorting: true,
sort: {
field: 'OrderDate',
dir: 'asc'
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight", {
field: "OrderDate",
title: "Order Date",
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name"
}, {
field: "ShipCity",
title: "Ship City"
}
]
});
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
<div id="grid"></div>
I am trying to create a custom toolbar in KendoUI grid following this link:http://demos.telerik.com/kendo-ui/grid/toolbar-template but getting stuck with an error.
This is what I am trying to do in my code:
<div id="example">
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Show products by category:</label>
<input type="search" id="category" style="width: 150px" />
</div>
</script>
<div id="grid"></div>
<script>
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
transport: {
read: {
url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
type: "post",
dataType: "json"
}
},
schema: {
data: "Data",
total: function (response) {
return $(response.Data).length;
}
},
pageSize: 10
},
toolbar: kendo.template($("#template").html()),
groupable: true,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [
{
field: "CustomerAltID",
filterable: true
},
{
field: "CustomerID",
title: "Customer ID"
},
{
field: "CustomerName",
title: "Customer Name",
template: "<div class='customer-photo'" +
"style='background-image: url(../Content/Images/customerimg/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: CustomerName #</div>"
},
{
field: "Gender",
title: "Gender",
template: "<div class='gender-photo'" +
"style='background-image: url(../Content/Images/#:data.Gender#.jpg);'></div>"
}
]
});
var dropDown = grid.find("#category").kendoDropDownList({
dataTextField: "Gender",
dataValueField: "CustomerID",
autoBind: false,
optionLabel: "All",
dataSource: {
severFiltering: true,
transport: {
read: {
url: 'http://localhost:52738/Default1/KendoDataAjaxHandle',
type: "post",
dataType: "json"
}
},
schema: {
data:"Data"
}
},
change: function () {
var value = this.value();
if (value) {
grid.data("kendoGrid").dataSource.filter({ field: "CustomerID", operator: "eq", value: parseInt(value) });
} else {
grid.data("kendoGrid").dataSource.filter({});
}
}
});
});
</script>
</div>
I don't know what the problem is and its been hours that I am unable to figure out the solution for it.
I am using the following versions- Jquery v-3.1 and Jquery UI-1.12
Another possibility as mentioned in this github issue is to include <script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script> in html. This worked for me.
The problem is likely due to using jQuery v3.1
Kendo does not currently work with jQuery v3, officially. But it apparently can work if you also include jquery-migrate.
http://www.telerik.com/forums/jquery-3-0
The officially supported versions of jQuery are listed here:
http://docs.telerik.com/kendo-ui/intro/installation/prerequisites#supported-jquery-versions
Note that it states that Kendo R3 2016 SP2 should also work with jQuery 3.1.1.
So, you can:
use the version of jQuery that ships with/is supported by whatever
version of Kendo you use
OR use jQuery 3.1 with jquery-migrate
OR use Kendo R3 2016 SP2 and jQuery 3.1.1
I'm new in using Kendo Grid and Kendo UI . My question is how can i resolve this Error
Uncaught TypeError: Cannot read property 'replace' of undefined
This is my Code on my KendoGrid
$("#Grid").kendoGrid({
scrollable: false,
sortable: true,
pageable: {
refresh: true,
pageSizes: true
},
dataSource: {
transport: {
read: {
url: '/Info/InfoList?search=' + search,
dataType: "json",
type: "POST"
}
},
pageSize: 10
},
rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
altRowTemplate: kendo.template($("#rowTemplate").html())
});
Line that Causes the Error
rowTemplate: kendo.template($("#rowTemplate").html().replace('k-alt', '')),
HTML of rowTemplate
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr class='k-alt'>
<td>
${ FirstName } ${ LastName }
</td>
</tr>
</script>
I think jQuery cannot find the element.
First of all find the element
var rowTemplate= document.getElementsByName("rowTemplate");
or
var rowTemplate = document.getElementById("rowTemplate");
or
var rowTemplate = $('#rowTemplate');
Then try your code again
rowTemplate.html().replace(....)
It could be because of the property pageable -> pageSizes: true.
Remove this and check again.
Please try with the below code snippet.
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<script>
function onDataBound(e) {
var grid = $("#grid").data("kendoGrid");
$(grid.tbody).find('tr').removeClass('k-alt');
}
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "http://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
ShipName: { type: "string" },
OrderDate: { type: "date" },
ShipCity: { type: "string" }
}
}
},
pageSize: 20,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 430,
filterable: true,
dataBound: onDataBound,
sortable: true,
pageable: true,
columns: [{
field: "OrderID",
filterable: false
},
"Freight",
{
field: "OrderDate",
title: "Order Date",
width: 120,
format: "{0:MM/dd/yyyy}"
}, {
field: "ShipName",
title: "Ship Name",
width: 260
}, {
field: "ShipCity",
title: "Ship City",
width: 150
}
]
});
});
</script>
</head>
<body>
<div id="grid">
</div>
</body>
</html>
I have implemented same thing with different way.
In my case, I was using a View that I´ve converted to partial view and I forgot to remove the template from "#section scripts". Removing the section block, solved my problem. This is because the sections aren´t rendered in partial views.
It is important to define an id in the model
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model => model.Id(p => p.id))
)