Bind ViewModel to Grid Row ViewModel based on textbox search

1 Answer 193 Views
Grid
Forrest
Top achievements
Rank 1
Forrest asked on 03 Mar 2023, 08:41 PM | edited on 03 Mar 2023, 08:41 PM

Hello,

I am trying to understand the best way to update a submodel that is part of the composition of a grid's row model.

I tried to outline an example below. If I have a PersonViewModel that is part of a CompanyViewModel.

I want to be able to update the PersonViewModel's Name, Id and Email by querying using their email.


public class PersonViewModel
{
    public string Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
}

public class CompanyViewModel { public string CompanyId { get; set; } public string CompanyName { get; set; } public PersonViewModel Owner { get; set; } }

public IActionResult GetPersonByEmail([DataSourceRequest] DataSourceRequest request, string email)
{
	PersonViewModel person = _userService.GetUserInfoByEmail(email);
	return Json(person.ToDataSourceResult(request));
}

@(Html.Kendo().Grid<CompanyViewModel>()
	.Name("companyGrid")
	.Columns(columns =>
	{
		columns.Command(command => { command.Edit();}).Locked(true);
		columns.Bound(c => c.CompanyId );
		columns.Bound(p => p.CompanyName );
		columns.Bound(c => c.Owner.Name);
		columns.Bound(c => c.Owner.Email).EditorTemplateName("PersonEditor");
	})
	.Scrollable(s => s.Height("auto"))
	.DataSource(dataSource => dataSource
		.Ajax()
		.Read(read => read.Action("CompanyRead", "Company"))
		.Model(model =>
		{
			model.Id(p => p.CompanyId);
			model.Field(p => p.Owner).DefaultValue(new PersonViewModel() { Name = "", UserId = "", Id = "" });
		})
	)
)

PersonEditor Template would look something like this?

@model PersonViewModel
@(Html.TextBoxFor(model => model))
@(Html.Kendo().Button()
    .Name("PersonLookupButton")
    .Content("Search")
    .Events(ev => ev.Click("personLookupOnClick"))
)


I could get the dataItem from the grid and set the Id, Name, and Email values via jQuery, but that feels like it is working against the point of using composition in my viewmodel. Is there a way to get the PersonViewModel that is returned by GetPersonByEmail() and bind that directly to the row instead?

 

Thank you!

1 Answer, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 07 Mar 2023, 09:36 PM

Hello Forrest,

 

Thank you for writing to us.

It should be similar to this:

@(Html.TextBoxFor(model => model.Name))
You can check for reference this demo:
https://demos.telerik.com/aspnet-mvc/grid/editing-custom

The magic happens using 3 steps:

1. Model UIHint property:

        [UIHint("ClientCategory")]
        public CategoryViewModel Category 
        { 
            get; 
            set; 
        }
2. DefaultValue in the model similar to your code:
            model.Field(p => p.Category).DefaultValue(
                ViewData["defaultCategory"] as Kendo.Mvc.Examples.Models.CategoryViewModel);

3. The Editor Template:

@model Kendo.Mvc.Examples.Models.CategoryViewModel

@(Html.Kendo().DropDownListFor(m => m)
        .DataValueField("CategoryID")
        .DataTextField("CategoryName")
        .BindTo((System.Collections.IEnumerable)ViewData["categories"])
)
I hope this will help you as a base reference.

 

Regards,
Eyup
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Forrest
Top achievements
Rank 1
Answers by
Eyup
Telerik team
Share this question
or