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

Nested Grid in columns bound dataitem

1 Answer 494 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Mustafa
Top achievements
Rank 1
Veteran
Mustafa asked on 23 Mar 2021, 10:44 AM

Hi, 

i use nested grid. The inner grid too (grid name:  YemekTipGrid_#=Id#) I want to create a dynamic button

columns.Bound(b => b.Id).Width(205).Title(Localizer["View_Common_Operation"]).ClientTemplate("#=operationButtonsInner(data)#");

this works fine for the grid above.Seems to work for the inner grid but the data of the above grid is coming

shown in telerikforum_3.jpg.  data-id = 2 seen here is the first address of the upper grid. However, the expected value is 7 instead of 2 How can I get the PK IDs of the grid object at the bottom

 

@(Html.Kendo().Grid<ListYemekTipDto>()
              .Name("YemekTipGrid")
              .Columns(columns =>
              {
                  //columns.Bound(b => b.Id).Title("").ClientHeaderTemplate("<input type='checkbox' id='ck-check-all' />").ClientTemplate(("<input type='checkbox' selector=#=ID# class='ck-secim' ID='#=ID#' name='Sec' />")).Filterable(false);
                  columns.Bound(b => b.Tip).Title(Localizer["View_YemekTip_Model_Tip"]);
                  columns.Bound(b => b.Ucret).Title(Localizer["View_YemekTip_Model_Ucret"]);
                  columns.Bound(b => b.ParentYemekTipId).Title(Localizer["View_YemekTip_Model_ParentId"]);
                  columns.Bound(b => b.Not).Title(Localizer["View_YemekTip_Model_Not"]);
                  columns.Bound(b => b.Aciklama).Title(Localizer["View_YemekTip_Model_Aciklama"]);

                  columns.Bound(b => b.KayitDurumu).Title(Localizer["View_Common_KayitDurumu"]).Width(50).ClientTemplate("<span id='badge_#=Id#' class='badgeTemplate'></span>");
                  columns.Bound(b => b.Id).Width(205).Title(Localizer["View_Common_Operation"]).ClientTemplate("#=operationButtons(data)#");
              })
              .ToolBar(toolbar =>
              {
                  toolbar.Search().Text(Localizer["Grid_Common_Search"]);
                  //toolbar.Excel().Text(Localizer["Grid_Common_Excel"]);
                  //toolbar.Pdf().Text(Localizer["Grid_Common_Pdf"]);
                  //toolbar.Custom().Text(Localizer["Grid_Common_NewRecord"]).IconClass("fa fa-plus").HtmlAttributes(new { @class = "modal-action", data_type = "get", data_url = Url.Action("Ekle", "YemekTip", new { area = "Yonetim" }), data_grid = "#YemekTipGrid", data_title = Localizer["View_Common_CreateOperation"], data_buttons = "true", data_savetext = Localizer["View_Common_Create"] });
              })
              .Pageable()
              .Sortable()
              .Filterable()
              .Navigatable()
              .ColumnMenu()
              .ClientDetailTemplateId("templateInner")
              .HtmlAttributes(new { style = "height:430px;" })
              .Resizable(r => r.Columns(true))
              .Reorderable(r => r.Columns(true))
              .Groupable(g => g.ShowFooter(false))
              //.Events(events => events.DataBound("onDataBound"))
              .DataSource(dataSource => dataSource
                .Ajax()
                .Batch(true)
                .PageSize(15)
                .AutoSync(true)
                .ServerOperation(false)
                .Events(events => events.Error("error_handler"))
                .Read(read => read.Action("Grid", "YemekTip", new { area = "Yonetim" }).Type(HttpVerbs.Post))
              ).Events(events => events.DataBound("dataBound"))
              )

 

    <script id="templateInner" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<ListYemekTipDto>()
                .Name("YemekTipGrid_#=Id#")
                .Columns(columns =>
                {
                    columns.Bound(b => b.Tip).Title(Localizer["View_YemekTip_Model_Tip"]);
                    columns.Bound(b => b.Ucret).Title(Localizer["View_YemekTip_Model_Ucret"]);
                    columns.Bound(b => b.ParentYemekTipId).Title(Localizer["View_YemekTip_Model_ParentId"]);
                    columns.Bound(b => b.Not).Title(Localizer["View_YemekTip_Model_Not"]);
                    columns.Bound(b => b.Aciklama).Title(Localizer["View_YemekTip_Model_Aciklama"]);
                    //columns.Bound(b => b.KayitDurumu).Title(Localizer["View_Common_KayitDurumu"]).Width(50).ClientTemplate("<span id='badge_#=Id#' class='badgeTemplate'></span>");

                    columns.Bound(b => b.Id).Width(205).Title(Localizer["View_Common_Operation"]).ClientTemplate("#=operationButtonsInner(data)#");

                })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .Batch(true)
                    .PageSize(15)
                    .AutoSync(true)
                    .ServerOperation(false)
                    .Events(events => events.Error("error_handler"))
                    .Read(read => read.Action("HierarchyBindingGrid", "YemekTip", new { area = "Yonetim", Id = "#=Id#" }).Type(HttpVerbs.Post)))
                    .Pageable()
                    .Sortable()
                    .Filterable()
                    .Navigatable()
                    .ColumnMenu()
                    .Resizable(r => r.Columns(true))
                    .Reorderable(r => r.Columns(true))
                    .Groupable(g => g.ShowFooter(false))
                    .Events(events => events.DataBound("dataBound"))
                .ToClientTemplate()
        )
    </script>

 

   function operationButtonsInner(data) {
            console.log("operationButtonsInner",data);
           var template = "";

            template += "<a class='btn btn-default btn-outline btn-xs modal-action mr-5' data-toggle='modal' data-rel='tooltip' data-placement='top' title='@Html.Raw(Localizer["View_Common_UpdateOperation"])' data-url='" + guncelleUrl + "' data-type='get' data-id='" + data.Id +"' data-title='@Html.Raw(Localizer["View_Common_UpdateOperation"])'  data-savetext='@Html.Raw(Localizer["View_Common_Update"])' data-buttons='true'><i class='fa fa-pencil' aria-hidden='true'></i></a>";
            template += "<a class='btn btn-default btn-outline btn-xs modal-action mr-5' data-toggle='modal' data-rel='tooltip' data-placement='top' title='@Html.Raw(Localizer["View_Common_DeleteOperation"])' data-url='" + silUrl + "' data-type='delete' data-id='" + data.Id +"' data-title='@Html.Raw(Localizer["View_Common_DeleteOperation"])'  data-savetext=' @Html.Raw(Localizer["View_Common_Delete"])' data-message='@Html.Raw(Localizer["View_Common_Delete_Message"])'><i class='fa fa-trash' aria-hidden='true'></i></a>";
            template += "<a class='btn btn-default btn-outline btn-xs modal-action mr-5' data-toggle='modal' data-rel='tooltip' data-placement='top' title='@Html.Raw(Localizer["View_Common_PreviewOperation"])' data-url='" + goruntuleUrl + "' data-type='get' data-id='" + data.Id + "' data-title='@Html.Raw(Localizer["View_Common_PreviewOperation"])'><i class='fa fa-eye' aria-hidden='true'></i></a>";

            if (data.KayitDurumu == @((int)EntityStatus.ACTIVE))
            {
                template += "<a class='btn btn-default btn-outline btn-xs modal-action mr-5' data-toggle='modal' data-rel='tooltip' data-placement='top' title='@Html.Raw(Localizer["View_Common_PassiveOperation"])' data-type='put' data-url='" + durumDegistirUrl + "' data-id=" + data.Id + " data-value='" + @((int)EntityStatus.PASSIVE) + "' data-title='@Html.Raw(Localizer["View_Common_PassiveOperation"])' data-message='@Html.Raw(Localizer["View_Common_PassiveMessage"])' data-savetext='@Html.Raw(Localizer["View_Common_PassiveOperation"])' ><i class='fa fa-unlock' aria-hidden='true'></i></a>";
            }
            if (data.KayitDurumu == @((int)EntityStatus.PASSIVE))
            {
                template += "<a class='btn btn-default btn-outline btn-xs modal-action mr-5' data-toggle='modal' data-rel='tooltip' data-placement='top' title='@Html.Raw(Localizer["View_Common_ActiveOperation"])' data-type='put' data-url='" + durumDegistirUrl + "' data-id=" + data.Id + " data-value='" + @((int)EntityStatus.ACTIVE) + "' data-title='@Html.Raw(Localizer["View_Common_ActiveOperation"])' data-message='@Html.Raw(Localizer["View_Common_ActiveMessage"])'  data-savetext='@Html.Raw(Localizer["View_Common_ActiveOperation"])' ><i class='fa fa-lock' aria-hidden='true'></i></a>";
            }
            return template;
         }

1 Answer, 1 is accepted

Sort by
0
Nikolay
Telerik team
answered on 26 Mar 2021, 07:30 AM

Hello Mustafa,

Thank you for the provided snippets.

You should escape the "#" characters when using nested templates in order to prevent evaluating the expression in the master template context e.g.

columns.Bound(b => b.Id).Width(205).Title(Localizer["View_Common_Operation"]).ClientTemplate("\\#=operationButtonsInner(data)\\#");

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Mustafa
Top achievements
Rank 1
Veteran
Answers by
Nikolay
Telerik team
Share this question
or