Questions on UI for ASP.NET MVC Forum

1 answer

601 views

ColorPickerFor nullable - set default as null, change from color to null again etc

Hi! I try to use ColorPickerFor in my custom kendo grid editor popup, in this way:

<table style="width: 100%" class="detail-table detail-table-wider-first-column">

<tr>

<td>@Html.Label("Kolor:")</td>

<td>

<div>

@(Html.Kendo().ColorPickerFor(m => m.Color).HtmlAttributes(new { data_value_primitive = "true" }).Events(e => e.Close("colorpicker_select")).ClearButton(true))

</div>

</td>

</tr>

</table>

Color's type is string.

I would like to set my color in default as null (or empty string). Furthermore I would like to allow reseting previous value (some color) to null again. I added clearButton, but it was insufficient.
I tried to add some jquery function on onClose event:

function colorpicker_select(e) {

$("#Color").val($(".k-color-value").val()).change();

}

But it wasn't worked. I thought that data_value_primitive is necessary, but it wasn't worked too.

Can I get some help?

ColorPicker

answered on 28 May 2019

7 answers

59 views

Missing Localization in ColorPicker

Dear Telerik team.

Would it be possible for you to localize the five messages of the color picker widget?

It is pretty annoying to handle several languages by setting the color picker message option on every usage.

Or tell us what changes in the messages file are needed to have only one place to modify.

Kind regards

Bernd

ColorPicker

answered on 16 Feb 2018

2 answers

141 views

ColorPicker not behaving

I have a FlatColorPicker nested inside of a Kendo PanelBar that is not behaving. It is typically NOT visible when the page renders because it is inside a collapsed panel of the PanelBar. At this point it is acceptable except that the slider on the bottom only fills half of the full width of the picker, but it does work. After my "Save" js function for the page runs, the slider disappears leaving on the round slider handle.

@(Html.Kendo().FlatColorPicker()

.Name("screen_background_color_select")

.HtmlAttributes(new { style = "width: 245px" })

.Value(Model.screen_background_color)

.Events(ev => ev.Change("paletteChange"))

.Preview(true)

.Opacity(true)

)

I DO have some bootstrap styling inside the Panel but I have gone so far as to remove the FlatColorPicker from the PanelBar and bootstrap to no avail. Still behaves the same. I have verified that the Value string for the color is correct.

If I make the simple change to a ColorPicker, it works as it should. I change nothing from the above code except removing the "Flat".

ColorPicker

answered on 26 Sep 2017

4 answers

121 views

ColorPicker throws an error when cancelling changes in a grid

Hi,

I have a grid has its edit mode set to GridEditMode.InlineCell, and when I click on a particular cell I show a ColorPicker.

My grid definition is as follows:

@(Html.Kendo().Grid<TelerikMvcApp1.Models.Item>()

.Name("Grid")

.DataSource(dataSource => dataSource

.Ajax()

.Model(model => model.Id(m => m.Id))

.Read(read => read.Action("GetItems", "Home"))

.Update(up => up.Action("UpdateItems", "Home")).Model(model =>

{

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

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

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

})

)

.Columns(columns =>

{

columns.Bound(c => c.Id).Width(200);

columns.Bound(c => c.Color).ClientTemplate("#= Color # <div style='background-color: #= Color #; padding:10px;'></div>"); ;

})

.Pageable()

.Sortable()

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

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

)

The grid onEdit event is as follows:

function onEdit(e) {

if (e.container.index() === 1) {

var grid = e.sender;

var colourPicker = $("#Color").data("kendoColorPicker");

var originalColour = e.model.Color;

colourPicker.bind({

close: function () {

var newColour = this.value();

console.log("old colour = " + originalColour + ", new colour = " + newColour);

if (newColour !== originalColour) {

console.log("colour has changed");

grid.saveChanges();

}

else {

console.log("colour has not changed");

grid.cancelChanges();

}

});

colourPicker.open();

}

The model bound to the grid is as follows:

public class Item

{

public int Id { get; set; }

[UIHint("ColorEditor")]

public string Color { get; set; }

}

The ColorEditor template is defined as follows:

@(Html.Kendo().ColorPicker()

.Name("Color")

.Value("#=Color#")

)

When the ColorPicker is displayed, I choose a colour, click Apply and then call saveChanges() on the grid so that I can update some data on the server. That all works fine.

The problem I have is that if I click Cancel (or click Apply without changing the color) I want to change the grid so that it is no longer in edit mode. I attempt to do that calling cancelChanges() on the grid. The call to cancelChanges() results in this error being thrown:

Uncaught TypeError: Cannot read property 'children' of null

at init.close (kendo.all.min.js:24)

at init.trigger (kendo.all.min.js:9)

at init.window.kendo.window.kendo.devtools.kendo.ui.Widget.trigger (<anonymous>:587:33)

at init._trigger (kendo.all.min.js:20)

at init.close (kendo.all.min.js:20)

at init.close (kendo.all.min.js:24)

at init.cancel (kendo.all.min.js:24)

at init.trigger (kendo.all.min.js:9)

at init.window.kendo.window.kendo.devtools.kendo.ui.Widget.trigger (<anonymous>:587:33)

at init._cancel (kendo.all.min.js:24)

Am I going about this the wrong way?

I have been able to reproduce this error with versions 2014.3.1411.545, 2015.3.1111.545 and 2017.1.223.545 of Kendo.Mvc.dll

Thanks,

David

ColorPicker

answered on 06 Mar 2017

6 answers

644 views

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

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,

ColorPicker

answered on 16 Feb 2016

3 answers

53 views

Color Picker not working in IE10

I am using kendo color picker and its doesn't work fine in IE10(standard mode as well as compatibility mode)

I later found this issue in demo either
http://demos.telerik.com/aspnet-mvc/colorpicker/index

I am not able to select any color from the color picker in IE10

I am using win 7 64 bit environment.
Any workaround for this ?

ColorPicker

answered on 30 Mar 2015

6 answers

613 views

ColorPicker in Editor Template

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.

ColorPicker

answered on 23 Feb 2015

3 answers

260 views

ColorPicker does not update the Model

I am using a ColorPicker as part of a new user form. The selected colour is intended to be used later in a Scheduler.
I have tried setting the Value to Model.Colour directly and, using a scrip via a hidden textbox but cannot get it to work; the Model.Colour field always returns null.
My views and script are shown below .

I would appreciate any ideas about what I am doing wrong.

The View; some fields have been stripped out for clarity

@model ServiceUserViewModel<BR>@{<BR> ViewBag.Title = "New User";<BR>}<BR><BR>@using (Html.BeginForm())<BR>{<BR> @Html.AntiForgeryToken()<BR> @Html.ValidationSummary(true)<BR> <fieldset><BR> <legend>Registration Form</legend><BR> <table><BR> <tr><BR> <td class="editor-label"><BR> @Html.LabelFor(m => m.UserName)<BR> </td><BR> <td class="editor-field"><BR> @Html.EditorFor(m => m.UserName)<BR> @Html.ValidationMessageFor(m => m.UserName)<BR> </td><BR> </tr><BR> <tr><BR> <td class="editor-label"><BR> @Html.LabelFor(m => m.Password)<BR> </td><BR> <td class="editor-field"><BR> @Html.PasswordFor(m => m.Password)<BR> @Html.ValidationMessageFor(m => m.Password)<BR> </td><BR> </tr><BR> <tr><BR> <td class="editor-label"><BR> @Html.LabelFor(m => m.ConfirmPassword)<BR> </td><BR> <td class="editor-field k-password"><BR> @Html.PasswordFor(m => m.ConfirmPassword)<BR> @Html.ValidationMessageFor(m => m.ConfirmPassword)<BR> </td><BR> </tr><BR> <tr><BR> <td class="editor-label"><BR> @Html.LabelFor(m => m.FirstName)<BR> </td><BR> <td class="editor-field"><BR> @Html.EditorFor(m => m.FirstName)<BR> @Html.ValidationMessageFor(m => m.FirstName)<BR> </td><BR> </tr><BR> <tr><BR> <td class="editor-label"><BR> @Html.LabelFor(m => m.LastName)<BR> </td><BR> <td class="editor-field"><BR> @Html.EditorFor(m => m.LastName)<BR> @Html.ValidationMessageFor(m => m.LastName)<BR> </td><BR> </tr><BR> <tr><BR> <td class="editor-label"><BR> @Html.LabelFor(m => m.Colour)<BR> </td><BR> <td class="editor-field"><BR> @(Html.Kendo().ColorPicker()<BR> .Name("colourPicker")<BR> .Palette(ColorPickerPalette.WebSafe)<BR> //.Value(Model.Colour)<BR> .Events(events => events<BR> .Change("pickerSelect")<BR> )<BR> )<BR><BR> @Html.HiddenFor(m => m.Colour)<BR> @Html.ValidationMessageFor(m => m.Colour)<BR> </td><BR> </tr><BR> </table><BR> </fieldset><BR>}<BR><BR>@section Scripts {<BR> @Scripts.Render("~/bundles/jqueryval")<BR>}

The view is called from this grid

@(Html.Kendo().Grid<ServiceUserViewModel>()<BR> .Name("ServiceUsersGrid")<BR> .AutoBind(true)<BR> .Columns(columns =><BR> {<BR> columns.Bound(p => p.ServiceUserId).Hidden();<BR> columns.Bound(p => p.FirstName).Title("First Name");<BR> columns.Bound(p => p.LastName).Title("Last Name");<BR> columns.Command(command => command.Edit().UpdateText("Save")).Hidden();<BR> columns.Command(command => command.Destroy()).Width(100);<BR> })<BR> .ToolBar(toolbar => <BR> {<BR> toolbar.Create().Text("Add User");<BR> })<BR> .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("NewPerson"))<BR> .Sortable(sortable => sortable<BR> .AllowUnsort(true)<BR> .SortMode(GridSortMode.MultipleColumn))<BR> .Scrollable()<BR> .Events(e=>e.Edit("RenameNewUserWindow").DataBound("onDataBound").Change("onDataBound"))<BR> .DataSource(dataSource => dataSource<BR> .Ajax()<BR> .ServerOperation(false)<BR> .Events(events => events.Error("error_handler"))<BR> .Model(model =><BR> {<BR> model.Id(p => p.Id);<BR> model.Field(f => f.FirstName);<BR> model.Field(f => f.LastName);<BR> model.Field(f => f.Password);<BR> model.Field(f => f.ConfirmPassword);<BR> model.Field(f => f.Colour);<BR> })<BR> .Read(read => read.Action("ServiceUser_Read", "Services"))<BR> .Create(create => create.Action("ServiceUser_Create", "Services"))<BR> .Update(update => update.Action("ServiceUser_Create", "Services"))<BR> .Destroy(destroy => destroy.Action("ServiceUser_Destroy", "Services"))<BR> )

As stated, I have tried populating the model directly from the .Value field without success so I am now updating the HiddenFor<> text field using the following script:

function pickerSelect(e) {<BR> $("#Colour").val(e.value);<BR>}

After selection I can see that the text field has been updated with the colour as expected but when clicking submit the returned colour is always null.

Thanks in anticipation of your help

ColorPicker

answered on 15 Dec 2013

3 answers

44 views

Color picker doesn't work with legacy telerik themes

We are migrating our application from Telerik MVC extension to Kendo UI. But with Telerik legacy themes Color picker is not working. With Kendo themes this is working fine.

ColorPicker

answered on 06 Dec 2013

1 answer

100 views

Kendo colour picker not accepting RGB(x,x,x) string.

<div class="k-block">

<div class="k-header k-shadow"><span class="k-icon k-i-pencil"></span>Employee Colour</div>

<div class="editor-label">

@Html.LabelFor(x => x.BackgroundColour)

</div>

<div class="editor-field">

@(Html.Kendo().ColorPicker().Name("BackgroundColour").Palette(ColorPickerPalette.Basic).Value(Model.BackgroundColour))

@Html.TextBoxFor(x => x.BackgroundColourInput, new { @class = "editor-colour"})

</div>

<br />

<div class="editor-label">

@Html.LabelFor(x => x.TextColour)

</div>

<div class="editor-field">

@(Html.Kendo().ColorPicker().Name("TextColour").Palette(ColorPickerPalette.Basic).Value(Model.TextColour))

@Html.TextBoxFor(x => x.TextColourInput, new { @class = "editor-colour"})

</div>

<br/>

</div>

I'm using the code above to load a colour picker, the Model.BackgroundColour and Model.TextColour are strings as below:

rgb(0,255,255)

but when the form loads, the initial colour is always black, can someone tell me what I'm doing wrong please, as looking at the documentation it seems this should work. I should also point out that passing a string as below:

#00FFFF

does work.

Thanks.

ColorPicker

answered on 16 Aug 2013

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools