Default random color of a ColorPicker

[serge]

I use a ColorPicker in an EditorTemplate of an object edited via Popup of the Grid. 

When Editing, it displays the Color of the edited object, that is OK. However, when an object is created, the ColorPicker should display, by default, a random color. 

How to detect, in the EditorTemplate, that the object is created, and generate a random color?

<div class="form-group">
    <label asp-for="Couleur" class="control-label"></label>
    @(Html.Kendo()
        .ColorPicker()
        .Name("Couleur")
        .Value("#ff0000") //"# (0) ? 'yellow' : 'red'#" does not help, it displays black anyway!!!!
        .Messages(b => b
            .Apply("Appliquer")
            .Cancel("Annuler")
            .PreviewInput("Prévisualiser"))
        )
    <span asp-validation-for="Couleur" class="text-danger"></span>
</div>

[Tsvetomir]

Hi Serge,

The default color of the picker can be changed via the DefaultValue option of the field:

m.Field(f => f.Couleur).DefaultValue("red");

Alternatively, you could change it inside the Edit event of the widget. Ensure that the item is new and change it accordingly:

.Events(ev=>ev.Edit("onEdit"))

<script>
    function onEdit(e) {
        if (e.model.isNew()) {
            e.model.set("Couleur", "yellow");// or any random color
        }
    }
</script>

I hope you find this helpful.

 

Regards,
Tsvetomir
Progress Telerik

[serge]

on the server side, as the code is in a template editor, that is evaluated only once, the random can't be evaluated multiple time, so, there will be no random.
And why does the Value option not working? the Value option is not working nor on server side, nor onclient side!

[Tsvetomir]

The editor is used to only create the "skeleton" of the editor. It is created by using specific data-bind attributes that are used later on to bind the data item to the editor. Hence, when the widget is instantiated, it takes the Value option into account and then, when it has been created with the respective attribute, it is dynamically bound to the data item of the data source. Hence, the value from the data item takes precedence over the Value option of the widget. 

JavaScript exposes Random as well and you could utilize it to generate the random colors on the client-side as I have shown in the answer above.