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

Issue with ClientTemplateId

5 Answers 181 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Asif
Top achievements
Rank 1
Asif asked on 12 Jul 2017, 07:24 AM
I have a Grid with template column columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(180);
When I edit this cell I get a dropdownlist and select values from the list.

Then I added ClientDetailTemplateId to grid and the above column is no more editable.
Could you please help

5 Answers, 1 is accepted

Sort by
0
Tsvetina
Telerik team
answered on 13 Jul 2017, 01:54 PM
Hi Asif,

Adding a ClientDetailTemplateId setting should not directly interact with the current editable implementation. Have you checked the browser console for any JavaScript errors after the last change? Also, can you show your current Grid definition, along with the client templates definition, so we can check for any problems with the code?

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
Asif
Top achievements
Rank 1
answered on 24 Jul 2017, 07:09 AM

Following is my grid defintion  and template. Column Plating is not editable after adding ClientDetailTemplateId. If I remove ClientDetailTemplateId then it is editable

 

@(Html.Kendo().Window()
        .Name("MenuWindow")
        .Title("Please select Menu items")
        .Content((Html.Kendo().Grid<OrderDetailModel>
    ()
    .Name("MenuWindowGrid")
    .Columns(
    columns =>
    {
        columns.Bound(p => p.MenuId)
                        .Title("")
                        .Width(60)
                        .Sortable(false)
                        .Filterable(false)
                        .ClientTemplate("<input type='checkbox' class='chkbx' />")
                        .HeaderTemplate("<input type='checkbox' class='master-checkbox' />");
        columns.Bound(p => p.MenuGroupId).Hidden();
        columns.Bound(p => p.MenuGroupName).Width(100).Filterable(filterable => filterable.UI("groupFilter"))
       .Title("Group");
        columns.Bound(p => p.ServiceTypeId).Hidden();
        columns.Bound(p => p.ServiceTypeName).Filterable(filterable => filterable.UI("serviceTypeFilter"))
       .Title("ServiceType").Width(150);
        columns.Bound(p => p.MenuCategoryId).Hidden();
        columns.Bound(p => p.MenuCategoryName).Width(150).Filterable(filterable => filterable.UI("categoryFilter"))
       .Title("MenuCategory");
        columns.Bound(p => p.MenuName);
        columns.Command(command => command.Custom("Platings").Click("ShowPlatingDetails")).Width(80);
        columns.Bound(p => p.MenuPerPortionSize).Title("Per portion").Width(80).Filterable(false);
       
        columns.Bound(p => p.Plating).Width(100).ClientTemplate("#= Plating.PlatingName #").Filterable(false)
        .Title("Plating");
       
        
    }
    )
    .ToolBar(toolbar =>
    {
        toolbar.Custom().Text("Add Selected Items").HtmlAttributes(new { id = "custombutton" });

    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Events(evt => evt.Edit("OnEdit"))
    .Filterable(filterable => filterable
        .Extra(false)
        .Operators(operators => operators
            .ForString(str => str.Clear()
                .IsEqualTo("Is equal to")
            ))
        )

    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Selectable(s => s.Mode(GridSelectionMode.Multiple))
    .AutoBind(false)
    .HtmlAttributes(new { style = "height: 500px" })
    .Navigatable()
    .Groupable()
    .ClientDetailTemplateId("Detailtemplate")
    .DataSource(datasource => datasource
    .Ajax()
    .ServerOperation(false)
    .PageSize(20)
    .Model(model =>
    {
        model.Id(p => p.MenuId);
        model.Field(p => p.MenuName).Editable(false);
        model.Field(p => p.MenuId).Editable(false);
        model.Field(p => p.ServiceTypeName).Editable(false);
        model.Field(p => p.MenuGroupName).Editable(false);
        model.Field(p => p.MenuCategoryName).Editable(false);
        model.Field(p => p.OrderDetailsUDECKPortion);


    })
    .Read(read => read.Action("MenuDetailsRead", "Order", new { orderId = Model.OrderId }))

    ).Events(e => e
    
               .Change("MenuWindowGridSelectionChanged")
              .DataBound("MenuWindowGridDataBound")
            )
        ).ToHtmlString()
        ).Draggable()


        .Visible(false)

        .Events(ev => ev.Close("onClose"))

)

 

 

 

<script id="Detailtemplate" type="text/kendo-tmpl">


    @(Html.Kendo().Grid<MenuDetail>()
                        .Name("grid_#=MenuId#")
                        .Columns(columns =>
                        {
                            columns.Bound(o => o.Name);
                            columns.Bound(o => o.Portion);
                            columns.Bound(o => o.Price);
                        })
                        .DataSource(dataSource => dataSource
                            .Ajax()

                            .Read(read => read.Action("Detailtemplate_Platings", "Order", new { menuId = "#=MenuId#" }))
                        )


                        .ToClientTemplate())

</script>

0
Stefan
Telerik team
answered on 25 Jul 2017, 10:52 AM
Hello Asif,

Thank you for the provided code.

I inspected it and test the same scenario modifying one of our examples, but the drop-down column was still editable.

Please check if changing the content of the detail template or placing the Grid outside of the window will make any difference?

If the issue occurs, please provide a fully runnable example, as it may be caused by a custom factor which we are overlooking at this moment.

Regards,
Stefan
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 (charts) and form elements.
0
Asif
Top achievements
Rank 1
answered on 25 Jul 2017, 02:37 PM
Could you please share sample application with me, so that I can refer and try to find out
0
Stefan
Telerik team
answered on 27 Jul 2017, 10:41 AM
Hello Asif,

All sample examples are available in the installation folder of Kendo UI for MVC:

http://docs.telerik.com/aspnet-mvc/introduction#sample-application

I used the following example and added the provided DetailTemplate to it:

http://demos.telerik.com/aspnet-mvc/grid/editing-custom

As the solution contains all examples, the relevant files for this one are:

View - Views/grid/editing_custom.cshtml
Controller - Controllers/Grid/Editing_CustomController.cs
Models - Models/ProductViewModel,
Service - Models/ProductService

http://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates

If additional assistance is needed, please provide the real application, this will allow us to provide a suggestion best suited for it.

Regards,
Stefan
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
Asif
Top achievements
Rank 1
Answers by
Tsvetina
Telerik team
Asif
Top achievements
Rank 1
Stefan
Telerik team
Share this question
or