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

7 posts, 1 answers
  1. Leo
    Leo avatar
    9 posts
    Member since:
    Dec 2015

    Posted 29 Jan Link to this post

    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,

     

  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 01 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Leo
    Leo avatar
    9 posts
    Member since:
    Dec 2015

    Posted 01 Feb in reply to Dimiter Madjarov Link to this post

    Hi Dimiter,

    It's perfect, thank you for your help. 

    Regards,

  5. Leo
    Leo avatar
    9 posts
    Member since:
    Dec 2015

    Posted 01 Feb in reply to Dimiter Madjarov Link to this post

    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.

  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 01 Feb Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Leo
    Leo avatar
    9 posts
    Member since:
    Dec 2015

    Posted 15 Feb in reply to Dimiter Madjarov Link to this post

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

     

    Regards,

  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 16 Feb Link to this post

    Hello Leo,

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

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready