Creating a Custom Edit Popup for Telerik ASP.NET Core Grid with Model

To create a custom edit popup for the Telerik ASP.NET Core Grid with a model, you can follow these steps:

Step 1: Define the Model Create a model class that represents the data you want to edit. For example, let's create a simple model called Employee with properties like Id, Name, and Salary.

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public decimal Salary { get; set; }
}

Step 2: Configure the Grid In your ASP.NET Core view, configure the Telerik Grid by adding the necessary markup and configuration options. Make sure to include the required JavaScript and CSS files.

@(Html.Kendo().Grid<Employee>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.Name);
        columns.Bound(e => e.Salary);
        columns.Command(command =>
        {
            command.Edit();
            command.Destroy();
        });
    })
    .ToolBar(toolbar => toolbar.Create())
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
    .Pageable()
    .Sortable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(e => e.Id))
        .Create(update => update.Action("Create", "Employee"))
        .Read(read => read.Action("Read", "Employee"))
        .Update(update => update.Action("Update", "Employee"))
        .Destroy(update => update.Action("Delete", "Employee"))
    )
)

Step 3: Create Controller Actions In your ASP.NET Core controller, create the necessary actions to handle CRUD operations for the Employee model.

public class EmployeeController : Controller
{
    // GET: Employee/Read
    public ActionResult Read([DataSourceRequest] DataSourceRequest request)
    {
        // Retrieve and return the employee data
        // You can replace this with your own data retrieval logic
        var employees = GetEmployees();
        return Json(employees.ToDataSourceResult(request));
    }

    // POST: Employee/Create
    [HttpPost]
    public ActionResult Create(Employee employee)
    {
        // Insert the new employee into the database
        // You can replace this with your own data insertion logic
        // Make sure to return the created employee with the generated ID
        employee.Id = GenerateEmployeeId(); // Replace with your own ID generation logic
        return Json(employee);
    }

    // POST: Employee/Update
    [HttpPost]
    public ActionResult Update(Employee employee)
    {
        // Update the employee in the database
        // You can replace this with your own data update logic
        return Json(employee);
    }

    // POST: Employee/Delete
    [HttpPost]
    public ActionResult Delete(Employee employee)
    {
        // Delete the employee from the database
        // You can replace this with your own data deletion logic
        return Json(employee);
    }

    // Replace these methods with your own data access logic

    private List<Employee> GetEmployees()
    {
        // Retrieve and return the employee data
        // Replace this with your own data retrieval logic
        return new List<Employee>
        {
            new Employee { Id = 1, Name = "John Doe", Salary = 5000 },
            new Employee { Id = 2, Name = "Jane Smith", Salary = 6000 }
        };
    }

    private int GenerateEmployeeId()
    {
        // Generate and return a new employee ID
        // Replace this with your own ID generation logic
        return 3;
    }
}

With these steps, you have set up a custom edit popup for the Telerik ASP.NET Core