Custom column command in child grid causes parent to collapse all rows.

4 posts, 0 answers
  1. Dave Hayward
    Dave Hayward avatar
    42 posts
    Member since:
    Jul 2012

    Posted 31 May Link to this post

    I have a parent grid with a client detail template.The client detail template has a child grid with a custom column button. When I click the custom command button in the child grid, it calls my function. After the function is executed, the parent grid's data source is re-read. This causes all expanded rows to be collapsed.

    My code is not doing this, it seems to be the default behaviour of the custom command. In fact, to diagnose this behaviour, my customer button is calling an empty function.

    My child grid also has a standard column 'Destroy' function. When that button is clicked, it does not cause the parent grid's data to be re-read.

    Is there any way I can get my customer function to behave like the 'destroy' function and prevent the parent grid's data source from being re-read? 

  2. Tsvetina
    Admin
    Tsvetina avatar
    2073 posts

    Posted 02 Jun Link to this post

    Hi Dave,

    I tried to reproduce the problem in the local demos by adding a custom command button to the Detail Template demo but, on my side, triggering it does not refresh the Grid. You can see this in the following video:
    https://www.screencast.com/t/qcrfVxTbEMr

    I guess that there is something different in your Grid set up that is causing this behavior. Can you show me your full Grid definition, including the custom button and its click handler function? Or can you tell what else needs to be changed in the Detail Template demo to reproduce the issue? 

    Regards,
    Tsvetina
    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.
  3. Dave Hayward
    Dave Hayward avatar
    42 posts
    Member since:
    Jul 2012

    Posted 06 Jun in reply to Tsvetina Link to this post

    Tsvetina,

    Here is the definition for my grid. To help discover the source of my problem, I commented out the body of the js functions 'CommitteeMoveUp' and 'CommitteeMoveDn'. The event handler 'CommitteesGridDataBound' only expands the first row.

    Hopefully you can see what I'm doing wrong.

    @(Html.Kendo().Grid<CLIENT.Website.Models.CommiteeDetailViewModel>()
        .Name("CommitteesGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name).Width(200);
            columns.ForeignKey(p => p.ChairMbrId,
           (System.Collections.IEnumerable)ViewData[Constants.ViewDataTypes.Members], "Id", "Name").Width(200);
            columns.Bound(c => c.ChairMbrEmail).Width(200);
            columns.Bound(c => c.IncludeExecSecr).Width(120);
            columns.Command(command =>
            {
                command.Custom(SiteAdministrationResources.ManageCommittees_Committees_View_Up_Btn).Click("CommitteeMoveUp");
                command.Custom(SiteAdministrationResources.ManageCommittees_Committees_View_Down_Btn).Click("CommitteeMoveDn");
                command.Edit();
                command.Destroy();
            });
        })
        .ToolBar(toolBar =>toolBar.Create())
        .ClientDetailTemplateId("CommitteeMembersTemplate")
        .HtmlAttributes(new { style = "height: 705px;" })
        .Events(events => events.DataBound("CommitteesGridDataBound"))
        .Scrollable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(false)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Events(events => events.Error("error_handler"))
            .Model(model =>
            {
                model.Id(p => p.Id);
                model.Field(p => p.Id).Editable(false);
                model.Id(p => p.SortOrder);
                model.Field(p => p.SortOrder).Editable(false);
            })
        .Read(read => read.Action("_GetCommitteeItems", "ManageCommittees").Type(HttpVerbs.Get))
        .Create(create => create.Action("_CreateCommittee", "ManageCommittees").Type(HttpVerbs.Post))
        .Update(update => update.Action("_UpdateCommittee", "ManageCommittees").Type(HttpVerbs.Post))
        .Destroy(update => update.Action("_RemoveCommittee", "ManageCommittees").Type(HttpVerbs.Post))
        )
    )

     

     

  4. Tsvetina
    Admin
    Tsvetina avatar
    2073 posts

    Posted 08 Jun Link to this post

    Hi Dave,

    If I understand correctly, this is the definition of the child Grid? I am asking because I see this one also has a detail template. In any case, unfortunately, I do not see anything that would cause the parent Grid to trigger a request. Are there any command buttons in the parent Grid that could trigger such a read if there is some confusion within the widget as to which button was clicked? You could also inspect the actual request in the browser developer tools Network tab to see if there is any additional information like parameters or something else, which could point to what part of the Grid is triggering the request.

    If the problem persists, would it be possible to reproduce the issue in a runnable project and send it to us in a support ticket, so we can debug it locally? 

    Regards,
    Tsvetina
    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