0

Using Slickgrid I am trying to set the CSS of a cell using setCellCssStyles method

for (var rowIndx = 1; rowIndx < movmentRows.length; rowIndx++) {
  grid.setCellCssStyles("disabled", {
    rowIndx: {
      san: "slick-cellreadonly",
      ean: "slick-cellreadonly",
    },
  });
}

I understand its because I am using a variable for a key in the for loop. But I don't understand how to make this work. I tried to replace rowIndx with [rowIndx] but I am getting syntax error, so I think my JavaScript is not ES6. Then I tried the following but this is also giving syntax error with -

Encountered '['and Expected keyword or brace.

for(var rowIndx=1;rowIndx<movmentRows.length;rowIndx++){
  var key = {};
  grid.setCellCssStyles("natCol-greyed", {
    key[rowIndx] : {
      sourceAccountNational: "slick-cellreadonly",
      excludeAccountNational: "slick-cellreadonly"
    }
  });
}

Please suggest.

Improve this question
4

4 Answers 4

Reset to default
0

People provide answers using different loops. But the loop isn't a problem here. Do not be ashamed of using the for loop. It is still the best.

What's the fastest way to loop through an array in JavaScript?

Let's get straight to the answer, You can do it without creating an additional key object. Your first workaround was almost correct, But since you want to use the value of rowIndx as the key, Just wrap it with [].

  grid.setCellCssStyles("natCol-greyed", {
      [rowIndx]: {
          sourceAccountNational: "slick-cellreadonly",
          excludeAccountNational: "slick-cellreadonly"
      }
  });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

If movementRows is an array you can use a for...of loop like so:

for (const [index, row] of movmentRows.entries()) { //index is the index of each iteration and row is the value
  grid.setCellCssStyles("disabled", {
    [row]: {
      san: "slick-cellreadonly",
      ean: "slick-cellreadonly",
    },
  });
}

To set an object key as a variable you can put it in brackets..

Note on for..of loop: It is not supported in IE.

More on how to dynamically set object properties

More on For...Of loop

Improve this answer

2 Comments

If the OP wants the index of the row as the key, this will not work; this will use the array element as the key.
I have updated my answer to support indexes as well.
0

If you are trying to create an object but want to use a variable for the key, the syntax is as follows:

let keyName = "foo"

let object = { [keyName]: "bar" }
 // gives the object `{"foo": "bar}

in older javascript you have to assign to a key after the object is created:

let keyName = "foo"

let object = {}
object[keyName] = "bar"

Also, I try to never do a "manual" loop when I can use an iterator. It's less error prone than a "manual" loop, and allows you to use different types of collections other than just arrays, so it's more flexible. there are two main ways to do this:

A for … of loop:

let collection = ["a", "b", "c"]

for (let value of collection) {
  console.log("value:", value)
}
// if you also want the index
for (let [index, value] of collection.entries()) {
  console.log("value and index:", value, index)
}
// or _just_ the indexes (note this skip empty values in sparse arrays)
for (let index of collection.keys()) {
  console.log("index:", index)
}

Using forEach:

collection.forEach((item, index) => console.log(item, index))

Both these methods usually work about the same, but the for … of loop is closer to a "manual" loop. However, forEach is a bit older, so may be available more places. Also, take a look at the similar map, for when you want to generate a new array for each item in the old one.

Improve this answer

6 Comments

No, don't look at map unless you are using the output, which is another array. Also, the OP is using the index of the element in the array, so for..of doesn't even make sense. forEach would work if you included the index argument. But a plain for loop is fine
I mentioned map because I see so many people pushing to arrays instead of using map :). But yes, for this specific case, forEach is better. But, also, check out map for future reference.
I see so many people using map for side effects instead of using forEach or a plain for loop :).
@HereticMonkey that bothers me less, honestly :). But usually I'm tying to remove side effects anyway, so map is what I want :).
@GarrettMotzner Do not encourage people to use .map() unless they want to manipulate the current iterating array. In this case for loop is just enough.
|
0 
for (var rowIndx = 1; rowIndx < movmentRows.length; rowIndx++) {
  var styles = {};
  styles[rowIndx] = {
    san: "slick-cellreadonly",
    ean: "slick-cellreadonly",
  };

  grid.setCellCssStyles("disabled", styles);
}

You create an empty object (styles), and then you assign the dynamic key (rowIndx) with the corresponding styles.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.