Scroll in sap.m.table

[dirk_wieczorek]

I have extended an programm which displays data in an sap.m.table.

Part of the extension is to add new lines to the model /table.

// Get tab

  var element = sap.ui.getCore().getElementById("Install_Data");

  var oModel = element.getModel();

  var test = oModel.getProperty("/GetLvmSolutionInstallationMapping/");

  var inp = sap.ui.getCore().getElementById("Input_Data");

  var iModel = inp.getModel();

  var inptest = iModel.getProperty("/GetLvmSolutionInstallationMapping/0");

  if (inptest.SolutionCode != ""){

   var new_obj = JSON.parse(JSON.stringify(inptest ));

   new_obj.UpdateFlag = true;

  test.push(new_obj);

  oModel.setProperty("/GetLvmSolutionInstallationMapping/", test);

}

After some problems it works fine. Since the table is greater then the display its necessary to position the table on the new item.

After looking in SCN i found the following solution

var oItem = element.getItems()[new_Item_index];           

  var oScroll = sap.ui.getCore().getElementById("IDHECINSTSCROLL");

  oScroll.scrollToElement(oItem);

My problem is it doesnt work. When executing the code there is an error  "scrollToElement" is not a function. It seems that the version of the sap.m.Scrollcontainer doesnt know the scrollToElement  function.

I use a sap.m.table within a sap.mScrollcontainer for scrolling which is on a sap.m.Page with scrolling disabled.

Since i cant change that version at the moment  is there any other way to position the table on the new line?

Regards.

Dirk

[vijay_kumar49 · Accepted solution]

Please check this example. its should be useful S Bin - Collaborative JavaScript Debugging

Kindly let me know if you need any more information.

[dirk_wieczorek · Accepted solution]

Hello Vijay

i tried that.

It seems that the scrollcontainer doesnt know the method "scrollToElement". I get the error

function undefined.

I did the following:

Declare containter:

  var oScrollcon  =  new sap.m.ScrollContainer({  "IDHECINSTSCROLL", 

Then later when i want to scroll:

var element = sap.ui.getCore().getElementById("Install_Data");

var oItem = element.getItems()[index];           

var oScroll = sap.ui.getCore().getElementById("IDHECINSTSCROLL");

  oScroll.scrollToElement(oItem);

It functions until i call scrollToElment. Thats undefined either something with the code here is wrong

or our libraries dont support that method yet.

Is there another way to do the scrolling?

Regards

Dirk

[vijay_kumar49 · Accepted solution]

Could you please check this simple code for "Scroll" in table

var oTable = new sap.m.Table({

  columns : [ new sap.m.Column({

    header : new sap.m.Label({text : "List"})

  })]

});

oTable.bindItems("/", new sap.m.ColumnListItem({

  cells : [ new sap.m.Text({text : "{name}"})]

}));

var oModel = new sap.ui.model.json.JSONModel(data);

oTable.setModel(oModel);

var scroll = new sap.m.ScrollContainer({

  width : "200px",

  height: '100%',

  vertical :true

});

scroll.addContent(oTable);

scroll.placeAt("content");

[saivellanki]

Hi Dirk,

Yes, you are right!

scrollToElement method is introduced from 1.30 version - JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.ScrollContainer

I guess you are using lower library version. But, you can give a try with scrollTo method - JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.m.ScrollContainer

Not sure when this method got introduced. Since, it is not mentioned in the API as well.

I created a JSBin using .scrollTo method, you can have a look: JS Bin - Collaborative JavaScript Debugging

Regards,

Sai Vellanki.

[dirk_wieczorek]

Hello,

first of all thank you very much for the help it solved a lot of my problems. Since i am new to ui5  i do have some problems to find my way here.

Most of the suggestions here would solve the problem but because of some restrictions i cant use them.

The setup at the moment is i have an sap.m.page where scrolling is disabled.

Because if we scroll in the page the column headers are scrolled out of sight.

Therefore if have one table with column headers only where the column text is in and a second one with the displayed items only.

This one is in a sap.m.scrollcontainer for enabling scrolling without loosing the column headers in the display.

So the main problem that has to be solved is to position the second table on the new line when one is inserted. We found a solution for that. We set the focus on the one row in the new line.

That should solve the problem.

But i have to set it in the function where i insert the new line and that doesnt work.

Determine ID of the new line.

  for ( var ofc = 0; ofc < oitems.length; ofc++)

     {

    cell = oitems[ofc].getCells()[3];

    name = cell._lastValue;

    if (name.indexOf("XXX-") >= 0)

    {

    var database = name.split("XXX-");

    if (database.length == 2){

    cell.lastValule = database[1];

    }

    else

    {cell.lastValule = "";}

    focusid = oitems[ofc].getCells()[1].getId();

    break;

    }

After that

  setTimeout(this.wait(), 1000);

  sap.ui.getCore().byId(focusid).focus();

i wait some time and set the focus to the item.

If used with the right id the focus functions and the table i scrolled to the right line.

Problem solved.

Thanks for the help.

Regards

Dirk

[former_member182372]

Great job!

[former_member182372]

scrollToElement is method of the sap.m.Page