Data sorting in a dojox.grid.EnhancedGrid - javascript

First of all, thank you a lot for what you are doing here. That is very nice.
I am developing a web application with Dojo, and I am facing a problem with ordering my rows in a dojox.grid.EnhancedGrid.
Let's say i have a product with product status, my JSON file looks like:
[
{"id":1,"name":"Car A","price":"1000","productstatus":{"id":1,"name":"new"}},
{"id":2,"name":"Car B","code":"2000","productstatus":{"id":2,"name":"old"}}
]
I want to put that data in my grid and change the order of the rows by clicking in the header.
I have in my HTML file:
<table id="lstProduct" jsId="lstProduct" dojoType="dojox.grid.EnhancedGrid" >
<thead>
<tr>
<th field="id">Id</th>
<th field="name" width="100px">Name</th>
<th field="price" width="100px">Price</th>
<th field="id" formatter="formatterStatus">Status</th>
</tr>
</thead>
</table>
and my Javascript file:
dojo.addOnLoad(function() {
productStore = new dojo.data.ItemFileReadStore({data: { items: ${products} }});
dijit.byId("lstProduct").setStore(productStore);
});
// formatter
function formatterStatus(val, rowIndex) {
return lstTasks.getItem(rowIndex)['productstatus'][0]['name'];
}
The problem? I cannot order by status (status's name), it only orders by product.id when I click in the status header.
Any workaround for that?
Thanks in advance.

I believe you need to add clientSort="true" to enable client-side sorting. Add this to the <table> declaration.

Related

ReactJS Sort Column Table localCompare throws erorr on column associated with ID

I am writing a react js Table with columns with sorting functionality. The columns with just text are working fine, but I am getting the following error:
TypeError: Cannot read property 'localeCompare' of undefined
I am assuming or guessing localeCompare only works with text column, it bombs on the columns with integers. correct?
My sort function is
SortTable(event, sortKey) {
if (!this.state.ascending) {
this.state.application.sort((a,b) => a[sortKey].localeCompare(b[sortKey]))
this.state.ascending = true
} else {
this.state.application.sort((a,b) => b[sortKey].localeCompare(a[sortKey]))
this.state.ascending = false
}
}
My table code is the following
<Table striped bordered>
<thead style={{'background-color': 'rgb(248,248,255)'}}>
<tr>
<th onClick={e=> this.sortTable(e,'myId')}>
<Button s
<div>Phase<i className={this.state.iconName}/></div></Button></th>
</tr>
</thead>
<tbody>
<tr>
<td style={{textAlign:'center'}}>{this.getStringBaseOnId(myId)}</td>
</tr>
</tbody>
</Table>
The function looks like
getStringBaseOnId(id) {
return 'Test'
}
Any help is appreciated. Thanks

Get calling table from column option

I have a few Bootstrap table on one page. Each table has some data attributes (like data-link="test-page" and so on). Besides that, one column of each Bootstrap table uses a column formatter, using data-formatter="actionFormatter". However, I want to get the current table data attributes when actionFormatter is called, so based on the data attributes I can return a string.
Both this and $(this) return an Object, which doesn't work. $(this).closest('table').data() doesn't work either, while I expected that one to be the most true.
Here's the code I use:
<th data-field="actions" data-formatter="actionFormatter" data-events="actionEvents">Actions</th>
this returns a JSON object with the row properties, and $(this).closest('table').data(XXX) return undefined. I expected it to return an array with all the data attributes.
Is there any way to get the current processing table from within the formatter?
Example code:
<!-- table 1 -->
<table
data-actions="edit,remove"
data-url="some/url"
>
<thead>
<tr>
<th data-formatter="actionFormatter">Actions</th>
</tr>
</thead>
</table>
<!-- table 2 -->
<table
data-actions="edit,remove"
data-url="some/url"
>
<thead>
<tr>
<th data-formatter="actionFormatter">Actions</th>
</tr>
</thead>
</table>
// actionFormatter:
function actionFormatter(value, row, index, field) {
// get data-actions from the right table somehow,
// and return a string based on data-url/other
// data attributes
}
It seems that when the action formatter is called, the execution context this is an object with all the bootstrap table row associated data as well as all the data-* attributes of the row.
Taking that into account you can add an id to each table and a data-table-id attribute to your rows like:
<table
id="table-1"
data-actions="edit,remove"
data-url="some/url"
>
<thead>
<tr>
<th data-formatter="actionFormatter" data-table-id="table-1">Actions</th>
</tr>
</thead>
so that in your formatter you can retrieve the table DOM Element by using that id:
function actionFormatter(value, row, index, field) {
// get data-actions from the right table somehow,
// and return a string based on data-url/other
// data attributes
var data = $('#' + this.tableId).data();
}

How to make this table design in angular with css

I data in this format in my angular controller. These are dummy datas and will be fetched from some sort of services later.
$scope.attendanceLog =
{
attendances:
[
{
date:'12.12.17',
entries:
[
{
time:'12PM',
device:'1212',
location:'katabon'
},
{
time:'1PM',
device:'1212',
location:'katabon'
},
{
time:'2PM',
device:'1321',
location:'katabon'
}
]
},
{
date:'13.12.17',
entries:
[
{
time:'12PM',
device:'1212',
location:'katabon'
},
{
time:'1PM',
device:'1212',
location:'katabon'
},
{
time:'2PM',
device:'1321',
location:'katabon'
},
{
time:'5PM',
device:'1321',
location:'katabon'
}
]
}
]
};
Now I designed the table to view this data like this. Here is the html code
for the table
<table class="table table-bordered">
<thead>
<th>Date</th>
<th class="text-center">Time</th>
<th class="text-center">Device</th>
<th class="text-center">Location</th>
</thead>
<tbody>
<tr ng-repeat-start="attendance in attendanceLog.attendances">
<td rowspan="{{attendance.entries.length}}" class="date">{{attendance.date}}</td>
<td>{{attendance.entries[0].time}}</td>
<td>{{attendance.entries[0].device}}</td>
<td>{{attendance.entries[0].location}}</td>
</tr>
<tr ng-repeat-end ng-repeat="entries in attendance.entries" ng-if="$index>0">
<td>{{entries.time}}</td>
<td>{{entries.device}}</td>
<td>{{entries.location}}</td>
</tr>
</tbody>
I want to make every other instance of the highlighted sections' background a diffrent color.Here is the reference image.
So if there are 5 dates then the 1st, 3rd and 5th date cell and all the other cells on their right side would have a different color.
Now is there any way to do this with angular. I am sorry if its a stupid question. I am new to front end development.
You could change it to have one expression for the table entries and use ng-class-odd and ng-class-even:
<tbody>
<tr ng-repeat="..."
ng-class-odd="'someOddClass'" ng-class-even="'someEvenClass'">
</tr>
</tbody>
Then you'd just need to change your styling.
Instead of printing new rows in the table I created a new table for every date. And then I applied the css class on every odd numbered table.
<table class="table table-bordered" ng-repeat="...." class =
ng-class ="$index % 2 == 0 ? 'table table-bordered striped':'table table-bordered'" >
.......
.......
</table>
Here striped is the class I used to highlight the odd numbered records background a different color

Angularjs checkbox like gmail

Im newbie in angularjs.
Now im having issues with a checkbox.
First: my web are paging , sorting and change page size by call api to get data from server in factory:
this.getData = function(page , sortColumm, sortType , pageSize, searchText){
$http({
method = get;
url = "api/data?page="+page +"&sortColumm=" +sortColumm +"&sortType="+sortType +"&pagesize="+pageSize+"&search="+searchText;
}).success(function (data) {
}).error(function (error) {
});
}
now i have a page using angularjs to bind data using funciton getData.
html:
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()"></th>
<th>Administrator Name</th>
<th >Administrator Type</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="gladmin in gladmins" ng-switch on="gladmin.isEnabled"
on-finish-render="resizetable">
<td><input type="checkbox" ng-model="gladmin.Selected" value="{{gladmin.id}}" ng-click="selectionAdmin(gladmin.id)"></td>
<td>{{gladmin.name}}</td>
<td>{{gladmin.type}}</td>
</tr>
</tbody>
controller
app.controller('adminPage',function(){
// call getData
$scope.checkAll=function(){
// what should i write here?
// i want check all is for current page, next page checkall = fall,
// same GMAIL
}
$scope.selectionAdmin = function(id){
// what should i do here
}
})
All i want is the checkall same the checkall in gmail ? anyone help me ? please, i am new bie in this!
i find some link here : http://plnkr.co/edit/N98IKTcHoZMCs18FjSRF?p=preview
http://vitalets.github.io/checklist-model/
but it work not same i want !
It is hard for me to understand the question but I think you just want a property of ng-checked="isAllChecked" in your ng-repeat for the inputs. When that value is set to true all of them should check.

tr-ng-grid not respecting order-by

I am using this angularjs module for a table: http://moonstorm.github.io/trNgGrid/release/index.html
I am displaying my data like this:
<table tr-ng-grid="" items="logs" page-items="100" class="table table-striped">
<thead>
<tr>
<th field-name="id" display-name="id" enable-filtering="false"></th>
<th field-name="user" display-name="User" enable-filtering="false"></th>
<th field-name="action" display-name="Action" enable-filtering="false"></th>
<th field-name="additional" display-name="Additional" enable-filtering="false"></th>
<th field-name="time" display-name="Time" enable-filtering="false"></th>
</tr>
</thead>
</table>
The data is coming from an $http call and when I do a console.log() on that data, it is in the correct order. The dispay on the table was not though. You can see below what it looks like
I added an order-by attribute to the table element but it doesn't seem to have any effect:
<table tr-ng-grid="" items="logs" order-by="time" page-items="100" class="table table-striped">
If I click on the Time column to sort, it then sorts it in the correct order. Sorting by id doesn't work because it seems to do this:
1,
10,
11,
12,
...
18,
19,
20,
2,
21,
22
etc...
Your $http request returns json objects where all fields are strings. Since you feed it directly to your table, your ids are still strings and are ordered as such (1, 10, ...). You need to either preprocess the data and replace your string ids with numbers if you want to order them as numbers, or leverage the trNgGrid column options ; going by the module documentation, I would say a computed field implementing a stringToNumberFormat should do the trick :
angular.module(...)
.filter("stringToNumber", function () {
return function (fieldValueUnused, item) {
return parseInt(item.id);
};
});
<th field-name="numberId" display-name="id" display-format="stringToNumber:gridItem">

Categories