Combox in Kendo grid

7 posts, 0 answers
  1. Guest10
    Guest10 avatar
    9 posts
    Member since:
    Jul 2016

    Posted 01 Dec 2016 Link to this post

    I am new to Kendo UI and wanted to use Kendo grid inline editing .

     

    Couple of columns in my grid  needs to have Combo box  for new record or update. I did not find any clear example on this.

    Can you  please direct me to proper link or give an example on how to  use  combo box for inline editing.

     

    Thanks for your help

  2. Eyup
    Admin
    Eyup avatar
    4078 posts

    Posted 05 Dec 2016 Link to this post

    Hi,

    The grid provides 2 ways of using combo/dropdown element in editing mode
    1. ForeignKeyColumn
    http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn
    2. EditorTemplate
    http://demos.telerik.com/aspnet-mvc/grid/editing-custom

    If you want to use it in view mode, you can use ClientTemplate as demonstrated in the following section:
    http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/faq#how-to-use-kendo-ui-widgets-inside-grid-client-column-templates


    Now, let's explain the ForeignColumn when implementing dropdown editing for the grid component:
    http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

    Here is a sample:
    Copy Code
    Copy Code
    columns.ForeignKey(p => p.ProductCategoryId,
        (System.Collections.IEnumerable)ViewData["ProductCategories"], "ProductCategoryId",
        "CategoryName").Title("Category").Width("300px");

    The ViewData["categories"] or ViewBag.categories collection should hold the Data Source for the generated dropdown component in edit mode. This collection should be filled in the server with fields/properties/columns named exactly the same way for the corresponding Value and Text values. For example, they might be Code and Description (CategoryID and CategoryName).

    The combo is loaded using the data coming from the ViewData or ViewBag collection. These collections are being popularized in the corresponding Controller action.

    I hope this will prove helpful.


    Regards,
    Eyup
    Telerik by Progress
    Telerik UI for ASP.NET MVC is ready for Visual Studio 2017 RC! Learn more.
  3. Guest10
    Guest10 avatar
    9 posts
    Member since:
    Jul 2016

    Posted 06 Dec 2016 in reply to Eyup Link to this post

    Thanks very much for the reply
  4. Guest10
    Guest10 avatar
    9 posts
    Member since:
    Jul 2016

    Posted 13 Dec 2016 in reply to Eyup Link to this post

    Eyup,

     

    Thanks for the reply.

    I do have some follow up questions on this

    --------------------------------------------------------

    In Custom Editor mode, You have the following code for  category.

    .Model(model =>{ model.Id(p => p.ProductID); model.Field(p => p.ProductID).Editable(false); model.Field(p => p.Category).DefaultValue(ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);})

     

    How does the values show up in edit mode. I don't' see any reference of  'categories' in the view file

    I mean data is retrieved  in controller and stored in ViewData["categories"] = categories , but where does this get refered or bind happens

    Also where is  Editing_Custom() called from

    -------------------------------------------------------------

    In Foreignkey column example. Do you expect  CategoryID to be defined as Foriegnkey column in productviewmodel.

    columns.Bound(p => p.ProductName); columns.ForeignKey(p => p.CategoryID, (System.Collections.IEnumerable)ViewData["categories"], "CategoryID", "CategoryName").Title("Category").Width(200); columns.Bound(p => p.UnitPrice).Width(200);

     

    Thanks very much for your help

  5. Eyup
    Admin
    Eyup avatar
    4078 posts

    Posted 15 Dec 2016 Link to this post

    Hi,

    You will need to add the UIHint attribute in your model. This is explained in the last section here (Step 5):
    http://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates

    That should do the trick.

    Regards,
    Eyup
    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. Guest10
    Guest10 avatar
    9 posts
    Member since:
    Jul 2016

    Posted 15 Dec 2016 Link to this post

    Eyup

    Thanks for the reply.

    Example you refered asks to create new view for dropdown field

    Does it connects with Foreignkey attribute column. Can you refer to me example.

     

    Thank you very much.

  7. Eyup
    Admin
    Eyup avatar
    4078 posts

    Posted 19 Dec 2016 Link to this post

    Hi,

    For foreignkey column you can check the following live sample:
    http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

    Also, you can check the View, Controller and Model corresponding to the Index page in the attached web site sample.

    Regards,
    Eyup
    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