Grid Columns Command Edit().Template How to pass data item

2 posts, 1 answers
  1. Meypar
    Meypar avatar
    10 posts
    Member since:
    May 2019

    Posted 16 Oct 2019 Link to this post

    Hello,

    I'm trying to add a custom edit button with dataitem information to grid because I need to check each row property value "Permission" to show the button or not.

    I built this code (each comment // Line # identifies one test):

    <script id="grid-button-edit-template" type="text/x-kendo-template">
        #if(data.Permission >= 3) {#
            <a class="k-button k-grid-edit">Edit</a>
        #}#
    </script>
     
    <script type="text/javascript">
        var actionButtonsTemplate = kendo.template($('#grid-button-edit-template').html());
    </script>
     
    @(Html.Kendo().Grid<MyModel>()
            .Name("GridName")
            .Columns(columns =>
            {
                columns.Command(c =>
                {
                    // Line #1
                    c.Edit().TemplateId("grid-button-edit-template");
                    // Line #2
                    c.Edit().Template("#=actionButtonsTemplate(data)#");
                    // Line #3
                    c.Edit().Template("grid-button-edit-template");
                });
                // Line #4
                columns.Template("#=actionButtonsTemplate(data)#");
            })
            ...
    )

     

    I have a couple of issues:

    In Line #4 everything is Ok but

     - When I set edition InLine the buttons [Save] & [Cancel] don't appear

     - On edition PopUp I can't set [Save] & [Cancel] text values (Like I do with c.Edit().UpdateText("My Text Update"))

    Lines #1, #2, #3 don't work, I can't pass the dataitem information to the template.

    Which one is the best approach? How I can solve the issues?

    Regards,

    Ivan

  2. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1081 posts

    Posted 18 Oct 2019 Link to this post

    Hi, Maypar,

    If I understand the requirement correctly, you can use the button's Visible() method which allows you to provide a JavaScript script function name. In the function, you receive the dataItem as an argument so you can check per row if the button will be visible or not:

    columns.Command(c => c.Edit().Visible("hasPermission"));
    
    <script>
        function hasPermission(dataItem) {        
            return dataItem.Permission >= 3;
        }
    </script>

    Kind Regards,
    Alex Hajigeorgieva
    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