I'm using Ag-Grid to try and display a series of search results from a database. Almost everything works, the grid table appears, the search field, button, etc. all work, the correct REST interface is called and the data is returned as a Java List...for the example I'm using there are 16 results, and when I run the search what I basically see is 16 blank rows appear in the grid. It seems that it's getting as far as realizing it needs to populate the 16 entries, but something I've misconfigured prevents it from doing so. The event listener even works and kicks off the proper method, it's just that since nothing appears in the individual rows, the arg it collects is just null. Does anyone know what I'm doing wrong? Thanks!
Here is the HTML:
<div id="SearchTable" ng-controller="docSearch">
<div class="searchlabel">
Search Keyword Libraries<br> Search: <input name="searchField"
placeholder="Search..." type="text" ng-model="data.searchField" />
<button ng-click='searchKeywordLibs(data.searchField)'>Find</button>
<br>
</div>
<div ag-grid="SearchKeywordsTableGrid"
style="width: 500px; height: 200px;" class="ag-fresh"></div>
<div ng-if="status" id="status">
<b layout="row" layout-align="start center" class="md-padding">
</b>
</div>
</div>
Here is the grid definition:
$scope.SearchKeywordsTableGrid = {
columnDefs : [ {
headerName : 'Keyword Library Name',
editable : false,
filter: 'text'
},
{
headerName : 'Path',
editable : false,
filter: 'text'
},
],
rowSelection: 'single',
enableSorting: true,
enableColResize: true,
enableFilter: true,
suppressLoadingOverlay: true,
suppressNoRows: true,
sizeColumnsToFit: true
};
And here is the controller function:
$scope.searchKeywordLibs = function(search_term) {
$http.get('/trm/get_keyword_search_results?search_term='+search_term).success(
function(data) {
$scope.data = data;
$scope.SearchKeywordsTableGrid.api.setRowData($scope.data);
// add event listener
if($scope.SearchKeywordsTableGrid.api != 'undefined') {
$scope.SearchKeywordsTableGrid.api.addEventListener('rowDoubleClicked', openSearchResultPage);
}
});
};
Okay Jarod's comment steered me to where I needed to be...it was a simple flub, I didn't have the field attributes defined in the column definitions. It should have been:
$scope.SearchKeywordsTableGrid = {
columnDefs : [ {
headerName : 'Keyword Library Name',
field: 'name',
editable : false,
filter: 'text'
},
{
headerName : 'Path',
field: 'path',
editable : false,
filter: 'text'
},
],
rowSelection: 'single',
enableSorting: true,
enableColResize: true,
enableFilter: true,
suppressLoadingOverlay: true,
suppressNoRows: true,
};
Thanks!
Related
Having Issues with getting the data for my ui grid? Not sure what I'm doing wrong here, but I console.log the data so I know i'm getting it back.
My data is coming back as a object and i'm trying to reach the team members array in the object to reference.
function loadProjectDetails(){
return MrktRsrchPrjtDataService.getProjectSubsection(MrktRsrchPrjtDataService.getCurrentReportId(), "ProjectSummary")
.then(function (data){
vm.project = data;
console.log(data);
vm.teamGridOptions = {
enableGridMenu: false,
enableSorting: true,
enableHorizontalScrollbar: 0, /*always hide horizontal scroll bar*/
enableVerticalScrollbar: 1, /*always show vertical scroll bar*/
rowHeight: 46,
columnDefs: [
{
enableHiding: false,
enableColumnMenu: false,
displayName: 'First Name',
field: 'memberId',
cellClass: 'ui-grid-cell-contents',
cellTemplate: '<span>{{row.entity.teamMembers.memberId}}</span>'
},
],
data: vm.project
};
});
}
//HTML
<div ui-grid="vm.teamGridOptions" ui-grid-auto-resize class=""></div>
In the html you call vm.teamGridOptions. What is the name of your controllor? AngularJS convention is to name the controller "ctrl", so this would mean you should be calling ctrl.teamGridOptions.
I have bootstrap table which fetches data from mysql db where I am having Boolean values which I want to display as YES or NO instead of 1 or 0 in my bootstrap table. My JS bootstrap table code
var $table = $('#table');
$table.bootstrapTable({
url: 'list-user.php',
search: true,
pagination: true,
buttonsClass: 'primary',
showFooter: true,
minimumCountColumns: 2,
columns: [{
field: 'num',
title: '#',
sortable: true,
}, {
field: 'first',
title: 'Available',
sortable: true,
},],
});
I am a learner, tried various online solutions but couldn't make it work.
Use the formatter function - for example
function formatYesNo(value,row,index){
return value==0 ? 'No' : 'Yes';
}
Define your column formatter like this:
formatter: formatYesNo,
See this JSFiddle
I am trying to use Kendo UI Grid with angular js. I need to expand the grid to further level when user clicks a link given in one of the columns of the grid.
I used following code to expand the grid on click of an tag inside a kendo grid column.
$scope.mainGridOptions = {
dataSource: {
data: $scope.data,
schema: {
model: {
fields: {
fieldA: { type: "string" },
fieldB: { type: "string" },
fieldC: { type: "string" },
fieldT: { type: "numeric" }
}
}
},
pageSize: 10
},
filterable: true,
sortable: true,
resizable: true,
pageable: true,
scrollable: true,
columns: [
{ field: "fieldA", title: "FieldA", width: 90},
{ field: "fieldB", title: "FieldB", width: 90},
{ field: "fieldC", title: "FieldC", width: 90},
{ field: "fieldT", title: "FieldT", width: 90, template: "<a onclick='expand(this)'href='\\#'>#=mydata#</a>"}
]
};
But on running the code it just gives me an error in the browser console window.
Uncaught ReferenceError: expand is not defined at
HTMLAnchorElement.onclick
I researched and found that Kendo doesn't supports onclick event inside an tag. Therfore tried to use tag instead of tag. But it still does not work.
{ field: "fieldT", title: "FieldT", width: 90, template: "<span ng-click='showFileLevel(this)>{{mydata}}</span>"}
Can anyone please guide me in the right direction or let me know how can I expand a Kendo grid to further levels on clicking text inside a certain column of the grid using Angular JS.
you write expand(this) method out of the controller in your js.
I am showing data usingui-grid.
The ui-grid has three columns. The first column is contains checkbox for each row.
Data populating correctly, row selection works fine except the following issue.
Problem:
When row clicked, the checkbox should also be selected. How i can achieve this? Any Idea?
html
<div class="row">
<div class="col-lg-12">
<div class="datalist-uigrid testGrid">
<div class="grid testGrid" ui-grid="gridOptions" ui-grid-selection ui-grid-auto-resize></div>
</div>
</div>
</div>
Controller
This is how i am defining my field.
{
field: 'selected',
displayName: '',
type: 'boolean',
cellTemplate: uiGridTemplates.cellTemplates.buildCheckboxEditCell('row.entity.IsOneOff', 'row.entity.selected', ' ng-change="grid.appScope.onSelectChange()"'),
enableFiltering: false,
enableSorting: false,
width: '3%'
},
gridOptions
$scope.gridOptions = {
enableRowSelection: true,
enableRowHeaderSelection: false,
enableCellEdit: false,
enableCellEditOnFocus: false,
enableSorting: true,
enableFiltering: true,
multiSelect: false,
enableColumnMenus: false,
enableGridMenu: false,
rowHeight: 60,
modifierKeysToMultiSelect: false,
noUnselect: true,
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
}
};
This is how i am intercepting row click event
$scope.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.selection.on.rowSelectionChanged($scope, function (row) {
$scope.onSelectRowChange(row.entity);
var msg = 'row selected ' + row.isSelected;
});
};
By default the selection module provides a row header with checkboxes that allow selection of individual rows.
This can be done using enableRowHeaderSelection: true,
If you set the enableRowHeaderSelection in gridOption to false, then the row header is hidden and a click on the row will result in selection of that row.
If you want to allow both clicking on the row, and also clicking on the rowHeader, you can set enableFullRowSelection to true.
Please follow this tutorial for details:
Row Selection
<kendo-grid-column field="IsChecked" class="uk-text-center">
<template kendoGridCellTemplate let-dataItem>
<input type="checkbox" [checked]="dataItem.IsChecked" (click)="SelectCheckbox()" (change)="dataItem.IsChecked = !dataItem.IsChecked" />
</template>
</kendo-grid-column>
I'm working with Kendo UI and Knockout JS libraries and have a strange problem.
I'm trying to display kendo grid within kendo window, but the rows inside the grid get duplicated.
Here's a piece of code:
JS:
$(document).ready(function () {
var clients = { FilteredClients: [{ ClientName: '1', ClientCode: 'Value 1' }, { ClientName: '2', ClientCode: 'Value 2'}], Header: 'TEST' };
var viewModel = ko.mapping.fromJS(clients);
ko.applyBindings(viewModel);
var showClientLookupWindow = function () {
var window = $("#clientLookupWindow").data("kendoWindow");
window.center();
window.open();
}
$('#btnClientLookup').bind('click', showClientLookupWindow);
});
HTML:
<div>
<a id="btnClientLookup" href="#" class="k-button k-button-icontext k-grid-search"><span
class="k-icon k-search"></span>Client Lookup</a>
<span data-bind="text: Header"></span>
<div id="clientLookupWindow" data-bind="kendoWindow: { isOpen: false, visible: false, width: '600px', height: '230px', modal: true, resizable: false, title: 'Client Lookup'}">
<div id="gridClients" data-bind="kendoGrid: { data: FilteredClients, columns: [ { field: 'ClientName', title : 'Client Name' }, { field: 'ClientCode', title: 'Client Code' } ], scrollable: false, sortable: true, pageable: false }">
</div>
</div>
<div id="gridClientsOutside" data-bind="kendoGrid: { data: FilteredClients, columns: [ { field: 'ClientName', title : 'Client Name' }, { field: 'ClientCode', title: 'Client Code' } ], scrollable: false, sortable: true, pageable: false }">
</div>
</div>
Running it in the browser, we see that there are 2 rows in gridClientsOutside, but after clicking btnClientLookup, the window pops up with the gridClients, which consists of 4 rows.
Did anyone encounter this issue or have a workaround for this?
Thanks in advance,
Ihor
At a quick glance, it looks like the bindings inside the kendoWindow section are getting bound twice, which is causing the issue.
There bindings can run in an async mode and that is probably how kendoWindow should be set in the knockout-kendo library.
For the moment, you can do this:
<div id="clientLookupWindow" data-bind="kendoWindow: { async: true, isOpen: false, visible: false, width: '600px', height: '230px', modal: true, resizable: false, title: 'Client Lookup'}">
This adds async: true in the kendoWindow binding options. Otherwise, you could do ko.bindingHandlers.kendoWindow.options.async = true; to set it globally, before calling applyBindings.
Here is a sample: http://jsfiddle.net/rniemeyer/2MexC/