I'm trying to create a Kendo Grid in Angular. I originally had something like this:
<div kendo-grid k-options="gridOptions" k-data-source="myArray"></div>
In my scope, myArray is an array that gets dynamically assigned. gridOptions was defined as something like this:
gridOptions = {
dataSource: {
sort: { field: "number", dir: "asc" }
},
columns: [
{ field: "number", title: "Number" }
],
sortable: true
};
But the problem here is that the default sort is ignored, presumably because Kendo is using the k-data-source instead and totally ignoring this in the options. However, if I try removing k-data-source, and modifying my gridOptions to this:
gridOptions = {
dataSource: {
data: myArray,
sort: { field: "number", dir: "asc" }
},
columns: [
{ field: "number", title: "Number" }
],
sortable: true
};
Then I can see that the grid is sorted, but when myArray gets assigned, the grid does not populate with the data (I just end up with an empty grid).
What's the best way to achieve a default sorted grid using Kendo Angular directives? Thanks.
Try this for the dataSource part of the options:
dataSource: {
data: new kendo.data.ObservableArray(myArray),
sort: { field: "number", dir: "asc" }
}
Related
I create a simple demo here. When edit at amount field I want to display , separator ? Currently it only display the , when not in edit mode. Any idea how to achieve this?
DEMO IN DOJO
var data = [{ "name": 'Venue A', "amount": 10000.50},
{"name": 'Venue B', "amount": 250000.00},
{"name": 'Venue C', "amount": 1500000.43 }];
$(document).ready(function () {
var dataSource = new kendo.data.DataSource({
data: data,
schema: {
model: {
id: "id",
fields: {
name: { type: "string" },
amount: { type: "amount" }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
toolbar: [{ name: "create", text: "Add" }],
columns: [
{ field:"name" , title: "Name"},
{ field: "amount", title: "Amount", format: "{0:n}" }],
editable: true
});
});
<div id="grid"></div>
Per the documentation you only have the following types allowed:
The available dataType options are:
"string"
"number"
"boolean"
"date"
"object"
(Default) "default"
I suggest you to use "number" in this case, as it will work for sorting and filtering.
You can check that Kendo doesn't understand the "amount" type by writing some incorrect text in the editor and see it stays as it was.
You can create your own editor as shown in this dojo:
{ field: "amount", title: "Amount", format: "{0:c}",
editor: function(container, options) {
const input = $(`<input name="${options.field}">`).appendTo(container);
input.kendoNumericTextBox({
format: "c"
});
}
}
However, if you test Kendo NumericTextBox here, you'll see it doesn't display the section separators when editing.
You could do a custom text editor and handle all the events - that's a pure JavaScript question.
I new with kendo and I have problem with kendo grid. I have structure like this
var data = [{
key1: value1,
key2: value2,
objectInside: [{
insideKey1: insideValue1,
insideKey2: insideValue2,
insideKey3: insideValue3
},
{
insideKey1: insideValue1a,
insideKey2: insideValue2a,
insideKey3: insideValue3a
},
{
insideKey1: insideValue1b,
insideKey2: insideValue2b,
insideKey3: insideValue3b
}]
}];
and I need to create kendo grid and fill it with objectInside elements. For now I can display one of the element of the array:
var grid = $("#grid").kendoGrid({
pageable: true,
selectable: "row",
dataSource: data
columns : [
{ field: "objectInside.insideKey1[0]", title: "Value1:" },
{ field: "objectInside.insideKey2[0]", title: "Value2:" },
{ field: "objectInside.insideKey3[0]", title: "Value3:" }
]
}).data("kendoGrid");
But I do not have idea how to reach all the elements. Without indexing it doesn't work. It is possible to make loop here? I thought about making another variable contain only objectInside and try to read only this element but I failed here too. I try to do it like this:
var newData = data.objectInside;
or
var newData = JSON.stringify(data.objectInside);
Could anyone give me a hint how to deal with it?
Try this template:
{ template: "#= data.objectInside[0].insideKey1 #", title: "Value1" },
{ template: "#= data.objectInside[1].insideKey2 #", title: "Value2" },
{ template: "#= data.objectInside[2].insideKey3 #", title: "Value3" }
Demo
But this will show only one row, because the grid data contains one item in the first level. You can do like this to show all your data inside insideObject.
I am using jquery's DataTables which is really working great. Then only problem I got is, that I am facing (in non-edit-view) the value of the select-field (which is an id). The user of course doesn't want to see the id of course.
Therefore I am looking for a possibility to configure that column in a way to show always the value of label property.
Here a some snippets:
$(document).ready(function() {
var table = $('#overviewTable').DataTable({
dom: "Tfrtip",
ajax: "/Conroller/GetTableData",
columns: [
{ data: "Id", className: "readOnly", visible: false },
{
data: "LoanTransactionId",
className: "readOnly readData clickable",
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='#'>" + oData.LoanTransactionId + "</a>");
}
},
{ data: "Id", className: "readOnly" },
{ data: "property_1", className: "readOnly" },
{ data: "Priority" },
{ data: null, className: "action readOnly", defaultContent: 'Info' }
],
order: [1, 'asc'],
tableTools: {
sRowSelect: "os",
sRowSelector: 'td:first-child',
aButtons: []
}
});
// data reload every 30 seconds
setInterval(function() {
table.ajax.reload();
}, 30000);
editor = new $.fn.dataTable.Editor({
ajax: "PostTable",
table: "#overviewTable",
fields: [
{
label: "Id",
name: "Id"
},
{
label: "Column 1",
name: "property_1"
},
{
label: "Priority",
name: "Priority",
type: "select",
options: [
{ label: "low", value: 0 },
{ label: "mid", id: 1 },
{ text: "high", id: 2 }
]
}
]
});
// Inline Edit - only those who are not readOnly
$('#overviewTable').on('click', 'tbody td:not(:first-child .readOnly)', function(e) {
editor.inline(this, {
submitOnBlur: true
});
});
How it looks in the display mode
How it looks in the edit mode
See the documentation on columns.render
You want to modify your column options for priority
Preferred Option: Your data source has a field with the priority as a string
This is the best option, as you don't want to have two places with this business logic. Keep it out of the client code.
Also, you will want to modify the editor as well so that the options used have been retrieved dynamically from the server to keep this business logic out of the client too. This is left as an exercise for the reader.
Since you don't provide details on what your data structure looks lik, I'm assuming it is an object, and it has an attribute priorityAsString so use the string option type for render.
columns: [
...
{
data: "Priority" ,
render: "priorityAsString",
},
Option 2) You write a function to map priority to string
Do this if you can't get the data from the server. But remember you will need to update many places when the priority list changes.
columns: [
...
{
data: "Priority" ,
render: renderPriorityAsString,
},
...
function renderPriorityAsString(priority) {
const priorityToString = {
0: 'low',
1: 'med',
2: 'high',
};
return priorityToString[priority] || `${priority} does not have a lookup value`;
}
"render": function ( data, type, full ) { return label;}
I am using kendo grid.I have defined like,
$("#grid").kendoGrid({
dataSource:datasource,
pageable: true,
columns: [
{ field: "ProductId", title: "ProductId" },
{ field: "ProductType", title: "ProductType" },
{ field: "Name", title: "Name" },
{ field: "Created", title: "Created" }
],
});
});
I am able to display pager in my grid.but what I want is If the records in the grid is more than 20,Then only I want to display pager ,else don't want to display pager ,can u tell me how to do this?
Basically this is not supported. You can try to work-around it with some JavaScript. For example the following script after initializing the Grid should achieve similar behavior:
$(function(){
if($('#gridName').data().kendoGrid.dataSource.total()>20){
$('#gridName .k-grid-pager').hide();
}
})
Given data in the form:
var grid_data = [ {Hello: 'World'}, {Jesus:'Navas'} ]
I wish to draw a grid like so:
The grid shows with 2 rows but with no data, I can't find the problem in the following code:
var grid_store = Ext.create('Ext.data.Store', {
fields: [
{name: 'Property'},
{name: 'Value'}
],
data: grid_data
});
// create the Grid
var grid_view = Ext.create('Ext.grid.Panel', {
store: grid_store,
renderTo: 'info_panel',
stateful: true,
stateId: 'stateGrid',
columns: [
{
text : 'Property',
width : 100,
sortable : true,
dataIndex: 'Property'
},
{
text : 'Value',
width : 80,
sortable : false,
dataIndex: 'Value'
}
],
height: 350,
width: 600,
title: 'Array Grid',
viewConfig: {
stripeRows: true
}
});
Renders to:
<div id="info_panel"></div>
If you're wondering how I got the example image, I changed the store to an ArrayStore and re-formatted the data into arrays, but I'd prefer to miss out that step and insert the data as-is.
edit:
I think what I'm really asking for is a way to alert extjs to use the JSON keys as values, as opposed to most of the grid examples out there that take the form:
{value: 'Hello'}, {property: 'World'}
As one of the commenters and your edit suggested, your grid is built to consume a json with 'Property' and 'Value' being the keys for the json objects. I don't know if it's possible for you to change the source of the data to send in the reformatted json, but if not, you can always just run a quick loop to do so after receiving the data:
var new_data = [];
Ext.each(grid_data, function(obj) {
for (var prop in obj) {
new_data.push({
Property: prop,
Value: obj[prop]
});
}
}, this);