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

Insert Dropdown menu to grid row

14 Answers 880 Views
Grid
This is a migrated thread and some comments may be shown as answers.
GridLover
Top achievements
Rank 1
GridLover asked on 25 Mar 2017, 09:24 PM

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()

 

 

14 Answers, 1 is accepted

Sort by
0
GridLover
Top achievements
Rank 1
answered on 28 Mar 2017, 04:16 AM

No one answer?

I want to insert that menu in grid cell.

 

 

0
GridLover
Top achievements
Rank 1
answered on 28 Mar 2017, 04:17 AM
I want to insert dropdown menu into grid cell
0
GridLover
Top achievements
Rank 1
answered on 28 Mar 2017, 04:17 AM
I want to insert dropdown menu into grid cell
0
Boyan Dimitrov
Telerik team
answered on 28 Mar 2017, 03:41 PM

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
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
GridLover
Top achievements
Rank 1
answered on 29 Mar 2017, 01:26 AM

 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")))
0
Boyan Dimitrov
Telerik team
answered on 30 Mar 2017, 04:25 PM

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
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
GridLover
Top achievements
Rank 1
answered on 03 Apr 2017, 02:16 AM

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

0
GridLover
Top achievements
Rank 1
answered on 03 Apr 2017, 03:29 AM
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?
0
Boyan Dimitrov
Telerik team
answered on 04 Apr 2017, 03:07 PM

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
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
GridLover
Top achievements
Rank 1
answered on 05 Apr 2017, 12:25 AM

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?

0
GridLover
Top achievements
Rank 1
answered on 05 Apr 2017, 12:29 AM

Invalid code:

 

 

0
GridLover
Top achievements
Rank 1
answered on 05 Apr 2017, 12:29 AM

Invalid code:

 

 

0
GridLover
Top achievements
Rank 1
answered on 05 Apr 2017, 12:29 AM

Invalid code:

 

 

0
Boyan Dimitrov
Telerik team
answered on 06 Apr 2017, 02:38 PM

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
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
GridLover
Top achievements
Rank 1
Answers by
GridLover
Top achievements
Rank 1
Boyan Dimitrov
Telerik team
Share this question
or