How to open the editor form when a row is selected on a grid

[Victor]

I have the following code. i was able to determine the click on a row. but cant get the popup form to open when the row is selected.

 

@(Html.Kendo().Grid<grid.Model.entity>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.phone).Title("Phone").HeaderHtmlAttributes(new { style = "font-size:13px;" });
                columns.Bound(p => p.address).Title("Home Address").HeaderHtmlAttributes(new { style = "font-size:13px;" });
                columns.Bound(p => p.email).Title("Email").HeaderHtmlAttributes(new { style = "font-size:13px;" });
            })
            .ToolBar(toolbar => 
                toolbar.Create()
            )
            .Editable(ed => ed.Mode(GridEditMode.PopUp))
            .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new { style = "height:730px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(30)
                .Events(events => events.Error("error_handler"))
                .Model(model => model.Id(p => p.ID))
                .Create(update => update.Action("EditingPopup_Create", "Welcome"))
                .Read(read => read.Action("Info", "Welcome").Data("searchText"))
                .Update(update => update.Action("EditingPopup_Update", "Welcome"))
                    )
            .Resizable(resize => resize.Columns(true))
        )
            <script type="text/javascript">                
                function error_handler(e) {
                    if (e.errors) {
                        var message = "Errors:\n";
                        $.each(e.errors, function (key, value) {
                            if ('errors' in value) {
                                $.each(value.errors, function () {
                                    message += this + "\n";
                                });
                            }
                        });
                        alert(message);
                    }
                }
                $('table').click(function () {
                    var grid = $("#grid").data('kendoGrid');
                    grid.select().each(function () {                                            
                        // how to open the form from here?
                    })
                });                    
            </script>

[Plamen Lazarov]

Hello Victor,

This can be done quite easily by modifying the script which is provided in the example that you have sent us. It should look something like this:

$("#grid tbody").on("click", "tr", function () {
       var grid = $("#grid").data('kendoGrid');
       grid.editRow(this);
   });

This way we select the table row and on("click")  the editRow method is applied.

Regards,
Plamen Lazarov
Telerik

 

[Graham]

I have implemented the above solution which works as expected.  I have a tickbox in one of my row cells in the inline editor.  I am unable to tick or untick this checkbox.  Is there a fix for this?

 

 

[Graham]

Here is my code

    <div> 
        @(Html.Kendo().Grid<iTrak.Service.ViewModels.ListVm>()
            .Name("grid")
            .Columns(columns =>
            {
                //columns.ForeignKey(p => p.ListTypeId, (System.Collections.IEnumerable)ViewData["ListTypes"], "Id", "Description").Title("List Type").Width(120);
                columns.Bound(p => p.ListTypeId).Visible(false);
                columns.Bound(p => p.Value).Width(120);
                columns.Bound(p => p.Default).Width(120).ClientTemplate("<input disabled type='checkbox' #= Default ? checked='checked' :'' # />");
                columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
            })
            .ToolBar(toolbar =>
            {
                //toolbar.Create();
                toolbar.Template(@<text>
                    <a class="k-button k-button-icontext k-grid-add" href="/iTrak/Admin/List_Read?grid-mode=insert"><span class="k-icon k-i-add"></span>Add</a>
                    <div class="toolbar" style="float:right;">
                        <label for="listtypes">Filter by:</label>
                        @(Html.Kendo().DropDownList()
                                        .Name("listtypes")
                                        .DataTextField("Description")
                                        .DataValueField("Id")
                                        .AutoBind(true)
                                        .Events(e => { 
                                            e.Change("listTypesChange");
                                            e.DataBound("listTypesChange"); 
                                        })
                                        .HtmlAttributes(new { style = "width: 250px;" })
                                        .DataSource(ds =>
                                        {
                                            ds.Read("List_Types", "Admin");
                                        })
                        )
                    </div>
                </text>);
            })
            .Editable(editable => editable.Mode(GridEditMode.InLine))
            .Pageable()
            .Sortable()
            .Scrollable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Events(events => {
                    events.Error("onErrorHandler");
                    events.RequestEnd("onGridRequestEnd");
                })
                .Model(model => model.Id(p => p.Id))
                .Create(update => update.Action("List_Create", "Admin").Data("onListCreate"))
                .Read(read => read.Action("List_Read", "Admin"))
                .Update(update => update.Action("List_Update", "Admin"))
                .Destroy(update => update.Action("List_Destroy", "Admin"))
                
            )
        )

        <script type="text/javascript">

            $(function () {
                $("#grid tbody").on("click", "tr", function () {
                    var grid = $("#grid").data('kendoGrid');
                    grid.editRow(this);
                });
            });

            function onErrorHandler(e) {
                if (e.errors) {
                    var message = "Errors:\n";
                    $.each(e.errors, function (key, value) {
                        if ('errors' in value) {
                            $.each(value.errors, function () {
                                message += this + "\n";
                            });
                        }
                    });
                    alert(message);
                }
            }

            function onListCreate(o) {
                //get the ID from a HTML element or a variable
                o.ListTypeId = $("#listtypes").val();
                return o;
            }            

            function listTypesChange() {
                var value = this.value(),
                     grid = $("#grid").data("kendoGrid");

                if (value) {
                    grid.dataSource.filter({ field: "ListTypeId", operator: "eq", value: parseInt(value) });
                } else {
                    grid.dataSource.filter({});
                }
            }

            function onGridRequestEnd(evt) {
                if (evt.type === "update") {
                    evt.sender.read();
                }
            }
        </script>
    </div>

[Viktor Tachev]

Hello Graham,

The reason for this is that the event is triggered also when you click on the checkbox. This is because the element it placed inside the row. 

In order to have the editing work as expected you can modify the code a bit. Check out the updated snippet below:

$("#grid tbody").on("click", "tr", function (e) {
       if (e.target.nodeName == "TD") {
           var grid = $("#grid").data('kendoGrid');
           grid.editRow(this);
       }
   });

Regards,
Viktor Tachev
Telerik by Progress

[Roelande]

I altered the script a bit. This way it works on all grids and also on grids that use Hierarchy or Frozen columns.

I also exclude the td that contain my crud buttons.

$("body").on("click", "td[role='gridcell']:not(.actions)", function () {
    var grid = $(this).closest("div[data-role='grid']").data('kendoGrid');
    grid.editRow($(this).closest('tr'));
});

[Viktor Tachev]

Hi Roelande,

Thank you for sharing your approach with the community. That can help someone looking for similar functionality.

Regards,
Viktor Tachev
Progress Telerik