Color picker and Kendo Grid.

[Manish]

How to put kendo color picker inside kendo grid cell. And how to change cell color after selection of color from color picker.?

[Tsvetomir]

Hi Manish,

If you would like to display a ColorPicker within any of the cells of the grid, use a custom EditorTemplate and decorate the model's field with the UIHint() attribute:

ColorPicker EditorTemplate created and located in the ~Views/Shared/EditorTemplates/ColorPickerEditor.cshtml: 

@(Html.Kendo().ColorPicker()
)

And the model:

[UIHint("ColorPickerEditor")]
public string Color{ get; set; }

In order to make the cell in the desired color, refer to the steps below:

1. Declare a ClientTemplate and configure its background color to be a kendo.template and bind it to the field:

columns.Bound(p => p.Color).ClientTemplate("My text").HtmlAttributes(new { style = "background-color:\\##=Color#" });

2. Initialize the ColorPicker widgets in the dataBound event handler:

.Events(x=> x.DataBound("onDataBound"))

function onDataBound() {
    var grid = this;

    grid.tbody.find('tr').each(function () {
        var row = $(this);
        var dataItem = grid.dataItem(row);

        kendo.bind(row, dataItem);
    })
}

This is one approach to include a color picker in one of the grid's cells. It would be great if you share additional details on the exact scenario you are willing to achieve. Sharing screenshots and explaining on the current and expected appearance would be of help to me.


Kind regards,
Tsvetomir
Progress Telerik

[Manish]

Thank You Tsvetomir.

Even i wanted to put a blank row between 2 existing rows. Please help me with this problem.

[Tsvetomir]

Hi Manish,

A blank row can be added to the grid in a handful of ways. For example, access the data source of the grid and programmatically insert an object at a specific index. 

$("#button").on("click", function(e) {
  var index = 4; //random hard-coded index
  var grid = $("#grid").data("kendoGrid");
  var dataSource = grid.dataSource;

  var newItem = dataSource.insert(index, {});

And the approach demonstrated in a sample Dojo:

https://dojo.telerik.com/UfulosuC

Let me know how this works for you. 


Best regards,
Tsvetomir
Progress Telerik

[Manish]

Thank you Tsvetomir,

Actually i need a button inside a grid where i can click and add button as shown in the screenshot. Please help me out !!! It has color picker also.

[Tsvetomir]

Hi Manish,

If you would like to add the custom buttons which are at the rightmost column, then you can make use of the Command column:

columns.Command(cmd => {
    cmd.Destroy().Text(" ").IconClass("k-icon k-i-trash");
    cmd.Custom(" ").IconClass("k-icon k-i-plus").Click("onClick");
});

The Destroy button, by default, triggers the delete operation. Therefore, for the custom button, you can attach a click event and execute custom logic within its handler:

<script>
    function onClick(e){
        // handle click event
    }
</script>

As per showing a color picker within a column of the grid, use a ClientTemplate and initialize a Kendo UI ColorPicker widget. More information on how to achieve this can be found here:

https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-use-kendo-ui-widgets-inside-grid-client-column-templates

Try the suggestions above and let me know how they work out for you.


Best regards,
Tsvetomir
Progress Telerik