Insert Dropdown menu to grid row

[GridLover]

Hi, 

 

I am using ASP.NET MVC for kendo grid. I want to Insert Dropdown menu to grid row. But I did not find any related articles.

 

I assume there will something I insert @(Html.Kendo().Menu() to @(Html.Kendo().grid()

 

 

[GridLover]

No one answer?

I want to insert that menu in grid cell.

 

 

[GridLover]

I want to insert dropdown menu into grid cell

[GridLover]

I want to insert dropdown menu into grid cell

[Boyan Dimitrov]

Hello GridLover,

I believe that what you are looking for is How to Use Kendo UI Widgets inside Grid Client Column Templates?. 

Regards,
Boyan Dimitrov
Telerik by Progress

[GridLover]

 I copied the code.

I will have error in .Template(@<text></text>), and error in .ClientTemplate(), and error in ToHtmlString().

Can you make a working ASP.NET MVC sample project for that?

 

I think there are many mistake in your company tutorial. Many code snippet just cannot work.

 

@(Html.Kendo().Grid<ModelType>().Name("GridID").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());}).Events(ev => ev.DataBound("initMenus")))

[Boyan Dimitrov]

Hello,

What I noticed is that it is a copy of the code provided in the article. In the code snippet it is assumed that the model bound to the grid has a property "OrderID". Most probably there is such property in your model and this will throw an error. For example please take a look at the code below: 

@(Html.Kendo().Grid<KendoGridAjaxBinding.Models.Product>()
      .Name("grid")
       .HtmlAttributes(new { min_height = "200px", tabIndex = "0" })
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("Products_Read", "Home")) // Set the action method which will return the data in JSON format
       )
      .Columns(columns =>
      {
      // Create a column bound to the ProductID property
      columns.Bound(product => product.ProductID);
      // Create a column bound to the ProductName property
      columns.Bound(product => product.ProductName);
      columns.Template(@<text></text>).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
              Html.Kendo().Menu()
                  .Name("menu_#=ProductID#")
                  .Items(its =>
                  {
                      its.Add().Text("foo").Items(nested =>
                      {
                          nested.Add().Text("bar");
                          nested.Add().Text("baz");
                      });

                  })
                  .ToClientTemplate().ToHtmlString()
              );
    // Create a column bound to the UnitsInStock property
    columns.Bound(product => product.UnitsInStock);
})
    .Events(ev => ev.DataBound("initMenus"))
)



<script type="text/javascript">

    function initMenus(e) {
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
        });
    }

</script>

In my Product model there is a ProductID property. The following syntax

.Name("menu_#=ProductID#")

 is required because a unique name should be applied to each menu. 

Regards,
Boyan Dimitrov
Telerik by Progress

[GridLover]

No. I have the property mapping to Name("menu_#=XXX#")

 

Can you please make a working example attached in this example. I appreciated. I am using asp.net  ajax binding

[GridLover]

When I enter @<text></text>, it just cannot work, so, I think your solution is for server binding? I am using ajax binding. But when I am using ajax binding, how can I have .template() and () at the same time?

[Boyan Dimitrov]

Hello GridLover,

The Template(@<text></text>) is valid code when you are defining a template column (it is not bound to a field of the model). If you avoid defining the Template method you are not able to define ClientTemplate. Please refer to the demo code below: 

@(Html.Kendo().Grid<KendoGridAjaxBinding.Models.Product>()
      .Name("grid")
       .HtmlAttributes(new { min_height = "200px", tabIndex = "0" })
      .DataSource(dataSource => dataSource // Configure the grid data source
          .Ajax() // Specify that ajax binding is used
          .Read(read => read.Action("Products_Read", "Home")) // Set the action method which will return the data in JSON format
       )
      .Columns(columns =>
      {
      // Create a column bound to the ProductID property
      columns.Bound(product => product.ProductID);
      // Create a column bound to the ProductName property
      columns.Bound(product => product.ProductName);
      columns.Template(@<text></text>).HtmlAttributes(new { @class = "templateCell" }).ClientTemplate(
              Html.Kendo().Menu()
                  .Name("menu_#=ProductID#")
                  .Items(its =>
                  {
                      its.Add().Text("foo").Items(nested =>
                      {
                          nested.Add().Text("bar");
                          nested.Add().Text("baz");
                      });

                  })
                  .ToClientTemplate().ToHtmlString()
              );
    // Create a column bound to the UnitsInStock property
    columns.Bound(product => product.UnitsInStock);
})
    .Events(ev => ev.DataBound("initMenus"))
)



<script type="text/javascript">

    function initMenus(e) {
        $(".templateCell").each(function () {
            eval($(this).children("script").last().html());
        });
    }

</script>

public ActionResult Products_Read([DataSourceRequest]DataSourceRequest request)
        {
            using (var northwind = new NorthwindEntities())
            {
                IQueryable<Product> products = northwind.Products;
                DataSourceResult result = products.ToDataSourceResult(request);
                return Json(result);
            }
        }

Regards,
Boyan Dimitrov
Telerik by Progress

[GridLover]

Hi,

 

I copied your code, then all my code will become . I still have following error:

'HtmlString' does not contain a definition for 'ToHtmlString' and no extension method 'ToHtmlString' accepting a first argument of type 'HtmlString' could be found (are you missing a using directive or an assembly reference?)

As I mentioned before, can you please send me this runnable project to me, which I can download and run it?

[GridLover]

Invalid code:

 

 

[GridLover]

Invalid code:

 

 

[GridLover]

Invalid code:

 

 

[Boyan Dimitrov]

Hello,

I used the ajax-binding example and just modified the view as the suggestion in my last reply. It worked without any other modifications. 

Regards,
Boyan Dimitrov
Telerik by Progress