ColorPicker in Editor Template

7 posts, 1 answers
  1. Daniel
    Daniel avatar
    12 posts
    Member since:
    Sep 2013

    Posted 06 Jan 2014 Link to this post

    Hello,
     
    I have an editable grid which is set up to use PopUp edit mode. One of the columns (color) is a string that holds a hex value for a color. I have created an editor template to handle the edit and create functions.  Here is how I define the grid:

    @(Html.Kendo().Grid<DL.Data.PayCodes>()
                .Name("grdPayCodes")
                .Columns(columns =>
                {
                    columns.Bound(p => p.pay_code).Width(120).Title("Code");
                    columns.Bound(p => p.color).Width(75).Title("Color").ClientTemplate("<div style='width: 100%; text-align: center;'><div style='width: 25px; height: 25px; background: #=color#; -moz-border-radius: 17px; -webkit-border-radius: 17px; border-radius: 17px; margin: auto; #= SetBorder(this, color)#'></div></div>");
                    columns.Bound(p => p.description).Title("Description");
                    columns.Command(command => { command.Edit(); command.Custom("Delete").Click("DeletePayCodes_Click"); }).Width(180).HtmlAttributes(new { style = "text-align: center;" });
                })
                .ToolBar(toolbar => toolbar.Create())
                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("PayCodesAddRecordTemplate"))
                .Sortable()
                .Scrollable()
                .HtmlAttributes(new { style = "height:430px; margin-top: 7px;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(p => p.pay_code))
                    .Create(update => update.Action("CreatePayCodes", "Settings"))
                            .Read(read => read.Action("GetPayCodesDSGrid", "Common"))
                            .Update(update => update.Action("UpdatePayCodes", "Settings"))
                                    .Events(events => events.Error("grdPayCodes_ErrorHandler").RequestEnd("grdPayCodes_RequestEnd"))
                )
                        .Events(ev => ev.DataBound("grdPayCodes_DataBound").Edit("grdPayCodes_Edit"))
            )
    and here is how I define my editor template
    <table style="margin-left: 5%; width: 90%;">
        <tr>
            <td class="label-cell">
                <label for="pay_code">Code</label>
            </td>
            <td>
                <input id="pay_code" name="pit_name" class="data-cell" data-bind="value: pay_code">
            </td>
        </tr>
        <tr>
            <td class="label-cell">
                <label for="color">Color</label>
            </td>
            <td>
                @(Html.Kendo().ColorPicker()
                    .Name("color")
                    .Value("#ffffff")
                )
            </td>
        </tr>
        <tr>
            <td class="label-cell">
                <label for="description">Description</label>
            </td>
            <td>
                <input id="description" name="description" class="data-cell" data-bind="value: description">
            </td>
        </tr>
    </table>
    Everything works well for the edit, however when I try to create a new record, I get an error: Cannot Parse Color: at kendo.all.min.js, line 17, column 6374

    I understand that when creating a new record the color property of the model is an empty string, but I am initializing the color picker with a default value of #ffffff. Why am I still getting this error?

    I am using version 2013.3.1119.340 with VS 2013. I am testing on IE 11, but I tried FF and I am still getting the same error.

    Any help would be greatly appreciated.

    Thank you.






  2. Answer
    Daniel
    Daniel avatar
    12 posts
    Member since:
    Sep 2013

    Posted 07 Jan 2014 Link to this post

    Hi Daniel,

    I answered this question in the support thread. I hope my answer was helpful for you.

    Have a great day!

    Regards,
    Dimiter Madjarov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Daniel
    Daniel avatar
    12 posts
    Member since:
    Sep 2013

    Posted 07 Jan 2014 Link to this post

    Thank you Dimiter. Your suggestion to specify the default value of the "color" column as model.Field(f => f.color).DefaultValue("#ffffff"); corrected the problem.

    Thank you for your help.
  5. Masaab
    Masaab avatar
    15 posts
    Member since:
    Nov 2013

    Posted 27 Apr 2014 Link to this post

    IF you are using MVVM pattern. you can set the value to null as default value.
    <input data-role="colorpicker"
                      data-bind="visible: isVisible,
                                 enabled: isEnabled,
                                 value: selectedColor,
                                 events: { change: onChange }"
                    style="width: 180px">

    var viewModel = kendo.observable({
        selectedColor: null,
        isVisible: true,
        isEnabled: true,
        onChange: function() {
            kendoConsole.log("event :: change (" + this.get("selectedColor") + ")");
        }
    });
    kendo.bind($("#example"), viewModel);

  6. Daniel
    Daniel avatar
    12 posts
    Member since:
    Sep 2013

    Posted 28 Apr 2014 in reply to Masaab Link to this post

    Thank you Masaab.

    I will give your suggestion a try.  I think your approach might be more efficient than the one I am using currently.

    Thanks for your help.
  7. prakash
    prakash avatar
    8 posts
    Member since:
    Feb 2015

    Posted 23 Feb 2015 in reply to Daniel Link to this post

    Can you help me understand what exactly you mean by model.Field(f => f.color).DefaultValue("#ffffff"); 
    Where do you add this line ?

    I am having the same issue and I couldn't really get this answer.
  8. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 23 Feb 2015 Link to this post

    Hello Prakash,

    The default value is set in the dataSource model configuration.
    E.g.

    .DataSource(dataSource => dataSource
      .Ajax()
      .PageSize(20)
      .Model(model =>
          {
              model.Id(p => p.ProductID);
              model.Field(p => p.ProductName).DefaultValue("default");
          })

    Regards,
    Dimiter Madjarov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET MVC is VS 2017 Ready