Grid with New Record, Update and Delete

[Thottempudi]

Dear All,

How to create the New  Record , Updated Record, Delete Record and View Records  Using Grid controls with validations( required filed ).

Please give me the sample projects......

thanks&regards,
srinivasulu

[Alexander Popov]

Hi Сrinivasulu,

I would recommend checking our offline demos, which are located in the Kendo UI installation path, under the \wrappers\aspnetmvc\Examples directory. The files you would be interested in are:

• Areas\razor\Views\web\grid\editing.cshtml
• Controllers\Web\Grid\EditingController.cs
• Models\ProductViewModel.cs

Regards,
Alexander Popov
Telerik

 

 

[Thottempudi]

Hi,
i am using kendo ui grd - ediing  mode  GridEditMode.InLine

in edit mode i am checking duplicate records  in controller and return error message. like
ModelState.AddModelError("grid_error", "The workgroup already exists. Please modify or delete your entry.");

but it is not displaying ...

Please check any mistake in view file

@(Html.Kendo().Grid<PeopleTray.Models.Admin.CorporateWorkgroupModel>()
                .Name("gridWorkgroup")
                .Columns(columns =>
                {
                    columns.Command(command => { command.Edit().Text("Edit").HtmlAttributes(new { title = "Edit" });  command.Destroy().Text("Delete").HtmlAttributes(new { title 

= "Delete" }); }).Width(160);
                    columns.Bound(p => p.Name).HtmlAttributes(new {required="true"});
                    columns.Bound(p => p.Description);
                    columns.Bound(w => w.Id).Hidden();                
                })
                .ToolBar(toolbar => toolbar.Create().Text("Add").HtmlAttributes(new { title="Add" }))
                .Editable(editable => editable.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))               
                .Pageable(pager => pager.Refresh(true))
                .Sortable(sortable => sortable.AllowUnsort(true))
                .Events(e => e.Edit("onEdit")) 
                .Events(e => e.Save("onSave"))                                                  
                .HtmlAttributes(new { style = "width: 70%;" })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .ServerOperation(false)
                    .Events(events => events.Error("grid_error")) // Handle the "error" event
                    .PageSize(10)
                    .Model(model =>
                    {
                        model.Id(ds => ds.Id);
                    })
                    .Create(create => create.Action("Workgroup_Insert", "CorporateAdmin", new { companyId = Model.CompanyId }))
                    .Read(read => read.Action("Workgroups_Read", "CorporateAdmin", new { companyId = Model.CompanyId }))
                    .Update(update => update.Action("Workgroup_Update", "CorporateAdmin"))
                    .Destroy(destroy => destroy.Action("Workgroup_Delete", "CorporateAdmin"))
                )
            )



 function grid_error(e) {
        if (e.errors) {
            var message = "There are some errors:\n";
            // Create a message containing all errors.
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            // Display the message
            alert(message);
            // Cancel the changes
            var grid = $("#grid").data("kendoGrid");
            grid.cancelChanges();
        }
    }

    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
Conroller
-------------

public ActionResult Workgroup_Insert([DataSourceRequest]DataSourceRequest request, CorporateWorkgroupModel model, int companyId)
        {
            model.ChangedBy = Request.UserHostName;
            model.CompanyId = companyId;
            if (model.Name != null)
            {
                var workgroups = AdminService.GetCorporateWorkgroupsModel(companyId);
                for (int r = 0; r < workgroups.Count;r++ )
                {
                    if (workgroups[r].Name.ToLower()== model.Name.Trim().ToLower())
                    {
                        ModelState.AddModelError("grid_error", "The workgroup already exists. Please modify or delete your entry.");
                        return Json(new[] { model }.ToDataSourceResult(request, ModelState));
                    }
                }
                AdminService.InsertCorporateWorkgroup(model);
                return Json(new[] { model }.ToDataSourceResult(request, null), JsonRequestBehavior.AllowGet);
            }
            return null;
        }

[Petur Subev]

Hello Thottempudi,

Your code looks correct, do you see the error event handler triggered at all? I would suggest you to compare your case to this code library:

http://www.telerik.com/support/code-library/handling-server-side-validation-errors-during-pop-up-editing

Could you send us what you tried in a small sample like the one above so we can see what exactly is going wrong?

Regards,
Petur Subev
Telerik

 

 

[Thottempudi]

how to refresh the grid after insert and update records..

Please send me the code where i need to wirte...

[Petur Subev]

Hello Thottempudi,

You can use the RequestEnd event of the DataSource to perform additional read that we fetch fresh data from the server.

function onRequestEnd(e) {
     if (e.type != "read") {
            this.read();
     }
}

Kind Regards,
Petur Subev
Telerik