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?
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
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".
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.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
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,
@(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"))
)
<
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
>
@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
>}
@(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
> )
function
pickerSelect(e) {<BR> $(
"#Colour"
).val(e.value);<BR>}
<
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
>