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

7 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
    1739 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.
  6. Roelande
    Roelande avatar
    46 posts
    Member since:
    May 2006

    Posted 12 Sep in reply to Viktor Tachev Link to this post

    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'));
    });
  7. Viktor Tachev
    Admin
    Viktor Tachev avatar
    1739 posts

    Posted 5 days and 12 hours ago Link to this post

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