Responsive (sap.m) Table: on-Click Column Sort / Filter
Hello All,
There were few questions on SCN – why don’t we have on-Click column sort / filter for Responsive (sap.m) table like we do for Grid (sap.ui.table) table. We need to use View Settings Dialog, in order to sort / filter / group responsive table.
There might be several reasons, why the functionality is not available. But, some developers wish to use the same functionality and not sure how to move forward.
I tried to build a sample and hopefully it works good for you as well.
Firstly, I created a simple table control, which has products data fetched from URL: Products.json
Now, in order to open a pop-up on click of column, we have to use jQuery ‘click’ event, but prior to that we also need to capture column header DOM object.
var oTable = this.getView().byId("idProductsTable");
oTable.addEventDelegate({
onAfterRendering: function() {
var oHeader = this.$().find('.sapMListTblHeaderCell'); //Get hold of table header elements
for (var i = 0; i < oHeader.length; i++) {
var oID = oHeader[i].id;
that.onClick(oID);
}
}
}, oTable);
I used a Responsive Popover control for the pop-up as fragment, where we have list wrapped as content and respective controls as list items for Sort Ascending / Sort Descending / Filter operations.
<core:FragmentDefinition
xmlns:core="sap.ui.core"
xmlns="sap.m">
<ResponsivePopover title="Options"
placement= "Bottom"
afterOpen= "onOpen">
<content>
<List>
<items>
<CustomListItem type="Active" press="onAscending">
<HBox alignItems="Center"
justifyContent="Center"
class="HBoxStyle">
<Label text="Sort Ascending" />
</HBox>
</CustomListItem>
<CustomListItem type="Active" press="onDescending">
<HBox alignItems="Center"
justifyContent="Center"
class="HBoxStyle">
<Label text="Sort Descending" />
</HBox>
</CustomListItem>
<CustomListItem>
<HBox alignItems="Center"
justifyContent="Center"
class="HBoxStyle">
<Label text="Filter :" />
<Input width="90%"
change="onChange" />
</HBox>
</CustomListItem>
</items>
</List>
</content>
</ResponsivePopover>
</core:FragmentDefinition>
On click of column, we have to capture column that is clicked and ensure sort / filter operations are done for respective column. Use a local model to save the column name as a property which is selected and can be used later for sort / filter operations.
onClick: function(oID) {
var that = this;
$('#' + oID).click(function(oEvent) { //Attach Table Header Element Event
var oTarget = oEvent.currentTarget; //Get hold of Header Element
var oLabelText = oTarget.childNodes[0].textContent; //Get Column Header text
var oIndex = oTarget.id.slice(-1); //Get the column Index
var oView = that.getView();
var oTable = oView.byId("idProductsTable");
var oModel = oTable.getModel().getProperty("/ProductCollection"); //Get Hold of Table Model Values
var oKeys = Object.keys(oModel[0]); //Get Hold of Model Keys to filter the value
oView.getModel().setProperty("/bindingValue", oKeys[oIndex]); //Save the key value to property
that._oResponsivePopover.openBy(oTarget);
});
}
Also, we can pass multiple filters by ‘comma’ separated values in ‘filter’ input box.
For example: To filter Graphics Card / Accessories in category section, Enter: grap, acce then the result would be:
To make the focus on Input, when Responsive Popover is opened, we can make use of ‘onAfterOpen’ event.
Full Demo: Responsive Table – onClick Column Filter / Sort
Working Snippet:
This is just a basic sample to give an idea. Validations / Multiple Columns sort are not present and when you try to add a new column this code might not work, you need to tweak the code to make it work 😉 (or) the best would be extending the table control (which might take time to build, but more robust).
Happy Learning! 🙂
Best Regards,
Sai.
Hi Sai Vellanki,
The application is working fine on desktop. But coming to the tablet and phone it's not working. The pop up fragment is not opening. So how to make it responsive? Any suggestion?
Thank You.
Regards,
Hemadri
Hi Sai, @saiVellanki
I need to load dynamic data in a microchart inside a generic tile. I saw your code on JSView. Do you have an example for this usecase?
Thank you, helped me a lot! =)
Hi Sai,
Nice one!.
Will this work for sap.m.TableSelectDialog as well?
Bets Regards,
Venkatesh.
columnclick doesnt work in multiselect table after we select a line item
please help
@asym
If possible could you provide following code in js fiddle or any other codeing platforms