Icon only Update/Cancel commands for inline editing

2 posts, 0 answers
  1. Matt
    Matt avatar
    1 posts
    Member since:
    Dec 2010

    Posted 20 May 2020 Link to this post

    Hi,

    I am using .net core tag helpers to display a grid with inline editing.

    I am able to display Icon only commands for Edit and Delete. But I am struggling to find any documentation to customize the same behaviour for Update/Cancel

     

    <kendo-grid name="grid" height="550" resizable="true">
        <datasource page-size="100" type="DataSourceTagHelperType.Ajax" server-operation="true" name="dataSource" batch="true">
            <transport>
                <read url="/Test/read" type="post"  />
                <update url="/Test/create"  />
                <destroy url="/Test/delete"  />
                <create url="/Test/create"  />
            </transport>
            <schema>
                <model id="Id">
                    <fields>
                        <field name="FirstName">
                            <validation required="true" />
                        </field>
                        <field name="LastName"></field>
                        <field name="Email"></field>
                    </fields>
                </model>
            </schema>
        </datasource>
        <sortable enabled="true" />
        <filterable enabled="true" extra="false">
            <operators>
                <string eq="Is equal to" contains="Contains" startswith="Starts with" neq="Is not equal to" />
            </operators>
        </filterable>
        <pageable button-count="5" refresh="true" page-sizes="new int[] { 10,20 }" />
        <editable mode="inline" />
        <columns>
            <column width="75">
                <commands>
                    <column-command name="edit" template="#=edittemplate(data)#">
                    </column-command>
                    <column-command name="destroy" template="#=deletetemplate(data)#"></column-command>
                </commands>
            </column>
            <column field="FirstName" title="FirstName" width="50"></column>
            <column field="LastName" title="LastName" width="50"></column>     
            <column field="Email" title="Email" width="75"></column>
        </columns>
    </kendo-grid>
     
    edittemplate = function (data) {
        var template = '<button type="button" class="k-button k-button-icon"><span class="k-icon k-i-update"></span></button>';
        return template;
    };
  2. Nikolay
    Admin
    Nikolay  avatar
    293 posts

    Posted 25 May 2020 Link to this post

    Hello Matt,

    Thank you for sharing the Grid declaration.

    I would suggest using the following templates for the Edit and Delete buttons:

            <column width="10">
                <commands>
                    <column-command name="edit" template="#=edittemplate(data)#">
                    </column-command>
                    <column-command name="destroy" template="#=deletetemplate(data)#"></column-command>
                </commands>
            </column>
           ...
    <script>
        function edittemplate(data) {
            var template = '<a role="button" class="k-button k-button-icontext k-grid-edit" href="#""><span class="k-icon k-i-edit"></span></a>';
            return template;
        };
    
        function deletetemplate(data) {
            var template = '<a role="button" class="k-button k-button-icontext k-grid-delete" href="#"><span class="k-icon k-i-close"></span></a>'
            return template;
        }
    </script>

    Which will result in the following rendered button:

    For your convenience, I am attaching a small MVC Core project demonstrating the above.

    Let me know if you have any questions.

    Regards,
    Nikolay
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top