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

Add Sortable / Integration - Grid in detailTemplate

1 Answer 40 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Julien
Top achievements
Rank 1
Julien asked on 01 Jan 2019, 09:57 PM

Hello,

 

I'm trying to integrate the sortable component into a grid that is a ClientDetailTemplateId. Is it possible to do that ? Here is my code so far (this grid is the client detail, a grid within a grid)

 

<script>

@(Html.Kendo().Grid<PointVerificationViewModel>()
        .Name("pointGrid_#=Id#")
        .Columns(col =>
        {
            col.Bound(p => p.Libelle);
            col.Bound(p => p.EstBloquant)
                .ClientTemplate("\\#: data && data.EstBloquant ? 'OUI' : 'NON' \\#");
            col.Command(cmd =>
            {
                cmd.Edit().Text(" ").UpdateText(" ").CancelText(" ").IconClass("fa fa-pencil-alt").UpdateIconClass("fa fa-check").CancelIconClass("fa fa-ban");
                cmd.Destroy().Text(" ").IconClass("fa fa-times");
            });
        })
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .ToolBar(toolbar =>
        {
            toolbar.Create().IconClass("fa fa-plus").Text("CrĂ©er un point de vĂ©rification");
        })
        .DataSource(ds => ds
            .Ajax()
            .ServerOperation(false)
            .Model(m =>
            {
                m.Id(p => p.Id);
            })
            .Read(a => a.Action("Read", "PointVerification", new { familleId = "#=Id#" }).Type(HttpVerbs.Get))
            .Create(a => a.Action("Create", "PointVerification", new { familleId = "#=Id#" }).Type(HttpVerbs.Post))
            .Update(a => a.Action("Update", "PointVerification").Type(HttpVerbs.Put))
            .Destroy(a => a.Action("Delete", "PointVerification").Type(HttpVerbs.Delete))
        )
        .Sortable()
        .ToClientTemplate()
    )

 

    @(Html.Kendo().Sortable()
        .For("#pointGrid_#=Id#")
        .Filter("table > tbody > tr")
        .Cursor("move")
        .HintHandler("noHint")
        .PlaceholderHandler("placeholder")
        .ContainerSelector("#pointGrid_#=Id# tbody")
        .Events(events => events.Change("onChange"))
    )

</script>

 

i've got an invalide template error with that code.

 

Thanks a lot.

1 Answer, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 04 Jan 2019, 12:33 PM
Hello Julien,

There are two problems breaking the Sortable in this case:
1. The ID selectors should be escaped because otherwise the # sign is interpreted as incorrect client binding syntax:
@(Html.Kendo().Sortable()
        .For("\\#grid_#=EmployeeID#")
        .ContainerSelector("\\#grid_#=EmployeeID# tbody")

2. The Sortable also needs to be converted to client template output:
@(Html.Kendo().Sortable()
        .For("\\#grid_#=EmployeeID#")
        .ContainerSelector("\\#grid_#=EmployeeID# tbody")
        .Filter("table > tbody > tr")
        .Cursor("move")
        .ToClientTemplate()
)

With these changes, the detail template should render as expected.

Regards,
Tsvetina
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Julien
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Share this question
or