Bind grid to list property of the model with razor syntax

10 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
    1416 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. UI for ASP.NET MVC is VS 2017 Ready
  4. 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.
  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. Rick
    Rick avatar
    4 posts
    Member since:
    Aug 2014

    Posted 16 May 2015 Link to this post

    Did you ever get this to work
  7. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 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
  8. 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>

     

     

     


  9. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 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
  10. 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?

  11. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready