hi guys i have a couple of questions about ng-grid,
this is my grid-options
$scope.gridOptions= {
data:'data',
selectedItems:sel,
multiSelect:false,
columnDefs: [{ field: 'field1', displayName: 'field1',cellTemplate: template, cellClass:'cellToolTip'},
{field:'field2', cellTemplate: template, visible:false},
{ field:'field3', displayName:'field3', cellTemplate: template, cellClass:'cellToolTip' },
{ field: 'field4', displayName: 'field4',cellTemplate: templatetest} ,
{ field: 'dataInserimento', displayName: 'Data richiesta',cellTemplate: template, cellClass:'cellToolTip'} ,
{ displayName: 'field5', cellTemplate:'<div ><button ng-diasbled="pdfenabled" ng-click="reportpdf()"><i class="glyphicon glyphicon-file"></i></button></div>', cellClass:'gridCell' }]
}
}
and the two possible cell template are these
var template = '<div class="ngCellText" ng-class="col.colIndex()"><a id="gridField" ng-cell-text>{{row.getProperty(col.field)}}</a></div>';
var templatetest = '<div ng-disabled="enabled" class="ngCellText" ng-class="col.colIndex()"><a id="gridField" ng-cell-text>{{row.getProperty(col.field)}}</a></div>'
the data array is something similar to that one
[{field1:'something',
field2:'something',
field3:'something',
field4:[{otherstuff:'something',morestuff:'something'}],
field5:'something'}
{field1:'something',
field2:'something',
field3:'something',
field4:[{otherstuff:'something',morestuff:'something'}],
field5:'something'}
{field1:'something',
field2:'something',
field3:'something',
field4:[{otherstuff:'something',morestuff:'something'}],
field5:'something'}
}]
so the first problem is: how can i display the elements in the field4 field not like an array? is it possible to get only one or both values?
second question, it is possible to use a cell field property for another cell bind?
for example
if(field3==false){
$scope.enabled=true;
}
Write your template like this:
var templatetest = '<div ng-disabled="enabled" class="ngCellText" ng-class="col.colIndex()" ng-bind="row.getProperty(col.field)[0].otherstuff"></div>';
Look at this Plunker
Or even better you could use a filter:
app.filter('somefilter', function() {
return function(x) {
return x[0].otherstuff + ' / ' + x[0].morestuff;
};
});
in combination with this template:
var templatetest = '<div ng-disabled="enabled" class="ngCellText" ng-class="col.colIndex()" ng-bind="row.getProperty(col.field)|somefilter"></div>';
Look at this Plunker
Or (this includes the Answer to your second question) use row.entity to look up the full rowdata:
var templatetest = '<div ng-disabled="enabled" class="ngCellText" ng-class="col.colIndex()"> {{row.entity.field4[0].otherstuff+"/"+row.entity.field3}}</div>';
Here's the final Plunker
Hope you can get on with this.
Related
In a single javascript file I have the following kendo grid option.
var relatedJobsGridOptions = ko.observable({});
//I am seeing message, javascript function is never used :(
function getName(name) {
return name;
}
relatedJobsGridOptions({
columns: [
{ field: 'name', title: 'Customer Name ', width: '160px' },
],
dataSource: OccData,
rowTemplate: (
'<tr style="background-color: rgb(246,246,246)" data-uid="#= uid #">' +
'<td>#=getName(name)# </td>' +
'</tr>'
),
overflow: false
});
How I can call the javascript function inside this rowTemplate?
I have referred few telerik forums, but as for as I searched none is matching my condition (My poor research :( I am completely got stuck here..)
Any suggestion would be helpful to me.
Just use a string interpolation:
function getName (name) {
return `<strong>${name}</strong>`
}
const rowTemplate = `
<tr style="background-color: rgb(246,246,246)" data-uid="#= uid #">
<td>#= ${ getName('some name') } #</td>
</tr>
`.trim()
console.log(rowTemplate);
I am trying to achieve Multiselect dropdown with checkboxes by using selectiz.js. I am able to customize my dropdown using render option in selectize. However if i click one of the checkboxes it will click all the others checkboxes which is not desired. I understand that this is because all the options are binded to one ng-model. I tried to make it dynamic but everything seems to fail Under selectize render options. I will really appreciate if some one can help me with this issue. I have tried to put the simplest version here. Also please note I amusing Icheck plugin for checkboxes.
<html ng-app="checkBoxes">
<head>
<body ng-controller="selectizeDropdownCtrl">
<h2 class="header">Multi Selelct</h2>
<input id="dropdown" config="assigneeConfig" options="assigneesOptions" position="bottom" ng-model="model" selectize/>
</body>
"use strict";
angular.module('checkBoxes')
.controller('selectizeDropdownCtrl',
function ($rootScope, $scope, $compile) {
//================================================================
// Initialize Data
//================================================================
$scope.assigneesOptions = [
{
"id": "1",
"name": "Mercury, Freddie"
},
{
"id": "2",
"name": "Morty, Rick"
}
];
$scope.assigneeConfig = {
autoBind: true,
valueField: 'id',
labelField: 'name',
maxItems: null,
placeholder: 'Select...',
render: {
option: function (item, escape) {
var html= '<div class="option">' +
'<div class="uk-input-group">'+
'<span class="uk-input-group-addon"><input type="checkbox" ng-model= "checkboxesModel" icheck/></span>'+
' <span class="name">' + escape(item.name) + '</span>'++
'</div>';
return $compile(html)($scope)
}
},
};
});
I want to add some custom field in columnDefs and want to access it from header template.
As an example , i want a field let say showFile
$scope.gridOptions.columnDefs = [
{
name: 'ServiceID',
displayName: 'Service',
showFile: some data
}]
and want to access showFile inside header template ...
<div class="ui-grid-top-panel" style="text-align: center">
{{ want to access 'showFile' }}
</div>
What's the best possible way to do this. As i have tried it using custom method as
<div class="ui-grid-top-panel" style="text-align: center">
{{grid.appScope.letter()}}
</div>
(plnkr link http://plnkr.co/edit/ZW43LsiLY7GdnX6XEOgG?p=preview ,
http://plnkr.co/edit/3E8HTz4Z2daGqRh1WHtx?p=preview) but , the function (grid.appScope.letter()) is being called for infinite number of times . I have raised the issue but didn't got any reply .. https://github.com/angular-ui/ui-grid/issues/4250 , https://github.com/angular-ui/ui-grid/issues/4314. Can anyone please suggest the best possible way to achieve the above mentioned task.
Try using renderIndex. This will give you the column's index.
{{grid.appScope.gridOptions.columnDefs[renderIndex].customField}}
To access showFile in there, have you tried...
{{grid.appScope.gridOptions.columnDefs[0].showFile}}
I edited the plnkr: http://plnkr.co/edit/kdU59pZYQT0B76vYBQC8?p=preview.
I'm not sure if that's what you want to do, i used the headerCellTemplate in the columnDefs object instead of the headerTemplate, then you access with: {{col.colDef.showFile}}
columnDefs: [{
field: 'name',
displayName: 'First Name',
width: 90
}, {
field: 'title',
displayName: 'Last Name',
width: 80
}, {
field: 'test',
displayName: 'test',
width: 80,
showFile: 'FILE',
headerCellTemplate: '<div ng-class="{ \'sortable\': sortable }">' +
'<div class="ui-grid-cell-contents" col-index="renderIndex" title="TOOLTIP">' +
'<span>{{ col.displayName CUSTOM_FILTERS }}</span><br /><span>{{col.colDef.showFile}}</span>' +
'<span ui-grid-visible="col.sort.direction" ng-class="{ \'ui-grid-icon-up-dir\': col.sort.direction == asc, \'ui-grid-icon-down-dir\': col.sort.direction == desc, \'ui-grid-icon-blank\': !col.sort.direction }">' +
' ' +
'</span>' +
'</div>' +
'<div class="ui-grid-column-menu-button" ng-if="grid.options.enableColumnMenus && !col.isRowHeader && col.colDef.enableColumnMenu !== false" ng-click="toggleMenu($event)" ng-class="{\'ui-grid-column-menu-button-last-col\': isLastCol}">' +
'<i class="ui-grid-icon-angle-down"> </i>' +
'</div>' +
'<div ui-grid-filter></div>' +
'</div>'
}
I have a select box which is populated with some data from my controller. When an input value changes the contents of the select box should be filtered and a default value should be assigned based on the is default property of the data object.
Is there any way this can be done using angular directives or would it need to be done as a custom filter function doing something along the lines of
angular.forEach(vm.data,function(item){
if (vm.q == item.someId && item.isDefault) {
vm.result = item.value;
}
});
My html looks something like
<div ng-app="myApp" ng-controller="ctrl as vm">
<input type="text" ng-model="vm.q">
<select ng-options="item.value as item.description for item in vm.data | filter:{someId:vm.q}" ng-model="vm.result"></select>
</div>
and my controller looks like:
(function(){
angular.module('myApp',[]);
angular
.module('myApp')
.controller('ctrl',ctrl);
function ctrl()
{
var vm = this;
vm.data = [
{
someId: '1',
description: 'test1',
value: 100,
isDefault: true
},
{
someId: '2',
description: 'test2',
value: 200,
isDefault: false
},
{
someId: '3',
description: 'test3',
value: 100,
isDefault: true
},
];
}
})();
See my plunkr demo here: http://plnkr.co/edit/RDhQWQcHFMQJvwOyHI4r?p=preview
Desired behaviour:
1) Enter 1 into text box
2) List should be filtered to 2 items
3) Select box should pre-select item 1 based on property isDefault set to true
Thanks in advance
I'd suggest you include some 3rd party library, like lodash, into your project to make working with arrays/collections that much easier.
After that you could add ng-change directive for your input.
<input type="text" ng-model="vm.q" ng-change="vm.onChange(vm.q)">
And the actual onChange function in the controller
vm.onChange = function(id) {
var item = _.findWhere(vm.data, { someId: id, isDefault: true });
vm.result = item ? item.value : null;
};
And there you have it.
I am working on Extjs 4.1. I did implement an autocomplete feature for the text box. I'm now able to search for student's first or last name by entering a term, for example: Mat, and the result in text field would be:
Mathio,Jay << student's first and last name
Mark,Matt << student's first and last name
Then, I made some changes on the query so that i can get the subjects too when i search for one:
Mathio,Jay << student's first and last name
Mark,Matt << student's first and last name
Mathematics << subject
Here is my new query:
Query to search in multiple tables + Specify the returned value
Now, what i need is reconfigure the other parts so the field can display both cases, names and subjects
Here is my combo config:
,listConfig: {
loadingText: 'Loading...',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<tpl if="l_name.length == 0"> ',
'<div class="x-boundlist-item">{f_name}<p><font size="1">Last Name: Unknown </font></p></div>',
'<tpl else>',
'<div class="x-boundlist-item">{f_name}<p><font size="1">{l_name}</font></p></div>',
'</tpl>',
'</tpl>'
),
and my model:
Ext.define("auto", {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: 'auto.php',
reader: {
type: 'json',
root: 'names',
autoLoad: true,
totalProperty: 'totalCount'
}
},
fields: ['f_name','l_name'
, {
name : 'display',
convert : function(v, rec) {
return rec.get('f_name') + ',' + rec.get('l_name');
}
}
]
});
I tried many times but still can't reach a good way to do it.
IMO you'd better use a simple model with only a 'name' field, and populate this field on the server-side. From your previous question, the server code would look like (in your query processing loop):
if (isset($row[2])) { // if the query returned a subject name in the row
$name = 'Subject: ' . $row[2];
} else if (isset($row[1])) { // if we have the last name
$name = 'Student: ' . $row[0] . ', ' . $row[1];
} else { // we have only the first name
$name = 'Student: ' . $row[0] . ' (Uknown last name)';
}
$names[] = array(
'name' => $name,
);
On the client-side, you would use a model with a single name field, and configure your combo box accordingly:
// Your simplified model
Ext.define('Post', {
extend: 'Ext.data.Model'
,fields: ['name']
,proxy: {
// Your proxy config...
}
});
Ext.widget('combo', {
displayField: 'name'
,valueField: 'name'
// Remaining of your combo config...
});
However, if you really want to mix students and subjects data in one single model, here are the modification you should do on your current code. First, you need to retrieve the subject name from the server. That means changing your server code to something like:
$names[] = array('f_name' => $row[0], 'l_name' => $row[1], 'subject' => $row[2]);
Then you need to add this field in your model on the client side, and adapt your display field's convert method to account for subject:
Ext.define('Post', {
extend: 'Ext.data.Model'
,fields: ['f_name', 'l_name',
'subject', // Add the subjet field to the model
{
name: 'display'
// Adjust your convert method
,convert: function(v, rec) {
var subject = rec.get('subject'),
lastName = rec.get('l_name'),
firstName = rec.get('f_name');
if (!Ext.isEmpty(subject)) {
return subject;
} else {
if (Ext.isEmpty(lastName)) {
return firstName + ' (Unknown last name)';
} else {
return firstName + ', ' + lastName;
}
}
}
}
]
,proxy: {
// Your proxy config...
}
});
Finally, since you already do that work in the display field of the model, you should use it as the displayField of the combo instead of doing it again in the combo's template.
E.g. combo config:
{
displayField: 'display'
,valueField: 'display'
// Remaining of your combo config...
}