I have a Kendo UI Grid created in javascript. I have a defalut grouping, then the user can select other groupings. Ineed help with a couple things:
1.I would like to make a custom group header so it includes a count of the children rows.
On mouseover of the Group Header I need to change the related marker on a Google Maps instance. (The group contains the lat and long of the client.
function loadGrid(dataItem) {
$("#grid").kendoGrid({
dataSource: {
dataType: "json",
transport: {
read: {
url: serviceUrl",
dataType: "json",
},
},
schema: {
data: "result.results",
},
group: {
field: "siteName", field: "siteName",
},
},
dataBound: onDataBound,
pageSize: 20,
height: 550,
filterable: true,
groupable: true,
sortable: true,
pageable: true,
collapse: true,
columns: [
{
field: "dirId",
title: "Dir Id",
hidden: true
},
{
field: "dirName",
Title: "Dir Name",
hidden: true
},
{
field: "siteId",
title: "Site Id",
hidden: true
},
{
field: "siteName",
title: "Site Name",
//hidden: true
},
{
field: "appTypeRefId",
title: "App Type Ref Id",
hidden: true
},
{
field: "appInstName",
title: "App Instance Name",
},
{
field: "appTypeName",
title: "App Type",
},
{
field: "unitId",
title: "Unit Id",
hidden: true
},
{
field: "unitName",
title: "Unit Name"
},
{
field: "controlSystemId",
title: "Control System Id",
hidden: true
},
{
field: "controlSystemName",
title: "Control System Name"
},
{
field: "longitude",
title: "Longitude",
hidden: true
},
{
field: "latitude",
title: "Latitude",
hidden: true
},
],
})
}
Thanks a ton!
Ron
Related
I want to change the title of the editable popup window based on whether it is being used to create or edit a grid item (I want the fields to be the same for both of them, though).
I have set the popup window's title in editable
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
window: {
title: "Add"
}
}
But I'm not sure how to differentiate between Edit and Add. The Edit button is in the columns:
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
}
]
and the Add button in the toolbar:
toolbar: [{name: 'create'}]
Notably, I've tried this to no avail:
toolbar: [
{
name: 'create',
click: function(){
alert("test");
}
},
]
I've also seen e.model.isNew() used under edit, but according to my compiler, this is not a function.
I've looked all over the internet and Telerik and found nothing. Am I missing something?
EDIT: Someone asked for the entirety of my grid code:
var grid = $('#grid').kendoGrid({
//dataSource: this.source,
dataSource: this.testData,
height: 550,
filterable: true,
sortable: true,
pageable: {
pageSize: 30,
buttonCount: 1
},
//toolbar: ["create", "destroy", "search"],
toolbar: [
{name: 'create'},
{name: 'destroy'},
{name: 'search'},
{template: "<input id='category' type='search' style='width: 250px; float: right;'/>"}
],
resizeable: true,
columns: [
{
field: 'Name',
title: 'Name',
filterable: true,
},
{
field: 'MCN',
title: 'P/N',
filterable: false,
},
{
field: 'ID',
title: 'ID',
filterable: true,
},
{
field: 'Type',
title: 'Type',
filterable: true,
},
{
field: 'Subtype',
title: 'Subtype',
filterable: true,
},
{
field: 'Value',
title: 'Value',
filterable: false,
},
{
field: 'Tolerance',
title: 'Tolerance',
filterable: true, //Number/letter combination causes problem?
},
{
command: [
{
name: "edit",
text: {
edit: "Edit",
update: "Save",
cancel: "Cancel"
}
},
{
name: "copy",
text: "Copy",
//click: function
}
],
title: " ", width: "250px"
},
],
editable: {
mode: "popup",
template: kendo.template($("#popupTemplate").html()),
// window: {
// title: "Add"
// }
},
selectable: "multiple, row", // Select multiples by drag or Shift-Click
edit: function(e){
var container = e.container;
var model = e.model;
//console.log(model.get("ID"));
// Changing the size of the container
$(e.container).parent().css({
//width: "1000px",
//height: "500px"
});
//May be able to simplify this with a for loop
// Changing Type input to a dropdown
var input = $('#dropType');
input.kendoDropDownList({
dataTextField: "Type",
dataValueField: "dropType",
dataSource: [{Type: 'One'}, {Type: 'Two'}, {Type: 'Three'}],
}).appendTo(container);
// Changing Subtype input into a dropdown
var input = $('#dropSubtype');
input.kendoDropDownList({
dataTextField: "Subtype",
dataValueField: "dropSubtype",
dataSource: [{Subtype: 'One'}, {Subtype: 'Two'}, {Subtype: 'Three'}],
}).appendTo(container);
}
});
To change the title you should use edit function of the grid like this:
$("#grid").kendoGrid({
dataSource: {...},
height: 550,
toolbar: ["create"],
columns: [
{
field: "",
title: '',
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
},
{
command: [
{ name: "edit", text: 'Edit' },
],
title: 'tools',
width: "200px",
attributes: { style: "text-align:center;" },
headerAttributes: { style: "text-align: center;" }
}
],
editable: {
mode: "popup",
template: $("#template").html(),
},
edit: function(e) {
if (e.model.isNew()) {
e.container.kendoWindow("title", "Createee");
} else {
e.container.kendoWindow("title", "Updateee");
}
}
});
And for using the template, see this answer : Kendo UI Grid popup
Edit:
According to kendo : Kendo Forum , isNew
The isNew method returns true or false depending on the id value of that model.
If the id is still set to the default value then it will assume it is a New Model.
So I think your problem is because of your dataSource, and you should fill id before the fields property. like this :
dataSource: {
transport: {
read: {
url: ...
type: "POST", // The request type.
dataType: "json", // The data type of the returned result.
},
create: {...},
update: {...},
destroy: {...}
},
schema: {
model: {
id: "Id",
fields: {
Id: { editable: false },
BankName: { type: "string", validation: { required: true } },
....
}
}
},
pageSize: 20
},
And here are two Samples: ( Sample 1 , Sample 2 )
I am very new to NVC working on an existing solution. We are using a dxDataGrid, and I am trying to add a column with custom buttons. I am using the following documentation as reference:
https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxDataGrid/Configuration/columns/buttons/
and
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CommandColumnCustomization/jQuery/Light/
The existing implementation of the grid is as follows:
$(function () {
$("#branchDataGrid")
.dxDataGrid({
dataSource: {
store: dxMvcStore({
key: "ID",
})
},
showBorders: true,
noDataText: "No Branch Selected",
editing: {
mode: "batch",
allowAdding: false,
allowUpdating: true,
allowDeleting: true
},
paging: { enabled: true, pageSize: 10 },
showRowLines: true,
sorting: { mode: "none" },
columns: [
{
dataField: "Name",
caption: "Branch/Division Name",
validationRules: [{ type: "required" }]
},
{
dataField: "Code",
caption: "Code",
validationRules: [{ type: "required" }]
},
{
dataField: "ExternalCode",
caption: "External Code",
validationRules: [{ type: "required" }]
},
{
dataField: "OrderExchangeabilityTimeoutDays",
caption: "Return Window (days)",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
},
{
dataField: "CollectionRequestMonthlyLimit",
caption: "Monthly Collection Limit",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
validationRules: [{ type: "required" }]
},
],
onInitialized: e => {
self.companiesNodeDataGrid = e.component as DevExpress.ui.dxDataGrid;
},
onRowExpanding: e => {
// Only show one detail view at a time.
self.companiesNodeDataGrid.collapseAll(-1);
},
onRowInserting: e => {
// self.saveCompanyResult(e, true);
},
onRowUpdating: e => {
// self.saveCompanyResult(e, false);
}
}).dxDataGrid("instance");
});
I am trying to add my column with the buttons as shown in the documentation. Here is a snippet:
columns: [
{
type: "buttons",
buttons: [{
name: "save",
cssClass: "my-class"
}]
},
{
dataField: "Name",
caption: "Branch/Division Name",
validationRules: [{ type: "required" }]
},
{
dataField: "Code",
caption: "Code",
validationRules: [{ type: "required" }]
},
{
dataField: "ExternalCode",
caption: "External Code",
validationRules: [{ type: "required" }]
},
{
dataField: "OrderExchangeabilityTimeoutDays",
caption: "Return Window (days)",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
},
{
dataField: "CollectionRequestMonthlyLimit",
caption: "Monthly Collection Limit",
dataType: "number",
editorOptions: {
format: "#",
min: 1,
},
validationRules: [{ type: "required" }]
},
]
The problem is that I am getting a compiler error in the line where it says "type: "buttons". Please see the below screenshot for reference:
I have done some searching but cannot seem to find any posts with similar issues. If anyone might have some advice for me where to look for a solution, or point out what I am doing wrong, I would be very grateful.
I have managed to continue using a different approach of adding custom markup to a column, as shown in the below link:
https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/CellCustomization/jQuery/Light/
Currently making a Table in Tabulator works fine, however when I add "groupToggleElement: "header" " it breaks the layout option of the Tabulator.
I'm unsure if I'm doing something wrong or if it's a bug.
table = new Tabulator("#myTable", {
pagination: "local",
paginationSize: 30,
movableColumns: true,
resizableRows: true,
initialSort: [
{ column: "FullName", dir: "asc" },
],
groupBy: "FullName",
groupStartOpen: false,
groupToggleElement: "header",
layout: "fitDataFill",
layoutColumnsOnNewData: true,
columns: [
{ title: "Name", field: "FullName", sorter: "string", align: "center" },
{ title: "Activation Key", field: "ActivationKey", sorter: "string", align: "center" },
{
title: "Expiry Date", field: "SubscriptionExpiryDate", sorter: "string", align: "center", formatter: "datetime", formatterParams: {
inputFormat: "YYYY-MM-DDT hh:mm:ss",
outputFormat: "DD/MMM/YYYY",
invalidPlaceholder: "No Expiry Date",
}
},
{ title: "Device Points", field: "Seats", sorter: "number", align: "center" }
]
});
$.ajax({
url: "../API/Analytics/GetCustomerData",
type: "get",
async: true,
success: function (data) {
table.setData(data.dataObject);
},
error: function () {
// error thing here
},
timeout: 10000
});
Call
table.redraw(true) to redraw the table on changes
http://tabulator.info/docs/4.3/layout#redraw
The Filter basically works fine but,
The select does not seem to fire the first selection
this happens every time the filter is reset as well.
I meddled with it for two days now...
here is the Fiddle
<script src="../content/shared/js/products.js"></script>
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
Discontinued: { type: "boolean" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: {
mode: "row"
},
pageable: {
input: true,
numeric: false
},
columns: [
{
field: "ProductName",
title: "Product Name",
filterable: {
cell: {
operator: "contains",
showOperators: false
}
}
}, {
field: "Discontinued", title: "Discontinued",
filterable: {
mode: "row",
cell: {
showOperators: false,
template: function (args) {
args.element.kendoDropDownList({
autoBind:false,
dataTextField: "text",
dataValueField: "value",
dataSource: new kendo.data.DataSource({
data: [{ text: "Yes", value: "true" },
{ text: "No", value: "false" }]
}),
index: 0,
optionLabel: {
text: "Filter",
value: ""
},
valuePrimitive: true
})
}
}
}
}
]
});
});
</script>
Kendo UI 2015 Q1 has a lot of bug on it, especially on dropdown family widget like autocomplete, multiselect, dropdown, etc..
Change your kendo library to 2014 or previous version will make it works fine,
check this dojo
Below is how I structured my kendo grid:
CreateListGrid: function () {
$("#PlanListGrid").kendoGrid({
dataSource: {
transport: {
read:{
url: BrowserSide.Url.getFullUrl("PlanningList/ReadPlans"),
type: "POST",
data: {
searchVal: $('#category').val(),
status: $('#ListFilterType').val(),
},
},
dataType: "json",
},
pageSize: 10,
schema: {
data: "Data",
total: "Total",
model: {
fields: {
FirstName: { editable: false, nullable: true },
LastName: { editable: false, nullable: true },
Title: { editable: false },
Id: { editable: false }
}
},
errors: "Errors"
},
},
toolbar: kendo.template($("#template").html()),
selectable: "row",
//groupable: true,
sortable: true,
//scrollable:true,
pageable: true,
columns: [{
field: "FirstName",
title: "First Name",
width: 160,
template: "#= SearchItems_Highlight(FirstName)#"
}, {
field: "LastName",
title: "Last Name",
width: 160,
template: "#= SearchItems_Highlight(LastName)#"
},
{
field: "Title",
title: "Plan Title",
width: 180,
template: "#= SearchItems_Highlight(Title)#"
},
{
field: "Id",
title: "Id",
width: 0
},
]
});
var grid = $("#PlanListGrid").data("kendoGrid");
grid.hideColumn("Id");
$("#PlanListGrid > .k-grid-header").css({ "padding-right": "0px;" });
}
I have the text fields in my kendo grid ellipsed if they are too long for the column width. Now I am having trouble adding a qtip to the ellipsed words in my kendo grid.
EDIT:
Because I'm lazy, I found a similar example online using kendo grid. I added the style for .k-grid td which is similar to what I have now that ellipses the text if it's too long. My question now is how do I add a jquery qtip to the ellipsed text? Rather where in the code should I add the qtip?
Here's the fiddle
You can apply qtip after grid creation.
function applyTooltip() {
$(".k-grid-content tbody td").each(function (index, element) {
var td = $(element);
td.qtip({
content: td.text(),
//hide: { when: 'unfocus', delay: 100 },
style: {
border: {
width: 1,
radius: 10
},
padding: 2,
textAlign: 'center',
tip: true,
name: 'cream'
},
position: {
adjust: {
screen: true
}
}
});
});
}
updated fiddle: http://jsfiddle.net/Sbb5Z/1610/
You can restrict qTip to columns who have data exceed a certain number of characters (ellipsis)
fiddle: http://jsfiddle.net/Sbb5Z/1611/