Insert Dropdown menu to grid row

15 posts, 0 answers
  1. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 25 Mar 2017 Link to this post

    Hi, 

     

    I am using ASP.NET MVC for kendo ui 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()

     

     

  2. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 27 Mar 2017 in reply to GridLover Link to this post

    No one answer?

    I want to insert that dropdown menu in grid cell.

     

     

  3. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 27 Mar 2017 in reply to GridLover Link to this post

    I want to insert dropdown menu into grid cell
  4. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 27 Mar 2017 in reply to GridLover Link to this post

    I want to insert dropdown menu into grid cell
  5. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 28 Mar 2017 Link to this post

    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.
  6. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 28 Mar 2017 in reply to Boyan Dimitrov Link to this post

     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")))
  7. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 30 Mar 2017 Link to this post

    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.
  8. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 02 Apr 2017 in reply to Boyan Dimitrov Link to this post

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

     

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

  9. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 02 Apr 2017 in reply to Boyan Dimitrov Link to this post

    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 clienttemplate() at the same time?
  10. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 04 Apr 2017 Link to this post

    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.
  11. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 04 Apr 2017 in reply to Boyan Dimitrov Link to this post

    Hi,

     

    I copied your code, then all my code will become grey. 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?

  12. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 04 Apr 2017 in reply to Boyan Dimitrov Link to this post

    Invalid code:

     

     

  13. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 04 Apr 2017 in reply to Boyan Dimitrov Link to this post

    Invalid code:

     

     

  14. GridLover
    GridLover avatar
    20 posts
    Member since:
    Feb 2017

    Posted 04 Apr 2017 in reply to Boyan Dimitrov Link to this post

    Invalid code:

     

     

  15. Boyan Dimitrov
    Admin
    Boyan Dimitrov avatar
    2062 posts

    Posted 06 Apr 2017 Link to this post

    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.
Back to Top