Palette is a device which can be used to register fill and stroke objects being used when draw grid cells in advance and use them if necessary.
First, register the palette in the grid.
grid.registerFillPalette({
name: 'f01',
fills: ['#1000ff00', '#2000ff00', '#3000ff00', '', '#4000ff00', '#5000ff00']
});
grid.registerStrokePalette({
name: 's01',
strokes: ['#ff0000', '#00ff00', '#0000ff', null]
});
If "fills" array is included in setting object which is specified by the parameter, it will be registered as Fill Palette, and if "strokes" array is included, it will be registered as Stroke Palette. If not, it will be ignored. Fill or Stroke item included in the array is the same as the one when specify the related property values in GridStyles. The value, such as an empty string, undefined or null, which cannot be created as rendering object, is specified as null object. So specified and created draw object will be set in GridStyles which is related to the corresponding area at grid rendering point.
You can set the items included in the registered palette in GridStyles properties which specify fill or stroke object.
grid.body().setStyles({
background: 'p(f01)',
borderRight: 'p(s01)'
});
Specify the palette name which has been registered in advance between "p(" and ")". Later, it will raise a request to the palette when the draw object is needed actually, and then palette will return the draw object set in the current location value and increase one of the location value. The location value will be increased to the number of palette items and initialized to 0 again.
In other words, if specify the palette in this way, you will not be able to predict the palette item used actually in advance. If the actual color value is not important and you only need to distinguish between the areas, you can use this way.
If the color value has been determined in business in the application and you need to use a special value in the palette items, you should specify the location value.
colName.setStyles({
background: 'p(f01:1)'
});
colAddr.setStyles({
background: 'p(f01:2)'
});
colSalary.setStyles({
background: 'p(f01:12)'
});
Delimit after the palette name by ":" and specify item location value as an integer. The first item will be 0. If specify more than the number of palette items, it will return the items corresponding to the remainder after dividing by the number. In other words, if specify as "pal(f10:12)" when the number of palette items is 10, the third item will be returned. In addition, if specify the location value as "?" rather than to increase it by one internally, it will return the item existing in any location among those contained in the palette.
You can reset the internal location to a specific one when the palette item is returned.
colName.setStyles({
background: 'p(f01:7:0)'
});
After specifying the location and delimiting by ":", you can specify the reset location value. In other words, the example above initializes the item location which will be returned next by palette to 0.
colAddr.setStyles({
background: 'p(f01::5)'
});
If only reset it as above and do not specify the item location, it will return the item in the initialized location.
You can specify the variable which can be recognized by the range of using this palette with item location value.
grid.body().setRowStyles({
background: 'p(f01:row)'
});
For example, rowStyles is Style Set which is used to draw data rows of Grid Data Area. If specify background property as palette and item location value as "row", it will return the palette item corresponding to Row Location Value which currently runs the drawing. It is the individual area of using the palette that explain what kind of variable will be used.
In this way, you can simplify the code or flexibly implement the display mode only by style settings. And, you can also implement the application by preparing the palette configuration apart from the code and loading in the run time.
$(function () {
grid.loadPalettes([{
name: 'f01',
fills: ['#1000ff00', '#2000ff00', '#3000ff00', '', '#4000ff00']
}, {
name: 's01',
strokes: ['#ff0000', '#00ff00', '#0000ff', null]
}]);
});