I'm trying to add custom column filter (autocomplete, select ...) but can't find how. I tried to override default filter template with a tr-ng-grid-column-filter attribute on a th, but it does not works. Header is changed somehow (title is not bold anymore) and the new template is not used at all.
Is the tr-ng-grid-column-filter right way to do it at all or there is something else?
Data is sorted, paginated and filtered on the server so it does not have any relation to angular or trnggrid client side filtering & formating. So I just want to display some other input on some columns (e.g. select) instead of default input text rendered by a grid.
I'm using angular 1.2.22 with TrNgGrid 3.0.3
There are some samples floating around the net. Here's one:
http://plnkr.co/edit/I6JJQD?p=preview
<table tr-ng-grid='' items='myItems'>
<thead>
<tr>
<th field-name="name"></th>
<th field-name="computedTagsField" display-format="computedTags:gridItem">
<div>
<div class="tr-ng-title">Tags</div>
<div class="tr-ng-column-filter">
<select class="form-control input-sm" ng-options="tag for tag in [null, 'tennis', 'basketball', 'volley']" ng-model="columnOptions.filter"></select>
</div>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td field-name="computedTagsField"></td>
</tr>
</tbody>
</table>
I created a directive to implement a custom drop down filter. It, in itself, can be reused on any project, but it will also give you a good working example of how to implement your own custom filter by simply extending TRNG grid.
Tutorial:
http://www.davidcline.info/2015/08/trnggrid-dropdown-column-filter.html
Demo:
http://embed.plnkr.co/w39Xt74pippDajyqUIOD/preview
Related
I'm trying to make an accessible calendar plugin where you can write the date in the input by hand or select it from a table. I'm using WAI-ARIA and I think I'm following the instructions correctly but the Chrome Developer Tools Accessibility audit gives me an error seen below
Instructions:
https://www.w3.org/TR/wai-aria-1.1/#combobox
https://www.w3.org/TR/wai-aria-1.1/#grid
Example:
https://www.w3.org/TR/wai-aria-practices-1.1/examples/combobox/aria1.1pattern/grid-combo.html
Error:
https://i.stack.imgur.com/OIX1f.png
My code:
<div class="container">
<label for="comboboxtextbox">the label</label>
<div role="combobox" aria-expanded="true" aria-owns="comboboxgrid" aria-haspopup="grid">
<input role="textbox" aria-multiline="false" id="comboboxtextbox" type="text" aria-controls="comboboxgrid">
</div>
<table role="grid" id="comboboxgrid">
<tbody>
<tr>
<th>one</th>
<th>two</th>
<th>three</th>
</tr>
<tr>
<td role="gridcell">1</td>
<td role="gridcell">2</td>
<td role="gridcell">3</td>
</tr>
</tbody>
</table>
</div>
The error message is saying that anything with a role of combobox has required child elements but it can’t find them in your markup. There’s been some changes to the combobox role so if you’re working from an older example it’ll be out of date. Try removing the role attributes from both the div and the table, and see if that helps.
I'm looping through the properties of an object called an observation. One of those properties is ImageUrl. The ImageUrl is not important to the user and it's value is a Base64 image...so it's a mile long. I want to show all properties except the ImageUrl property. I'm trying to use ng-if to exclude it, but it's not working. Any tips? This is an old Angular 1 app at my work and I don't have any authority to upgrade it to Angular 2 or any other framework. I just need this ng-if to work or for someone to suggest an alternative that'd work. Thank you. This is my best try and it's not excluding ImageUrl. I can't get the ng-if to exclude anything.
<table>
<tbody>
<tr ng-repeat="p in properties(obs)">
<th ng-if="p !== 'ImageUrl'">{{p}}:</th>
<td ng-if="p !== 'ImageUrl'">{{obs[p]}}</td>
</tr>
</tbody>
</table>
The syntax would be:
<tr ng-repeat="(key, val) in obs">
<td ng-if="key !== 'ImageUrl'">{{val}}:</td>
<td ng-if="key === 'ImageUrl'">{{key}}</td>
</tr>
That way 'ImageUrl' will be shown in case of the ImageUrl property, else the value of the property.
I have a CRUD app powered by angular. Recently I added datatables to it in order to search, filter, sort,export and hide columns using the power of datatables. Unfortunately it returns the Firebase references in the various columns {{contact.name}} {{contact.email}} (There are 4 more columns) when I use any datatables feature such as search it returns the Firebase reference instead of a field. Is there a way to fix this? I really need those datatable features at the same time use Firebase.
$(document).ready(function() {
$('#contacts').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
<table id="contacts" class="table table-striped table-hover" >
<thead>
<tr>
<th>Name</th>
<th>Phone</th>
<th>Area</th>
<th>Occupation</th>
<th>E-mail</th>
<th> Actions </th>
</tr>
</thead>
<tbody>
<tr ng-repeat="contact in contacts">
<td>{{contact.name}}</td>
<td>{{contact.phone}}</td>
<td>{{contact.area}}</td>
<td>{{contact.work}}</td>
<td>{{contact.email}}</td>
<td>Edit <a class="btn btn-raised btn-xs btn-danger" ng-click="removeContact(contact.$id)">Delete</a></td>
</tr>
</tbody>
</table>
EDIT
Will sourcing the data via ajax sort this out. This is the json format i get from the ajax GET request
{"-KIZ6VnucsKbKjlaE8aq":{"area":"Parklands","email":"tttt","name":"Mohammed Sohail","phone":"+254700000000","work":"ttt"},"-KId6OC2gOwiacUid9yK":{"area":"dfgdfg","email":"dfgdf","name":"dfg","phone":"dfgdfg","work":"fdfffffff"},"-KId6Rqo0B6w0jACHhWM":{"area":"dfgdfgdfgdf","email":"dfgdfgdfgdfg","name":"dfgfdgdf","phone":"gdfgdfgdfg","work":"gdfgdfgdfgdfg"},"-KIqmYZubPYhAqDqEyWo":{"area":"dfgfdg","email":"fgfdgfdgdf","name":"fgfg","phone":"fdgdg","work":"fgdfgdf"},"-KIqn5QABMXrTGoVgQv1":{"area":"bla","email":"weadasda","name":"bla","phone":"bla","work":"bla"}}
And this is how the data looks like on the console.
Any help to use data tables will be appriciated.
FireBase database image
So, this question is really about turning a (firebase) JSON object of objects with unknown object entry names such as KId6Rqo0B6w0jACHhWM into a more plain structure that can be used along with dataTables and ng-repeat?
You can format contacts into an array of plain objects this way :
$http.get('firebase.json').then(function(json) { //faked response from firebase
$scope.contacts = []
for (var item in json.data) {
$scope.contacts.push(json.data[item])
}
})
Now the ng-repeat will work and the markup (or contacts data) is understandable for dataTables. To turn this into angular-datatables (angular directives for jQuery dataTables) the only thing you need to do is to include the datatables dependency and include the datatable directive in the markup :
<table datatable="ng" class="table table-striped table-hover" >
demo -> http://plnkr.co/edit/tn9cuKa46vs4x8cHebjB?p=preview
I have used ng-repeat numerous times already in the past, but for some reason I cannot yet understand why it is not on the following situation:
I have an array of objects called registers which I am referencing on the ng-repeat but nothing happens.
I know the array is populated because I have seen it on numerous console.log and because it works if I move the ng-repeat over to the <tbody>
<div ng-repeat = "r in registers">
<!-- START HEADER -->
<tbody class="js-table-sections-header">
<tr>
<td class="text-center">
<i class="fa fa-angle-right"></i>
</td>
<td class="font-w600">Denise Watson</td>
</tr>
</tbody> <!-- END HEADER -->
<tbody>
<tr>
<td class="text-center"></td>
<td>
<!-- Summernote Container -->
<div class="js-summernote-air">
<p>End of air-mode area!</p>
</div>
</td>
</tr>
</tbody>
<!-- END TABLE -->
</div>
I was hoping someone could tell me if there is something I may be ignoring.
Thanks in advance.
I think I just ran into this same problem. It stems from <div> not being a valid elment within a <table>.
I'm guessing that since you have <tbody> there, that there is a <table> tag that was left out of your snippet. <div>s aren't allowed in a table, so the browser moves it before the table. In my situation, doing this, causes the angular scope to change so that there was nothing to iterate over. You can verify this by using the developer tools of your browser.
So, my guess is that you probably want to move the ng-repeat onto the <tbody> or <table> tag.
If you want to use ng-repeat in "div" tag means use "span"
inside div tag. instead of using "table" and its sub attributes..
else use your ng-repeat inside "table" or "thead" or "tr" also
it will iterate rows ...
than only ng-repeat will works.
I have the following html.
<div ng-controller="CustCtrl">
<table class="table table-condensed">
<thead>
etc.
</thead>
<tbody>
<tr ng-repeat="customer in customers" data-cust-id="{{customer.Id}}">
<td>
<button ng-model="Id" tracking-{{customer.Tracking}} ng-click="startTrackingCustById(customer.Id)">
</button>
</td>
etc.
</tr>
</tbody>
</table>
So the button has a class that is databound to the customer.Tracking value which is either true or false. When the button is clicked the startTrackingCustById() method is successfully called and the customer object in the customers object is successfully changed like customer.Tracking = true.
But the buttons class is not updated. What am I missing?
Look at using ng-class . For a boolean value in scope you would use:
ng-class="{'classNameToAddIfTrue':customer.Tracking}"
In the CustCtrl I wrapped the call that updated the customers array like this
$scope.$apply($scope.customers[i].Tracking = true);
Based on the suggestion in an answer I will link to when I find it that basically said "If you are having trouble updating the view you most likely need to use $scope.$apply
So that get's it to work. Now I need to figure out why and how.