This is a migrated thread and some comments may be shown as answers.

impossible to display the color choosen by color picker in kendo grid

6 Answers 752 Views

ColorPicker

This is a migrated thread and some comments may be shown as answers.

Leo asked on 29 Jan 2016, 03:29 PM

errorcolorpicker.png

griddisplay.png

griddisplay-when-i-chose-color.png

Hello,

I have a grid with a colorpicker, when i choose the color from the palette I have the hex color code displayed instead of the color.

here is my TemplateEditor that i called QTPStatusEditor:

@model string

@(Html.Kendo().ColorPickerFor(m=>m)

.Name("Status")

.Palette(new[] { "rgba(255, 255, 255, 1)", "rgba(0, 204, 0, 1)", "rgba(255, 51, 51, 1)", "rgba(255, 201, 14, 1)" })

.Columns(4)

)

And here is My Grid:

@(Html.Kendo().Grid<Volvo.Qarma.MVCWebUIComponent.Models.Views.ProposedQToolViewModel>()

.Name("QTPGridItems_#=Id#")

.ToolBar(toolbar => toolbar.Template(@<text>

<div class="toolbar">

<input type="button" id="SaveProposedQTools" class="icon save k-grid-save-changes" value="@ScreeningResource.Screening_TreatmentPlan_SaveProposedQTools" />

</div>

</text>))

.Columns(columns =>

{

columns.Bound(o => o.RefQTool.Name).Title("Pro-active actions");

columns.Bound(o => o.Responsable).Title("Responsible");

columns.Bound(o => o.QtoolLeader).Title("Qtool Leader");

columns.Bound(o => o.Location.LongName).EditorTemplateName("LocationListEditor").Title("Location");

columns.Bound(o => o.Status).EditorTemplateName("QTPStatusEditor").Title("Status");

columns.Bound(o => o.PlannedStartDate).EditorTemplateName("PlannedStartDateEditor").Title("Planned start date").Format("{0:dd/MM/yyyy}");

columns.Bound(o => o.PlannedEndDate).EditorTemplateName("PlannedEndDateEditor").Title("Planned End date").Format("{0:dd/MM/yyyy}");

columns.Bound(o => o.LastUpdateDate).EditorTemplateName("LastUpdateDateEditor").Title("Last Update Date").Format("{0:dd/MM/yyyy}");

columns.Bound(o => o.LinkToDocument).Title("Link To Document");

columns.Bound(o => o.Comment).Title("Comment");

})

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.PageSize(10)

.Read(read => read.Action("QtpGridSelectedQtools", "QTP", new { itemId = "#=Id#" })

.Data("function() { return getCommodityID('QTPGridItems_#=Id#');}"))

.Create(create => create.Action("Create_TreatmentPlan", "Screening", new { itemId = "#=Id#" }))

.Update(update => update.Action("Update_TreatmentPlan", "Screening", new { itemId = "#=Id#" }))

.Model(model =>

{

model.Id(p => p.Id);

model.Field(p => p.Id).Editable(false);

model.Field(p => p.RefQTool.Name).Editable(false);

model.Field(p => p.Responsable).Editable(true);

model.Field(p => p.QtoolLeader).Editable(true);

model.Field(p => p.Location).Editable(true).DefaultValue(ViewData["defaultLocation"] as LocationsViewModel);

model.Field(p => p.PlannedStartDate).Editable(true);

model.Field(p => p.PlannedEndDate).Editable(true);

model.Field(p => p.LastUpdateDate).Editable(true);

model.Field(p => p.Status);

})

)

.Selectable()

.Pageable()

.Sortable()

.Editable(editable => editable.Mode(GridEditMode.InCell))

.ToClientTemplate()

)

I have seen in some examples that i need to add .ClientTemplate("<div style='background-color: #=Status#;padding:10px;'> </div>"); to :

columns.Bound(o => o.Status).EditorTemplateName("QTPStatusEditor").Title("Status").ClientTemplate("<div style='background-color: #=Status#;padding:10px;'> </div>");

But When I dothat I get a javascript error : Uncaught ReferenceError : Status is not defined that you can see also in attached files. and the line is no more displayed in the grid.

you can also see the result i get in attached files.

Thank you in advanced for your help

Regards,

6 Answers, 1 is accepted

Accepted