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

Kendo Menu in ClientTemplate not working

5 Answers 792 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Robert Madrian asked on 09 Feb 2017, 02:47 PM

Hello,

 

why does the following Kendo Menu in ClientTemplate not working?

the menu doesn't open on hover nor on click?

 

@(Html.GpdbKendoGridEdit<SELECT_Standort>("Standort", "Standort_ID")
      .Columns(columns =>
      {
          columns.Bound(c => c.Standort_ID).MinScreenWidth(768).Filterable(false).Sortable(false).IncludeInMenu(false).Width(60);
          columns.Bound(c => c.Standort_ID).Title(" ")
              .ClientTemplate(
                  Html.Kendo().Menu()
                      .Name("menu_#=Standort_ID#")
                      .OpenOnClick(true)
                      .Items(its =>
                      {
                          its.Add()
                              //.SpriteCssClasses("fa fa-tasks")
                              .Text("").Items(nested =>
                              {
                                  nested.Add().Text("test1");
                                  nested.Add().Text("test2");
                                  nested.Add().Text("test3");
                                  nested.Add().Text("test4");
                              });
                      })
                      .ToClientTemplate().ToString()
              )
              .Filterable(false).Sortable(false).IncludeInMenu(false).Width(80);
          columns.Bound(c => c.Strasse).ClientTemplate("#=getRowFormat(Strasse, gelöscht, true)##=(Art == true) ? ' <span class=\"label label-success pull-right\">ZS</span>' : '' ##=(Nichtbetriebe > 0) ? ' <span class=\"label label-danger pull-right\">R</span>' : '' #</br><small>#=getRowFormat(Postleitzahl.concat(' ', Ort), gelöscht, false)#</small>");
          columns.Bound(c => c.Betriebsteil).MinScreenWidth(768).ClientTemplate("#=getRowFormat(Betriebsteil, gelöscht, false)#");
          columns.Bound(c => c.gelöscht).MinScreenWidth(768).Format("{0:dd.MM.yyyy}").Width(110).ClientTemplate("#=getRowFormat(kendo.toString(gelöscht,'dd.MM.yyyy'), gelöscht)#");
      })
      .Editable(e => e.TemplateName("~/Areas/Mitglied/Views/Standorte/_frmStandortEdit.cshtml")
          .Mode(GridEditMode.PopUp).Window(w => w.Title("Standort").Animation(animation => animation
              .Open(open => open.SlideIn(SlideDirection.Left).Duration(500))
              .Close(close => close.SlideIn(SlideDirection.Left).Duration(500).Reverse(true))
              )
          ))
      .DataSource(dataSource => dataSource
          .Ajax()
          .Model(model => model.Id(p => p.Standort_ID))
          .Read(read => read.Action("Standorte_Read", "Standorte"))
          .Update(read => read.Action("Standorte_Update", "Standorte"))
          .Destroy(destroy => destroy.Action("Standorte_Destroy", "Standorte"))
      )
      .AutoBind(false)
      .ClientDetailTemplateId("template")
      )

5 Answers, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 14 Feb 2017, 09:04 AM
Hello Robert,

Please ensure that you use the approach described in the article below when adding widgets to column templates.



.Columns(columns => {
    columns.Template(@<text></text>).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
            Html.Kendo().Menu()
                .Name("menu_#=OrderID#")
                .Items(its =>
                {
                    its.Add().Text("foo").Items(nested =>
                    {
                        nested.Add().Text("bar");
                        nested.Add().Text("baz");
                    });
 
                })
                .ToClientTemplate().ToHtmlString()
            );
})


Regards,
Viktor Tachev
Telerik by Progress
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
Francis
Top achievements
Rank 1
answered on 11 May 2017, 01:34 PM

Viktor, this does not seem to work with Core 2017.2.504

I tried with your exact code and see attached error.

 

 

0
Viktor Tachev
Telerik team
answered on 16 May 2017, 10:59 AM
Hello Francis,

The example from my previous post is targeting the MVC 5 components. Since the .NET Core Grid component do not support server rendering defining server templates for it is not available out of the box. 

You can find more information in the thread below:



Regards,
Viktor Tachev
Telerik by Progress
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
Francis
Top achievements
Rank 1
answered on 16 May 2017, 01:01 PM
But Viktor... we are in the .NET Core forum !! ;-)

How could I get a menu working inside a grid in .NET Core?
0
Viktor Tachev
Telerik team
answered on 18 May 2017, 02:38 PM
Hello Francis,

Since the Core wrappers do not use server-side rendering you can use the jQuery Kendo widgets as templates. 

Regards,
Viktor Tachev
Telerik by Progress
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
Robert Madrian
Top achievements
Rank 1
Veteran
Iron
Answers by
Viktor Tachev
Telerik team
Francis
Top achievements
Rank 1
Share this question
or