I use Angular advanced searchbox to create a search box.But when adding suggestedValues into scope availableSearchParams it doesn't display suggestions and my modal get undefined.Please let me know what went wrong.
Scripts load order
angular-advanced-searchbox.min.css
angular-advanced-searchbox-tpls.min.js
angular-advanced-searchbox.min.js
app.js // contain app module
HTML
<div class="form-group">
<label class="col-md-2 col-lg-2 control-label"></label>
<div class="col-md-10 col-lg-10">
<nit-advanced-searchbox ng-model="searchParams" parameters="availableSearchParams" placeholder="Search..."></nit-advanced-searchbox>
<pre><code>{{searchParams}}</code></pre>
</div></div>
App.Js
$scope.availableSearchParams = [
{ key: "team", name: "Team", placeholder: "filter by team", restrictToSuggestedValues: true, suggestedValues: ['Berlin', 'London', 'Paris'] },{ key: "testtype", name: "TestType", placeholder: "filter by test type",restrictToSuggestedValues: true, suggestedValues: ['Smoke', 'Regression', 'Benchmark'] }, { key: "text", name: "Text", placeholder: "filter by text" } ];
$scope.$on('advanced-searchbox:modelUpdated', function (event, model) {
console.log(model);
});
You must include ui.bootstrap in your module, before angular-advanced-searchbox:
angular.module('SensacionalApp', [
'ngMaterial',
'ui.bootstrap',
'angular-advanced-searchbox'
]);
Related
I am trying to load data from the grid inside tooltip. This tooltip is generated once the user hovers on first column inside ui-grid. I want to use bootstrap and html of tooltip is displaying as required. I have tried several ways but now the data is not showing.
Please see the attached picture. I want actual value of {{row.entity.Status}}
Please see the current code for reference
https://codepen.io/brainzest/pen/bmqgLy?editors=0011
angular.module('GridDemo', ['ngTouch', 'ui.grid', 'ui.grid.cellNav', 'ui.grid.pinning']).controller('MainCtrl', function($scope,uiGridConstants,$sce){
$scope.equipData = [
{ Status: "Maintenance",
PackageName: "Package 1",
Hours: "15,000",
},
{ Status: "Running",
PackageName: " Package 2",
Hours: "15,000",
},
{ Status: "Running",
PackageName: "Package 3",
Hours: "15,000",
},
{ Status: "Running",
PackageName: "Package 4",
Hours: "15,000",
},
];
$scope.gridOptions = {
enableSorting: true,
enableColumnResizing : true,
enableColumnMenus:false,
columnDefs: [{ field: 'PackageName', cellTemplate:'<div data-toggle="tooltip" title="\<table class=table-borderless><tbody><tr><td class=gray>Status</td><td class=yell>Data 2</td></tr><tr><td class=gray>Status</td><td class=yell>{{row.entity.Status}}</td></tr></tbody></table>" data-html="true" data-placement="right" ><div class="ui-grid-cell-contents">{{ COL_FIELD }}</div></div>'},
{ field: 'Hours'}],
data:$scope.equipData
};
}).directive('toggle', function(){
return {
restrict: 'A',
link: function(scope, element, attrs){
if (attrs.toggle=="tooltip"){
$(element).tooltip();
}
}
};
});
if you are looking for something more angular you should do it this way:
<div class="grid-tooltip" tooltip="{{row.entity.Status}}" tooltip-placement="left">
<div class="ui-grid-cell-contents">
{{ COL_FIELD }}
</div>
</div>
Does angular-schema-form have a method to show preselected values?
When the titleMap on the select will set an integer, preselected values will show. But if it will set an object, I found no way of showing the correct name.
Is there anything to tie the object to, like with ng-options where you can set an attribute to compare them with the "track by" clause?
ng-options="option as option.name for option in array track by option.id"
In my example code, cats1 will set an object, cats2 will set an integer.
HTML:
<body>
<div ng-controller="MainCtrl">
<div class="login-container">
<form name="myForm"
sf-schema="schema"
sf-form="form"
sf-model="model">
</form>
</div>
</div>
</body>
Controller:
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.form = [
{
key: 'cats1',
type: 'select',
titleMap: [
{value: {id: 0, name: "Leopard"}, name: "Leopard"},
{value: {id: 1, name: "Tiger"}, name: "Tiger"}
]
},
{
key: 'cats2',
type: 'select',
titleMap: [
{value: 0, name: "Leopard"},
{value: 1, name: "Tiger"}
]
}
];
$scope.schema = {
"type": "object",
"properties": {
"cats1": {
"title": "Cats",
"type": "object"
},
"cats2": {
"title": "Cats",
"type": "number"
}
}
};
$scope.model = {cats1: {id: 1, name: "Tiger"}, cats2: 1};
}]);
Here is a plunkr:
https://plnkr.co/edit/0hK5Hrc9GXklfRwa6fjE?p=preview
I have kendo-grids in Angular ng-Repeat and serach options on the grids data.
I want to refresh the grids on search.
This is my code and it doesn't refresh the grids ($("#kendoGrid1").data("kendoGrid") is undefined), what Is the fix for this?
html
<article ng-repeat="(key,val) in gridsResult" >
<h2 class="tableTitle">{{key}}</h2>
<div kendo-grid="kendoGrid{{$index}}" k-options="getGridSlice('{{key}}')"></div>
</article>
js
$scope.getGridSlice = function (index) {
var data = $scope.gridsResult[index];
return {
dataSource: {
data: data
}
},
columns: [
{ field: "aa", title: " ", attributes: { "class": "k-header",style:"text-align:center;" }, width:"33px" },
{ field: "bb", title: "IF", template: rowTemplate.replace(/XX/g, 'IF')}
],
scrollable: false,
noRecords: true,
}};
scope.onSearch function -
$("#kendoGrid1").data("kendoGrid").datasource.read();
I found the answer!
The $digest dosen't work on functions so I added k-data-source based on a scope parameter not scope function.
(you need to pull the data from the DB grouped by the grids category)
<article class="tradescreenTable" ng-repeat="(key,val) in gridsResult" ng-class="{'bestAverage': bestAverageSelected}">
<h2 class="tableTitle">{{key}}</h2>
<div kendo-grid k-data-source="{{val}}" k-options="gridOptions"></div>
</article>
And k-options
$scope.gridOptions = {
columns: [
{ field: "aa", title: " ", attributes: { "class": "k-header",style:"text-align:center;" }, width:"33px" },
{ field: "bb", title: "IF", template: rowTemplate.replace(/XX/g, 'IF')}
],
scrollable: false,
noRecords: true,
};
You also need to refresh the grid:
$("#kendoGrid1").data("kendoGrid").datasource.read();
$("#kendoGrid1").data("kendoGrid").refresh();
kendo-grid="kendoGrid{{$index}}" binds the grid to the $scope - you don't need to use jQuery for this (and besides, you're not setting an id on the DOM element, so $("#kendoGrid1") is never going to work with your code as it is now).
$scope.kendoGrid1.datasource.read();
The one caveat to this is that I haven't ever tried dynamically setting the name for a Kendo Grid, so I'm not 100% that it works.
I'm using a Kendo UI Grid with AngularJS. The grid has a 'popup' mode editable kendo template. The grid invokes the create, destroy & delete functions; however the update function won't get called. Strangely when I change the edit mode to 'inline', the update function is called. Below are the code snippets from my application :
Main UI Grid:
<div class="container-fluid">
<kendo-grid style="margin-top: 2em" k-options="ctrl.fundGridOptions" k-scope-field="kgrid" id="myGrid"></kendo-grid>
</div>
Edit Template:
<script id="edit-template" type="text/x-kendo-template">
<div class="container">
<div class="well">
Fund :
<select kendo-drop-down-list k-options="ctrl.fundOptions" style="width: 130px;" ng-model="dataItem.GenevaId"></select>
<!--<select kendo-drop-down-list k-data-source="ctrl.funds" style="width: 130px;" ng-model="dataItem.GenevaId"></select>-->
NAV Change Threshold
<input kendo-numeric-text-box k-min="0" k-max="100" k-ng-model="value" style="width: 60px;" ng-model="dataItem.NAVThreshold" />
NAV Source
<select k-data-source="ctrl.navSources" kendo-drop-down-list k-option-label="'-Select-'" style="width: 130px;" ng-model="dataItem.NAVSource"></select>
Frequency
<select k-data-source="ctrl.frequencyList" kendo-drop-down-list k-option-label="'-Select-'" style="width: 130px;" ng-model="dataItem.Frequency"></select>
Type
<select k-data-source="ctrl.typeList" kendo-drop-down-list k-option-label="'-Select-'" style="width: 130px;" ng-model="dataItem.Type"></select>
</div>
<div kendo-grid="ctrl.currencyKendoGrid" style="margin-top: 2em" k-options="ctrl.currencyGridOptions"></div>
</div>
</script>
Grid Options:
ctrl.fundGridOptions = {
dataSource: {
transport: {
update: function (options) {
DataSvc.updateFund(e.data).then(function (response) {
e.success(e.data);
});
},
},
schema: {
model: {
id: "FundId",
fields: {
FundId: { type: "number", editable: false, nullable: true },
GenevaId: { type: "string", editable: true },
NAVThreshold: { type: "number", editable: true },
NAVSource: { type: "string", editable: true },
Frequency: { type: "string", editable: true },
Type: { type: "string", editable: true },
}
}
},
},
sortable: true,
columns: [
{ field: "GenevaId", title: "Fund Name" },
{ field: "NAVThreshold*100", title: "NAV Threshold", template: '#=kendo.format("{0:p}", NAVThreshold)#' },
{ field: "NAVSource", title: "NAV Source" },
{ field: "Frequency", title: "Frequency" },
{ field: "Type", title: "Type" },
{ command: ["edit", "destroy"], title: " " }
],
detailTemplate: kendo.template($("#detail-template").html()),
detailInit: function (e) {
kendo.bind(e.detailRow, e.data);
},
dataBound: function (e) {
var grid = e.sender;
if (grid.dataSource.total() == 0) {
var colCount = grid.columns.length;
$(e.sender.wrapper)
.find('tbody')
.append('<tr class="kendo-data-row"><td colspan="' + colCount + '" class="no-data">Sorry, no data :(</td></tr>');
}
},
editable: {
mode: "popup",
template: kendo.template($("#edit-template").html()),
window: {
title: "Edit Fund Details",
animation: false,
height: "600",
width: "1200"
}
},
edit: function (e) {
if (e.model.Currencies)
ctrl.currencyKendoGrid.dataSource.data(e.model.Currencies);
},
toolbar: [
{
name: 'create',
text: 'Add Fund',
}],
};
Could anyone help me understand the reason why the 'update' function won't be called in 'popup' mode, but gets called in 'inline' mode ? Appreciate any responses in advance.
I know this is question old, but I came across it searching for an answer. I think the issue might be that your (and my) edit template uses ng-model binding to edit the dataItem ie we're using angularjs. This doesn't actually seem to change the dirty property on the dataItem. I solved the issue by using ng-change on each control. It's a pain, but seems to work.
<input id="Title" type="text" class="k-textbox" ng-model="dataItem.Title" ng-change="dataItem.dirty=true"/>
How to use ng-options.
$scope.fieldTable = [
{
filed:"text",
title:"Global"
},
{
field: "relatedentity",
title: "Entity"
},
{
field:"title",
title:"Title"
},
{
field: "content",
title: "Content"
}
]
I want to build a which use the title as displayed and when select something, popout a alert window which display the according field. The initial selection is
{
filed:"text",
title:"Global"
}
Can anyone help?
var app = angular.module('stack', []);
app.controller('MainCtrl', function($scope) {
$scope.fieldTable = [{
field: "text",
title: "Global"
}, {
field: "relatedentity",
title: "Entity"
}, {
field: "title",
title: "Title"
}, {
field: "content",
title: "Content"
}];
$scope.selected = $scope.fieldTable[0];
$scope.hasChanged = function() {
alert($scope.selected.field);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="stack" ng-controller="MainCtrl">
<select ng-options="item.title for item in fieldTable" ng-model="selected" ng-change="hasChanged()">
</select>
</body>
You can use ng-change to do that
<select ng-options="item.title as item.title for item in fieldTable track by item.title" ng-model="selected" ng-change="onChanged()">
then in your onChange() method in the controller you can do whatever you want it to do :) In your case , show an alert with the value
edit:
https://plnkr.co/edit/4csDtFVH5mKd7Xr39WtG?p=preview