Accessing value from input filed present inside sap.ui.table

[former_member194533]

Hi Experts ,

              I have a sap.ui.table with 6 rows and three columns .

Controller code .

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

  var empData = {

                 empList:[

                            {empid:"10000001",empname:"eizwan",designation:"Sr Analyst"},

                            {empid:"10000006",empname:"aizwana",designation:"Sr tester"},

                            {empid:"10000002",empname:"dajiya",designation:"Jr Analyst"},

                            {empid:"10000003",empname:"cehan",designation:"Associate"},

                            {empid:"10000004",empname:"Tazmeen",designation:"software engineer"},

                            {empid:"10000005",empname:"lrif",designation:"Sr Architech"}

                            ]

  };

    empJSONObj.setData(empData);

  sap.ui.getCore().setModel(empJSONObj,"empModel");

Table .view code

<t:Table id="idtab" rows="{empModel>/empList}" title="Employee Data" visibleRowCount="3" selectionMode="Single" navigationMode="Scrollbar" 

  selectionBehavior="Row"     >

  <t:Column>

   <Label text="Employee Id"></Label>

   <t:template>

    <Text text="{empModel>empid}"></Text>

   </t:template>

  </t:Column>

  <t:Column>

   <Label text="Employee Name"></Label>

   <t:template>

    <Input value="{empModel>empname}" ></Input>

   </t:template>

  </t:Column>

  <t:Column>

   <Label text="Employee Designation"></Label>

   <t:template>

    <Text text="{empModel>designation}"></Text>

   </t:template>

  </t:Column>

   </t:Table>

I want to access each row and check if the value is there in input field or not . If value is there they i wan to disable my input field . else nothing .

I have written the follwing logic for that .

var rows = this.getView().byId("idtab").getRows().length;

for(var i=0;i<rows;i++)

  {

   var data = this.getView().byId("idtab").getRows()[i].getCells()[1].getValue();

    if(data!="")

     {

                this.getView().byId("idtab").getRows()[i].getCells()[1].setEnabled(false);

     }

  }

The above logic is working fine but it is working only for 3 row because the visible row count is only 3.

Can you suggest why this getRows() function is returning only 3 rows when i have 6rows . Please suggest how to access the input fileds present in all rows . I am attaching the output .

[Former Member · Accepted solution]

Hi,

I would say use a formatter and handle the enabled property of the input field based on the property you have bound from the model.

eg :

<Input value="{prop1}" enabled="{path:'prop1', formatter:'.formatInputEnabledBasedOnProp1'}">

in the controller :

write the formatter logic :

formatInputEnabledBasedOnProp1 : function(boundProp){

     if(!boundProp){

          return true;

     }else{

          return false;

     }

}

NOTE : the "." before the formatter function is because i am writing it in the controller. If you will be using the formatter in multiple places, I would also suggest you create a separate file and call the formatter function.

Best Regards

Deepshikha

[former_member194533 · Accepted solution]

Hi ,

      Thanks for your reply .

Is there any other way apart from using formatter ? Kindly let me know if any .

Thanks

Rizwan

[Former Member · Accepted solution]

Hi Rizwan,

I would say use the formatter, thats the best approach to it.

However the alternative is :

var aItems = this.byId("tableId").getRows();

if(aItems && aItems.length >0){

     for(var i=0; i<aItems.length;i++){

          var sInputValue = aItems[i].getCells()[1].getValue();

          if(!sInputValue){

              aItems[i].getCells()[1].setEnabled(false);

           }else{

              aItems[i].getCells()[1].setEnabled(true);        

          }

     }

}

I did not understand why you have set visibleRowCount="3".

Best Regards

Deepshikha

[Former Member · Accepted solution]

In addition to the formatter given earlier, there was a mistake with the return value. Corrected it in this one :

formatInputEnabledBasedOnProp1 : function(boundProp){

     if(!boundProp){

          return false;

     }else{

          return true;

     }

}

Apologies for the mistake.

Regards

Deepshikha

[former_member194533 · Accepted solution]

Hi ,

Same code i have used .But the problem is

var aItems = this.byId("tableId").getRows(); ---> this line is not giving the enire rows . Its giving only the rows of visible row count . If i dont mention visible row count then by default it vl return 10 . What if i have more than 10 rows in the table ? At the time this logic is not working . Any sollution for this ?

Thanks

Rizwan

[saivellanki · Accepted solution]

Hi Rizwan,

getRows() will fetch you only the rows that are loaded at DOM level. So, as others suggested it's better to use a formatter, since we can toggle the Boolean value based on model value.

Let us know the reason, why you don't want to use a formatter for your scenario. If it is a hard requirement, then we will have to check for an alternative solution which involves lots of coding.

Best Regards,

Sai Vellanki.

[Former Member]

hi rizwan

<t:Table id="idtab" rows="{empModel>/empList}" title="Employee Data" visibleRowCount="3" selectionMode="Single" navigationMode="Scrollbar"

  selectionBehavior="Row"     >

its because ur specifying visibleRowCount="3"

[Former Member]

or better u apply formatter

<Input value="{empModel>empname}" enabled="{path:'empModel>empname',formatter:'test.util.Formatter.disable'}" ></Input>

And in formatter :

disable:function(value){

if(value=="")

return false;

}

[former_member194533]

Hi Madihalli,

              Even though you dont specify visibleRowcount =3 , it takes the default value ie 10 , Again the same problem will encouner . You can access 10 rows only . After ten rows again same thing will repeat . So removing visibleRowCount is not the sollution .

Thanks

Rizwan

[former_member194533]

Hi ,

             Using formatter is a correct approach . But is there any other way through which I can read each row and access the UI element(input field ) inside the table ??

Actually the below code  highlighted in italic is working fine but only for 3 rows = visible Row count . How can we work it out for all the rows ?

for(var i=0;i<rows;i++)

  {

   var data = this.getView().byId("idtab").getRows()[i].getCells()[1].getValue();

    if(data!="")

     {

                this.getView().byId("idtab").getRows()[i].getCells()[1].setEnabled(false);

     }

  }

[Former Member]

hi rizwan u can set setVisibleRowCount(odata.length);

reward if helpful

thanks