Is it possible to disable from the designated row to the last row with another color
Application Type
Traditional Web

I want to disable from the designated row to the last row with another color when I click the "Disable" button.


Let's say you want to disable the rows with gray color from the designated row to the last row 8 on Table.

First, you put the first row number to disable in the Input text area and  press the "Disable" button.

Then those rows will be disabled with another color.


Ex, you put 5 in the Input text area and click the button. Then From row 5 to row 8(the last row) , these rows will become disabled.



This is what I want to implement, but I wonder if this is possible.

I just implemented by myself but I can't figure out.


It'd be nice if you could give me good advice.

Also, I've attached my oml file for your information.


I look forward to your advice.

Best,


changeColor.oml

mvp_badge
MVP
Solution

Hi Tsubasa,

No problem, I was trying to understand the mentioned use case. The implementation approach, which I followed is: Instead of defining inline style rules, use the style class and toggle it as per the condition using JS.

JavaScript Snippet:

const rowNumber = document.querySelector('#" + rowNumberInput.Id + "').value;

    [...document.querySelectorAll('td .disable--input')].forEach(ele => {            
        ele.classList.remove('disable--input');
    });

    [...document.querySelectorAll('td .row__index')].forEach(ele => {
        if (ele.textContent >= rowNumber) {            
            ele.parentNode.classList.add('disable--input');
        }
    });

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

TWALabMatrixTask.oml

mvp_badge
MVP

Hi Tsubasa,

I'm not able to understand - what do you mean by disabling the rows? Do you mean it representation vice, or is there any functionality that you are trying to implement?

As per my understanding, I have implemented the use case in a demo app using JS. See this: Matrix

Let me know if this is what you are looking for?


Kind regards,

Benjith Sam

Hi Benjith Sam ,

Sorry for my poor explanation.

I took a look at your demo Matrix . This is exactly what I want! Thank you.


If you don't mind, I was wondering if you could tell me how you implemented that.

I'd like to know about how to implement in the logic action and execute the Javascript.


It'd be nice if you could also give me the oml file for my information.


Best,

mvp_badge
MVP
Solution

Hi Tsubasa,

No problem, I was trying to understand the mentioned use case. The implementation approach, which I followed is: Instead of defining inline style rules, use the style class and toggle it as per the condition using JS.

JavaScript Snippet:

const rowNumber = document.querySelector('#" + rowNumberInput.Id + "').value;

    [...document.querySelectorAll('td .disable--input')].forEach(ele => {            
        ele.classList.remove('disable--input');
    });

    [...document.querySelectorAll('td .row__index')].forEach(ele => {
        if (ele.textContent >= rowNumber) {            
            ele.parentNode.classList.add('disable--input');
        }
    });

Refer to the attached .oml file


I hope this helps you!


Kind regards,

Benjith Sam

TWALabMatrixTask.oml

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.