Color picker and Kendo Grid.

6 posts, 0 answers
  1. Manish
    Manish avatar
    3 posts
    Member since:
    Jan 2019

    Posted 18 Feb 2019 Link to this post

    How to put kendo color picker inside kendo grid cell. And how to change cell color after selection of color from color picker.?
  2. Tsvetomir
    Admin
    Tsvetomir avatar
    830 posts

    Posted 21 Feb 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Manish
    Manish avatar
    3 posts
    Member since:
    Jan 2019

    Posted 25 Feb 2019 in reply to Tsvetomir Link to this post

    Thank You Tsvetomir.

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

  4. Tsvetomir
    Admin
    Tsvetomir avatar
    830 posts

    Posted 27 Feb 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. Manish
    Manish avatar
    3 posts
    Member since:
    Jan 2019

    Posted 28 Feb 2019 in reply to Tsvetomir Link to this post

    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.

  6. Tsvetomir
    Admin
    Tsvetomir avatar
    830 posts

    Posted 05 Mar 2019 Link to this post

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top