I want to catch 'dataBound' event in jQuery.
Requirement is such as that when databound event is fired in kendo-ui ,
I have to add some custom logic to DOM.
See for example Telerik API and events demo.
You need to configure the databound event, then add your logic to the javascript function.
<div id="grid"></div>
<script>
function dataBound(e) {
var grid = e.sender;
// Do your custom logic
}
$("#grid").kendoGrid({
columns: [
{ field: "name" },
{ field: "age" }
],
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
],
dataBound: "dataBound"
});
</script>
Related
Angular Datatable : Click to load json data to the datatable. Have json data in one variable and one button, and Once click on button, need to pass the json data and populate datatable. If button click, JSON data is not populated in datatable. Below code I tried, any issue pls suggest
ngOnInit(): void {}
loadJsonData() {
alert("inside");
const jsondata = [
{ id: 860, firstName: "Superman", lastName: "Yoda" },
{ id: 861, firstName: "xyz", lastName: "Abc" }
];
this.dtOptions[2] = {
data: jsondata,
columns: [
{
data: "id"
},
{
data: "firstName"
},
{
data: "lastName"
}
]
};
}
Working Stackblitz
I am using react-bootstrap-table2, to make tables, I have encounter an issue i.e
I want o have a checkbox inside my table, so I am following This, mention in the documentation, but I am getting unexpected result.
My code
For selecting the row
const selectRow = {
mode: 'checkbox',
clickToSelect: true,
classes: 'selection-row',
};
Table rendering
<BootstrapTable
keyField="id"
data={tableData[0].rowsData}
columns={tableData[0].columnsData}
selectRow={selectRow}
/>
I Think issue is coming because of my data, as it is nested one And I am rendering it, but I am not able to resolve it.
My data
let tableData = [
{
rowsData: [
{
fname: "john",
lname: "smith"
},
{
fname: "steve",
lname: "warn"
},
{
fname: "michel",
lname: "clark"
}
],
columnsData: [
{
dataField: "fname",
text: "First name",
sort: true
},
{
dataField: "lname",
text: "last Name",
sort: true
}
]
}
];
Here is my code sandbox link This
You're telling keyField="id" yet each of your rowsData has no id. Give each of them an id and it should work.
I'm trying to destroy the kendo-grid each time my component is destroy.
I found out here a way to do it but requires jquery that I don't use:
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
dataSource: [
{ name: "Jane Doe", age: 30 },
{ name: "John Doe", age: 33 }
]
});
var grid = $("#grid").data("kendoGrid");
grid.destroy();
</script>
Any one knows how to do it in angular 6 and typescript?
Thank you
I'm trying to display html in UI-Grid that is sent from the server. An example is my column header containing a tooltip's HTML that was created server side and concatenated to the string (for some reason). I need that to display as HTML but regardless of SCE setting, it still displays the HTML encoded. Here is an example that replicates my issue:
var app = angular.module('app', ['ngTouch', 'ui.grid']);
app.config(function($sceProvider){
$sceProvider.enabled(false);
});
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.gridOptions = {
columnDefs: [
{
displayName: "First Name",
field: "firstName",
cellFilter: "exampleFilter:this"
},
{
displayName: "First Name",
field: "lastName",
},
{
displayName: "First Name",
field: "company",
},
{
displayName: "First Name",
field: "employed",
}
]
};
$scope.gridOptions.data = [
{
"firstName": "Cox",
"lastName": "Carney",
"company": "Enormo",
"employed": true
},
{
"firstName": "Lorraine",
"lastName": "Wise",
"company": "<span>Comveyer</span>",
"employed": false
},
{
"firstName": "Nancy",
"lastName": "Waters",
"company": "Fuelton",
"employed": false
}
];
}]);
app.filter('exampleFilter', function ($sce) {
console.log($sce.isEnabled());
return function (value) {
return $sce.trustAsHtml("<span>Here</span>");
//return (isNaN(parseFloat(value)) ? '0.0' : Number(value).toFixed(2)) + "%";
}
});
This is my plunker demo
You need to combine a cellTemplate and sce.
{
displayName: "First Name",
field: "company",
cellTemplate: '<div ng-bind-html="COL_FIELD | trusted"></div>'
}
COL_FIELD is replaced by ui-grid to contain the right field binding. The cellTemplate uses ng-bind-html and the following trusted filter to display the unescaped HTML:
app.filter('trusted', function ($sce) {
return function (value) {
return $sce.trustAsHtml(value);
}
});
http://plnkr.co/edit/rOWDQkFrQh24DWmIbhZx?p=preview
If you want to render the html of a filtered field, you can do this:
cellTemplate: '<div class="ui-grid-cell-contents" ng-bind-html="grid.getCellDisplayValue(row ,col)"></div>'
You may need to install ngSanitize plugin to ng-bind-html work.
Here I have written stored procedure for getting CategoryName values based on id, Values are coming like India, America, Brazil up to service, But in UI section values are in automatically sorting in alphabetical order displaying groups like America, Brazil,India. I wanted to show as in order display like India, America, Brazil format. What am I doing wrong? Thanks in advance.
$(document).ready(function () {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "GET",
transport: {
read: {
url: "some url placed here",
dataType: "jsonp"
}
},
pageSize: 20,
serverSorting: false,
group: {
field: "CategoryName",
aggregates: [{
field: "abc",
aggregate: "count"
}, {
field: "def",
aggregate: "sum"
}, {
field: "ghi",
aggregate: "sum"
}]
},
aggregate: [{
field: "abc",
aggregate: "count"
}, {
field: "def",
aggregate: "sum"
}, {
field: "ghi",
aggregate: "sum"
}]
},
columns: [
//column section goes here.....
],
sortable: false
//...
});
});
I remember somewhere in the kendo ui documentation (may be datasource > groups) it said that, if you define groups, the grouping requires the sorted data.. Remove all your groups and display the data in plain vanilla grid and see if some automatic sorting is applied.
This is a complete guess, but have you tried setting the ServerSorting property to true?
Kendo UI Grid Grouping gives you ListSortDirection.Ascending sorting by default. If you want to do something else you have to set it. If you are using the WebApi interface and generating a kendoRequest for the Kendo.mvc.dll method .ToDataSourceResult(kendoRequest); then you may try something like this:
var sort = kendoRequest.Sorts.FirstOrDefault();
var group = kendoRequest.Groups.FirstOrDefault();
if(sort != null && group != null) {
if(sort.Member == group.Member && sort.SortDirection == ListSortDirection.Descending) {
kendoRequest.Groups[0].SortDirection = sort.SortDirection;
}
}
That way the Sort feature from the Grid affects the Group by column when they match.