Bind grid to list property of the model with razor syntax

16 posts, 0 answers
  1. Nuno
    Nuno avatar
    28 posts
    Member since:
    Sep 2013

    Posted 16 Oct 2013 Link to this post

    Hello!

    I have a set of views to edit a model similar to this:

    Person
    ID
    Name
    Contacts -> List of Contact

    Contact
    ID
    Description
    Address
    Email
    PhoneNumber

    I would very much like to use a KendoUI grid for CRUDing the Person's Contact list (mainly because of layout and styling purposes). That I said, How can I achieve this? I need to make the grid bound to that property of the Person being edited or created as is. I mean, I would like to have only one controller (let's say PersonController) that knows how to persist my Person.

    Is this possible? Having a grid without controller actions ? Has anyone been in the same situation also?

    Thanks!

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1432 posts

    Posted 17 Oct 2013 Link to this post

    Hello Nuno,

    You can achieve similar behavior by using either Hierarchical Grid as shown in this demo or by using a custom columns.editor.

    Regards,
    Alexander Popov
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Nuno
    Nuno avatar
    28 posts
    Member since:
    Sep 2013

    Posted 17 Oct 2013 Link to this post

    Hello Alexander,

    In fact I was going for the layout on the attached image, so I thought in using the grid for the contacts part. The ways you suggested doesn't appeal to me, and I'll probably go for the usual way, using EditorTemplates for the contacts part. It will give a bit of work to get the layout work with the Kendo skin, but I think it is doable.

    Thanks.
  4. Rick
    Rick avatar
    4 posts
    Member since:
    Aug 2014

    Posted 16 May 2015 Link to this post

    Did you ever get this to work?
  5. Rick
    Rick avatar
    4 posts
    Member since:
    Aug 2014

    Posted 16 May 2015 Link to this post

    Did you ever get this to work
  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1432 posts

    Posted 20 May 2015 Link to this post

    Hello Rick,

    Would you please share more details about your scenario and the desired results? You can also open a new support ticket.

    Regards,
    Alexander Popov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  7. Rick
    Rick avatar
    4 posts
    Member since:
    Aug 2014

    Posted 02 Jun 2015 in reply to Alexander Popov Link to this post

    Sure Alex

    ​Basically I have a model that contains a list property (shown below), I populate the list within the controller, return it using Json, I see all of the data elements populated correctly in fiddler and I want to bind the list property to a grid in my editor page. For some reason, I see the titles just fine for the columns, but I see no data whatsoever in my grid. My implementation is shown below, you advice would be appreciated.

     

    ------- MODEL

    public class Lookup
        {

          public int LookupID { get; set; }
          public int AssetClassID { get; set; }
          public string AssetClassName { get; set; }
          public string LookupName { get; set; }
          public Boolean IsActive { get; set; }
          public Boolean IsDeleted { get; set; }
          public int LastUpdUSerID { get; set; }
          public DateTime LastUpdDateTime { get; set; }
          public List<LookupValue> Lookupvalue { get; set; }
        }

    ------- Controller

     [HttpGet]
            public JsonResult GetLookupSpecific([DataSourceRequest] DataSourceRequest request, Lookup lookupmod)
            {
                ModelState.Clear();
                if (lookupmod.LookupID > 0)
                {
                    var lookupobj = contextdb.usp_get_lookups(lookupmod.LookupID, null).Select(s => new Models.Lookup
                     {
                         LookupID = s.LookupID,
                         LookupName = s.LookupName,
                         LastUpdUSerID = s.LastUpdUserID,
                         LastUpdDateTime = s.LastUpdDtm,
                         IsActive = s.IsActive,
                         Lookupvalue = contextdb.usp_get_lookup_values(s.LookupID).Select(v => new Models.LookupValue
                         {
                             LookupvalueId = v.LookupValueID,
                             TextValue = v.TextValue,
                             LookupID = v.LookupID
                         }).ToList()
                     }).ToList();
                    return Json(lookupobj.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
                }
                return Json(null);
            }

    -------------- View

    @model MatsUser.Models.Lookup
    @{
        Layout = null;
    }

    <!DOCTYPE html>

    <html>
    <head>
        <meta name="viewport" content="width=device-wid
    <!DOCTYPE html>

    <html>
    <head>
        <meta name=" viewport" content="width=device-width" />
        <title>Edit Lookup</title>
    </head>
    <body style="margin-left:45px;  overflow-y: auto; overflow-x: hidden;">
        <div style="margin-left:15px; width:80%; height:80%;">
            @using (Html.BeginForm())
            {
                <table>
                    <tr>
                        <td style="text-align: right">
                            @Html.Label("Active" + ":")
                        </td>
                        <td style="text-align: left">
                            @(Html.CheckBoxFor(model => model.IsActive))
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align: right">
                            @Html.Label("AssetClass" + ":")
                        </td>
                        <td style="text-align: left">
                            @ViewBag.AssetClassName
                        </td>
                    </tr>

                    <tr>
                        <td style="text-align: right">
                            @(Html.LabelFor(model => model.LookupName, "Lookup Name:"))
                        </td>
                        <td style="text-align: left">
                            @(Html.Kendo().TextBoxFor(model => model.LookupName))
                        </td>
                    </tr>
                </table>
                <br />

                <script type="text/javascript">
                function additionaldataUserIDAssetID() {
                    try {
                         var row = $(event.srcElement).closest("tr");
                        var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");
                        var dataItem = grid.dataItem(row);
                        return { Lookupid: dataItem.LookupID };
                    }
                    catch (err) {
                        return { Lookupid: 99 };
                    }
                }
                </script>
                <div style="margin-left:35px; width:80%; height:80%;" id="output">
                    <table>
                        <tr></tr>
                        <tr>
                            <td colspan="3" align="center">
                                Values
                                <br /><br />
                                @(Html.Kendo().Grid(Model.Lookupvalue)
                                    .Name("Values")
                                    .HtmlAttributes(new { style = "width:150px" })
                                    .HtmlAttributes(new { style = "height:200px" })
                                    .Columns(c =>
                                    {
                                        c.Bound(p => p.LookupvalueId);
                                        c.Bound(p => p.TextValue).HtmlAttributes(new { style = "text-align:center" })
                                        .HeaderHtmlAttributes(new { style = "text-align:center" });
                                        c.Command(cs =>
                                        {
                                            cs.Custom("Delete").Click("DeleteLookupVal");
                                        });
                                    })
                                        .Editable(e => e.Mode(GridEditMode.InCell))
                                        .DataSource(d => d
                                        .Ajax()

                                        .Read(r => r.Action("GetLookupSpecific", "Lookup").Data("additionaldataUserIDAssetID"))
                                        .Model(m =>
                                        {
                                            m.Id(mm => mm.LookupvalueId);
                                            m.Field(mm => mm.TextValue);
                                            m.Field(mm => mm.LookupID);
                                        })
                                         .Batch(true)
                                        .ServerOperation(false)
                                        )
                                        .Navigatable()
                                )
                            </td>
                        </tr>
                    </table>
                    <br />
               </div>
           }
        </div>
    </body>
    </html>

     

     

     


  8. Alexander Popov
    Admin
    Alexander Popov avatar
    1432 posts

    Posted 04 Jun 2015 Link to this post

    Hi Rick,

    It looks like the GetLookupSpecific function is returning a list of Lookup objects, however the Grid is configured to work with LookupValue models. Providing the right type of data should solve the issue.

    Regards,
    Alexander Popov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Rick
    Rick avatar
    4 posts
    Member since:
    Aug 2014

    Posted 04 Jun 2015 in reply to Alexander Popov Link to this post

    Alex,

    Thank you for your response. Is there a way to make the grid bind to the list object that is part of the main model, or is that type of implementation better of done perhaps in a mvvm style where the lookupvalues is a secondary model  in the view model?

  10. Alexander Popov
    Admin
    Alexander Popov avatar
    1432 posts

    Posted 08 Jun 2015 Link to this post

    Hello Rick,

    Modifying the GetLookupSpecific function so it returns a LookupValue collection should be enough to populate the Grid. You can also use Ajax binding only, as currently the Grid is initially populated on the server using the Model.Lookupvalue collection. For example: 
    // @(Html.Kendo().Grid(Model.Lookupvalue)
    @(Html.Kendo().Grid<LookupValue>()
    ...
     
    return Json(lookupobj.Lookupvalue.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);


    Regards,
    Alexander Popov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  11. Chris
    Chris avatar
    50 posts
    Member since:
    Oct 2015

    Posted 24 Jan Link to this post

    HI 

    I have the same problem and Form POST always return empty list property - BindTo() no Read() Action : 

    ViewModel1 with List-Model1 property : 

        public class ViewModel1
        {
            public string Column1 { get; set; }

            public IEnumerable<Model1> Model1s { get; set; }

            public ViewModel1()
            {
                this.Model1s = new List<Model1>();
            }

    View

      @model Custom.ViewModels.ViewModel1


      @using (Html.BeginForm())
      {
        @Html.AntiForgeryToken()

        @Html.HiddenFor(model => model.Column1) 

        @(Html.Kendo().Grid(Model.Model1s)
          .Name("Model1sGrid")
          .Editable(editable => editable.Mode(GridEditMode.InCell))
          .Pageable(pageable => pageable.Enabled(false))
          .Columns(columns =>
          {
            columns.Bound(m => m.Key1);
            columns.Bound(m => m.Value1);
            columns.Bound(m => m.Value2);
          })
          .DataSource(dataSource =>
          {
            dataSource.Ajax()
                      .Batch(true)
                      .ServerOperation(false)
                      .Model(model =>
                      {
                        model.Id(m => m.Key1);
                      });
          }))

      }

      <input type="submit" formaction="Update" value="Save" class="k-button" />


    Controller

            [HttpPost]
            public ActionResult Update(ViewModel1 viewmodel1)
            {
              ... always viewmodel1.Models = 0 ...

    How can I return the full view model (include Grid list data) correctly ?

    Best regards

    Chris

     

     


  12. Eyup
    Admin
    Eyup avatar
    3169 posts

    Posted 26 Jan Link to this post

    Hi Chris,

    Generally, to display and edit a list of possible options to choose from, you can use a ForeignKeyColumn:
    http://demos.telerik.com/aspnet-mvc/grid/foreignkeycolumn

    You can also check the following post for additional details:
    http://www.telerik.com/forums/combox-in-kendo-grid#nBzPXJy_gEq9tFIvNEvOmw


    I hope this will prove helpful.

    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.
  13. Chris
    Chris avatar
    50 posts
    Member since:
    Oct 2015

    Posted 28 Jan in reply to Eyup Link to this post

    HI

    Very thanks and I need the solution of the DropDownList in Grid editing too.

    But the primary question is : 

    Bind grid to list property of the model and 'Post data but controller get's empty list property in model'.

    So, How can I get the full view model data (include list property data - Model.Model1s [Grid]) correctly 
    in Controller side while Form Post ?

    Controller

            [HttpPost]
            public ActionResult Update(ViewModel1 viewmodel1)
            {
              ... always viewmodel1.Model1s.Count = 0 now ...

    Best regards

    Chris

     

     

  14. Eyup
    Admin
    Eyup avatar
    3169 posts

    Posted 01 Feb Link to this post

    Hi Chris,

    For this specific scenario, I would suggest that you open a formal support ticket and send a very basic runnable isolated version of your configuration so that our responsible support engineers provide a more precise and accurate approach or explanation for your specific scenario.

    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.
  15. Chris
    Chris avatar
    50 posts
    Member since:
    Oct 2015

    Posted 02 Feb in reply to Eyup Link to this post

    HI

    I have search and found a solution in the forum : 

    Submit form containing grid along with other input elements
    http://www.telerik.com/support/code-library/submit-form-containing-grid-along-with-other-input-elements

    Save Form Data in Same Transaction (Other Html Control value + Kendo Grid Values)
    http://www.telerik.com/forums/save-form-data-in-same-transaction-(other-html-control-value-kendo-grid-values)

    GridInForm.zip

      @(Html.Kendo().Grid(Model.Products)
        .Name("Products")
        .Columns(columns =>
        {
          columns.Bound(p => p.Name).ClientTemplate("#= Name #" + 
            "<input type='hidden' name='Products[#= index(data)#].Name' value='#= Name #' />");
          ...

      <script>

        function index(dataItem) {
          var data = $("#Products").data("kendoGrid").dataSource.data();

          return data.indexOf(dataItem);
      }

      </script>

    But it is written in Kendo UI Suite and Version 2012.2.710, Is it suitable for the newest Telerik ASP.NET MVC Grid ?

    Why the Grid do not provide the built-in functionality for this situation ? 

    --

    There have no official description about this situation in Kendo UI Grid FAQ : 

    Frequently Asked Questions | Kendo UI Grid HtmlHelper - Telerik
    http://docs.telerik.com/aspnet-mvc/helpers/grid/faq#editing

    --

    And DropDownList in Grid editing (Kendo.Mvc.Examples - UIHint and EditorTemplate) : 

    C:\Program Files\Telerik\UI for ASP.NET MVC R3 2016\wrappers\aspnetmvc\Examples\VS2015\Kendo.Mvc.Examples\Models\ProductViewModel.cs

            [UIHint("ClientCategory")]
            public CategoryViewModel Category 
            { 
                get; 
                set; 
            }

    C:\Program Files\Telerik\UI for ASP.NET MVC R3 2016\wrappers\aspnetmvc\Examples\VS2015\Kendo.Mvc.Examples\Views\grid

            columns.Bound(p => p.Category).ClientTemplate("#=Category.CategoryName#").Width(180);

    C:\Program Files\Telerik\UI for ASP.NET MVC R3 2016\wrappers\aspnetmvc\Examples\VS2015\Kendo.Mvc.Examples\Views\grid\EditorTemplates

            @model Kendo.Mvc.Examples.Models.CategoryViewModel

            @(Html.Kendo().DropDownListFor(m => m)
              .DataValueField("CategoryID")
              .DataTextField("CategoryName")
              .BindTo((System.Collections.IEnumerable)ViewData["categories"])
            )

    Best regards

    Chris

     


  16. Eyup
    Admin
    Eyup avatar
    3169 posts

    Posted 06 Feb Link to this post

    Hello Chris,

    I'm glad that you've managed to find some directions and ideas for this specific requirement. You can also check the post-grid-with-form sample provided here:
    https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid

    If you have different requirements or further instructions, please open a new support thread as suggested in my previous reply.

    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