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

5 posts, 1 answers
  1. Victor
    Victor avatar
    24 posts
    Member since:
    Feb 2015

    Posted 07 May 2015 Link to this post

    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>

  2. Answer
    Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 08 May 2015 Link to this post

    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.

  3. Graham
    Graham avatar
    6 posts
    Member since:
    Mar 2017

    Posted 07 Apr in reply to Plamen Lazarov Link to this post

    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?

     

     

  4. Graham
    Graham avatar
    6 posts
    Member since:
    Mar 2017

    Posted 07 Apr in reply to Graham Link to this post

    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>

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1727 posts

    Posted 11 Apr Link to this post

    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.
Back to Top