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

[Leo]

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;'>&nbsp;</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,

 

[Dimiter Madjarov]

Hello Leo,

Indeed using a client template is the correct way to go in the current scenario. Since the current Grid is in a client template itself, the hash symbols which are part of the template should be escaped.
E.g.

.ClientTemplate("<div style='background-color: \\#=Status\\#;padding:10px;'> </div>");

Regards,
Dimiter Madjarov
Telerik

[Leo]

Hi Dimiter,

It's perfect, thank you for your help. 

Regards,

[Leo]

Hello again Dimiter,

I have one more question, the solution that you gave me worked only for Chrome, is there any way to use that with IE11 ?

Thank you for your help.

[Dimiter Madjarov]

Hello Leo,

This is a general approach when using the template and should not be related to the browser. What is the exact issue that you are experiencing? I would suggest to check the browsers developer tools for JavaScript errors.

Regards,
Dimiter Madjarov
Telerik

[Leo]

Thank you Dimiter Again, In fact it was a CSS problem.

 

Regards,

[Dimiter Madjarov]

Hello Leo,

Thanks for the update. I am glad the issue is resolved.

Regards,
Dimiter Madjarov
Telerik