EditorTemplate in Grid

[Christine]

Hi,

I use EditorTemplates in Grids to change entries in cells. By pressing the check-icon a function is called.

It works fine as long as the grid has set:

.Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Multiple))

If the MultiSelect-Mode is not set, the click event on the span is not detected. How can I implement this for Single-Selection Mode?

And is it possible to generate a generic EditorTemplate to be used on different grids?

Thanks
Christine

--------------------------------------

Here the sources:

The grid:

<script id="suppress-text-template" type="text/x-kendo-template">
    <div id="suppress-text-container" style="height:100%;width:100%;">
       @(Html.Kendo().Grid<collact.admin.Models.Ticket.TextItemModel>()
            .Name("SuppressTextGrid")
            .Columns(columns =>
            {
                columns.Bound(p => p.EntryId).Editable("returnFalse");
                columns.Bound(p => p.Entry).Title("Texteintrag").EditorTemplateName("Ticket/GridSuppressEdit");
            })
            .HtmlAttributes(new { style = "height: 100%;" })
            .Sortable()
            .Editable(editable => editable.Mode(GridEditMode.InCell))
            .Events(e => e.Edit("sigGridSuppress_edit"))
            .Scrollable(scr => scr.Height(430))
            .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id(p => p.EntryId))
            .Read(read => read.Action("ReadListData", "Ticket"))
                )
            .Filterable()
            .Selectable(selectable => selectable
                    .Mode(GridSelectionMode.Multiple))
            .PersistSelection(true)
            .Resizable(resize => resize.Columns(true))
            .ToClientTemplate()
        )
    </div>
</script>

 

The script setting the text of the Textbox in the EditorTemplate:

function sigGridSuppress_edit(e) {
        var editForm = e.container;
        var model = e.model;

        editForm.find("#EntryId_entryid_edit").val(model.EntryId);
        editForm.find("#Entry_entrysuppress_edit").val(model.Entry);
    }

 

The EditorTemplate:

<table>
    <tr>
        <td>
            @(Html.Kendo().TextBox().Name("entrysuppress_edit"))

            <div style="display:none">
                @(Html.Kendo().TextBox().Name("entryid_edit"))
            </div>
        </td>
        <td style="border:none;padding:4px;width:36px">
            <span class='k-icon k-i-check-outline k-icon-36' style="float:left;display:block;display:inline-block" onClick="editSuppressText()" />
        </td>
    </tr>
</table>

[Stoyan]

Hi Christine,

Thank you for sharing your code. I was able to reproduce the reported issue.

I need some additional time to determine its cause and suggest a possible solution. I will contact you again as soon as possible.

In regards to your second question placing the Editor Template in the following directory  Views/Shared/EditorTemplates  will also make it available for other Components in your application.

Regards,
Stoyan
Progress Telerik

[Christine]

Hi Stoyan

thanks for your answer. I am looking forward to the solution.

My second question was maybe poor formulated. I know that I can access the EditorTemplate via the shared folder. My question is: "how can I make it more generic?". At the moment, I use ids of textboxes directly. Maybe I have to create them dynamically at runtime.

Best regards

Christine

[Stoyan]

Hi Christine,

I have consulted with our DevTeam and the reported behavior where the click event of the span in not detected is expected. The reason is that edited cells close when they are blurred. This happens before the click is registered and therefore the clicked item doesn't exist anymore to trigger the event handler.

It appears that you have found a viable workaround with the GridSelectionMode set to Multiple. In addition Konstantin's reply in the How to prevent cellClose in InCell editing forum thread explains that to prevent the cellClose you can apply validation to the cell input. However this still won't trigger the click event. As an alternative you can utilize Window.confirm().   

Another approach I would suggest is using InLine editing and a Command Column to Save the updated data. This approach is shown in our Grid Inline editing Demo.

In regards to your second question the EditorTemplate you have defined can be used for all Grid Columns. The field name of the column will get appended to the id of the TextBox input. This will produce different id as the field names of the columns are different. To address this you can inspect the e.container exposed by the Edit event of the Grid.

I hope the information above is helpful. Please let me know, if you have further questions.

[Christine]

Hi Stoyan

thanks for your answer.

Meanwhile, I found another quite simple solution: I just put the span element inside of a button and style it without border, outline, etc.

<button  style="display:block;background:none;border:none;color:white;outline:none;outline-color:transparent"><span class='k-icon k-i-check-outline k-icon-36'/></button>

This works with SingleSelection as well. I put the style entries into a css file, I added it here just for clarification.

Regards
Christine

[Stoyan]

Hi Christine,

I am happy to hear you have found a working solution to the issue.

Thank you for sharing your approach with the community.