Dynamic changes in report control

Hi David,

I will need to display each row in the report control in a specific way. I thought I might be able to write some JS in the report control Html but it seems like it does not accept it. I appreciate if you can assist me on that.So below is what I would need, I wrote an IF statement in upper case that if I could have it in the below example my problem was solved:

<td> [Record.ID] </td> <td if [record.name] == 0 class="CLASS1" else=""> [Record.Name] </td>

Thanks

Hello Amin,

We certainly can use something like the "ng-if" AngularJS directive, however, for something like you wanted, probably we must use the "ng-class" AngularJS directive. Please, take a look at the two refered links, mostly to the "ng-class" one, and, tell me if you need some additional help.

On the other hand, we can always use the source data, that is, supose we want to list certain records in a Report, then, every record object can have their own "class" property, then we can simply use it, instead of the mentioned "ng-class" directive. However, there is also possible to use it.

Here is an example of use of the "ng-class", however, there is just one example: this directive is powerful and allows to be ready with the classes to be applied in various ways, this is the "map way":

<td ng-class="{greaterThanOne: Record.ID 1, recordIsJohn: Record.Name != ''}"></td>

The above means "Apply the greaterThanOne CSS class to this TD element, if the Record.ID value is greater than 1. Apply the recordIsJohn CSS class too, if the Record.Name value is not an empty string."

<td ng-if="Record.Name">Hello!</td>

The above "ng-if" directive means, "Shown this TD element if the Record.Name value is evaluated to true, or, hide this TD element in other case".

---

Hello Amin,

Just to add a bit more information regarding the better usage of the Report's Data variable, that is, for example, including some "CSS classes" information per every record object, remember that we can also do this in runtime and in the client side. Maybe is not the better approach (the better approach can be that the server already serve the data as we needed), but, we can always change (remove, editing, adding object properties) to the Report's Data variable. In few words: we can incude in the Data variable whatever we wanted... like the appropriate CSS classes to be used.

---

Hi David,

Thanks a lot for your great support.

I just finished implementing the piece I was working on using like below:

<td ng-class="{when_NOT_NULL_CSS_Class: Record.ID}"></td>

There is only one thing in your comment that was not working for my case, "Record.ID 1" as the statement was not working and was throwing errors, so instead I handled the statement at server side and returned 0 and 1 based on what I needed. Again I had an issue which was "Record.ID" datatype I assume, so instead of working with datatypes, in return I returned null/else from server and now it works just like expected.

I agree with you that it is better to handle the data at the server side, however sometimes like in this case it is not matter of data manipulation but it is data presentation. I wanted certain records of the same table to be presented in a different style than the others. I could separate them with a Boolean field in the data but at the end server would export the data all together and I needed to differ them at the client side. All that being said, once in a while I like to put some of the processing pressure on to the client to reduce server's workload.

All in all, ng-class worked for me, now lets say similar to stack over flow, my users can respond to a question and other users can respond to the previous responses and during the presentation process client device can differ the level of responses and display them appropriately.

Thanks a mill for your help David

Hello Amin,

I feel that the forum "editor" is very bad, and, force us to do miracles to get something good and finally post what we wanted. I must work on this, of course. Anyway, certainly we can use the "ng-if", "ng-class", etc., without problems. It's something more or less advanced, but, we can use it. What I want to remark is that they are not the only solutions, but, certainly we can use it and works as expected. So just post here (if you can! :-( ) if you need any help on that.

---

Hi David, I am actually enjoying using the "ng-if" and "ng-class" and the links you sent are also very helpful. Thank you. I have two other questions here though, in the table that I am creating users are able to rate some comments and not the others, I have used "ng-if" to enable and disable the "rate this" link for each record. Now my problem is that I can not call the relevant AB view using the link like this <a href="app\rating.html">rate this</a> Another issue that I have is that, when user clicks on a row in the report control, we can read [ReportControl.Record.Fieldname] variable at report's click event to find out what record has been clicked. Would the same work if user has clicked on a link in a row rather than the row itself? Thanks.

Hello Amin,

About the first question, certainly the "A" tag (or link) made the things a little bit complex, but not imposible. Supose we have an HTML code like the below one in a Report control:

<td> <a href="#" onclick="return false;" class="do-the-job" id="[Record.ID]">[Record.Title]</a> </td>

Note that all the attributes are used above. The "href" do not point to any URL or file name. The "onclick" attribute is used to "return false", in order to prevent that the link do their job: goto another place. The "class" attribute is used later (see below) to identify the link, that is, to know that the user tap in a link that must made certain job. Finally, the "id" attribute is used to store the Record's ID, in this case, but, we can store another possible value, or use another "data" attribute if needed.

For the above Report's HTML code, we can place the below AB code in the Report's RowClick event:

If "[Report1.Event.target.parentElement.className]" "==" "do-the-job" Alert "" "You tap into the link with ID: [Report1.Event.target.parentElement.id]" EndIf

The first thing we do above is to identify the link, that is, as you can see, we look if the clicked element (a link in our case) have the class "do-the-job". If that is thruth, then we execute the "Alert" action, which shown the ID of the link that the user tap. So we can identify if a particular link is what we expected. Then we can take some information of the link, like their ID attribute, in order to do what we wanted: goto another view, for example. Maybe in your specific case you can try with a "modal view" instead of a "normal view". But this is something that you must decide.

About your second question, the answer is yes: when the Report was press by the user, no matter if they do in a link or another element, the "[Report.Record]" variable contains the data of the pressed record in the Report control. So, if you want to use this information you can also use it when the link or other element is pressed. Please, go ahead if you have any further question about, Amin.

---

Hi David, Thanks a lot for your help. With a small modification it worked for me. So because I have used "ng-if" in a "span" outside the "div" my link was in "class" had been read differently. So my code turned into below: <span ng-if="Record.X" class="do-the-job"><a href="#" onclick="return false;" id="[Record.ID]">[Record.Title]</a></span> ----- If "[Report1.Event.target.parentElement.className]" "==" "do-the-job ng-scope" Alert "" "You tap into the link with ID: [Report1.Event.target.parentElement.id]" EndIf

Hello Amin,

If that works for you, it's good. However, I have some considerations. Firstly, maybe you can use "ng-show" or "ng-hide" for your specific purpose, instead of "ng-if". I am not sure right now about the "ng-if", but, the "ng-show" and "ng-hide" can be used in the same element that you wanted, that is, you no need to put it in a container, if you don't wanted that.

So we can do something like this, for example:

<td> <a ng-show="Record.ID > 1" href="#" onclick="return false;" class="do-the-job" id="[Record.ID]">[Record.Title]</a> </td>

And, in the above case, the link is only shown if the Record's ID is greater than 1.

---

Hi David, You are right, I had put that container there before I had a link there so I can get rid of it, sure thanks! Will try ng-show and ng-hide as well. Thanks a lot as always for your great support and the extra steps you always take! It is very much appreciated!

Hello Amin,

Always thanks you for support our work! :-)

---