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

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

3 Answers 69 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dave Hayward
Top achievements
Rank 1
Dave Hayward asked on 31 May 2017, 01:49 PM

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? 

3 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 02 Jun 2017, 12:24 PM
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.
0
Dave Hayward
Top achievements
Rank 1
answered on 06 Jun 2017, 07:10 PM

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))
    )
)

 

 

0
Tsvetina
Telerik team
answered on 08 Jun 2017, 10:53 AM
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.
Tags
Grid
Asked by
Dave Hayward
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Dave Hayward
Top achievements
Rank 1
Share this question
or