This is a migrated thread and some comments may be shown as answers.

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

6 Answers 160 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Victor
Top achievements
Rank 1
Victor asked on 07 May 2015, 02:07 PM

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>

6 Answers, 1 is accepted

Sort by
0
Accepted
Plamen Lazarov
Telerik team
answered on 08 May 2015, 08:20 AM

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
 

See What's Next in App Development. Register for TelerikNEXT.

0
Graham
Top achievements
Rank 1
answered on 07 Apr 2017, 02:58 PM

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?

 

 

0
Graham
Top achievements
Rank 1
answered on 07 Apr 2017, 02:59 PM

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>

0
Viktor Tachev
Telerik team
answered on 11 Apr 2017, 11:52 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Roelande
Top achievements
Rank 1
answered on 12 Sep 2017, 09:14 AM

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'));
});
0
Viktor Tachev
Telerik team
answered on 14 Sep 2017, 08:28 AM
Hi Roelande,

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

Regards,
Viktor Tachev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Victor
Top achievements
Rank 1
Answers by
Plamen Lazarov
Telerik team
Graham
Top achievements
Rank 1
Viktor Tachev
Telerik team
Roelande
Top achievements
Rank 1
Share this question
or