Cell Editing Template in VB.Net

[jlwarranty]

Looking at the cell edit template, and I'm not sure how to do the .Edit part in VB.

https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#cell-edit-template

col.Field("OrderDate").HeaderText("Ship Name").Format("yMd").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").Add();

Any advice would be helpful!

[Rajapandi Ravi]

Hi jlwarranty, 

Greetings from syncfusion support 

You can achieve your requirement by using cellEditTemplate feature of Grid to achieve your requirement. 

The cell edit template is used to add a custom component for a particular column by invoking the create, write, read, destroy functions.  

• create function is used to create the element at time of initialization.
• write function is used to create custom component or assign default value at time of editing.
• read function is used to read the value from component at time of save.
• destroy function is used to destroy the component

 

By using this feature, we rendered the DatePicker component to edit the OrderDate field. The create, write, read and destroy functions will be triggered for each time When you are editing a row. 

Please refer the below code example and sample for more information, 

 

@Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.DataSource).Columns(col =>{ 

    col.Field("OrderID").HeaderText("Order ID").Width("150").IsPrimaryKey(true).Add(); 

    col.Field("ShipCity").HeaderText("Ship City").Width("150").Add(); 

    col.Field("OrderDate").HeaderText("Order Date").Format("yMd").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").Add(); 

    col.Field("CustomerID").HeaderText("CustomerID").Width("150").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Left).Add(); 

}).AllowSorting().AllowPaging().PageSettings(page => page.PageSize(8)).AllowSorting().EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Normal); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render() 

 

<script> 

    var elem; 

    var dObj; 

    function create(args) { // Input element is created and returned for appending the DatePicker control 

        elem = document.createElement('input'); 

        return elem; 

    } 

    function write(args) {//It is used to create the custom component or assign default value at the time of editing 

        dObj = new ej.calendars.DatePicker({ //DatePicker 

            value: new Date(args.rowData[args.column.field]), 

            placeholder: 'Select DateTime' 

        }); 

        dObj.appendTo(elem); 

    } 

 

    function destroy() { //destroy function is used to destroy the component. 

        dObj.destroy(); 

    } 

    function read(args) { //read function is used to read the value from component at time of save. 

 

        return dObj.value; 

    } 

</script> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/166562/ze/166562-1578225085.zip 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#cell-edit-template 

Regards,
Rajapandi R

[jlwarranty]

Hey, so yeah, I linked to that article too!
Apparently the real answer to how to do this is like this:

.Edit(New With {.create = "create", .read = "read", .destroy = "destroy", .write = "write"})

See, the C# version of 

.Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" })

doesn't work in the VB.net version of ASP.net MCV.

Thanks for trying.

[Rajapandi Ravi]

Hi jlwarranty, 

Thanks for the update 

Based on your query we could see that you like to convert our documentation code to vb.net. You cannot use the same code in vb.net. You can achieve your requirement by converting the same code to vb.net syntax. Please refer the below code example and sample for more information. 

 

@Html.EJS().Grid("Grid").DataSource(Model).AllowPaging().Columns(Sub(col) 

col.Field("OrderID").HeaderText("OrderID").IsPrimaryKey(True).TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add() 

col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add() 

col.Field("OrderDate").HeaderText("Order Date").Format("yMd").Edit(New With {   //define the code in vb.net syntax 

                                                                          .create = "create", 

                                                                          .read = "read", 

                                                                          .destroy = "destroy", 

                                                                          .write = "write" 

                                                                          }).Width("150").Add() 

                                                                          col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Format("C2").Add() 

                                                                      End Sub).EditSettings(Sub(edit) 

                                                                                                edit.AllowEditing(True) 

                                                                                                edit.AllowAdding(True) 

                                                                                                edit.AllowDeleting(True).Mode(Syncfusion.EJ2.Grids.EditMode.Normal) 

                                                                                            End Sub).Render(); 

 

Sample: https://www.syncfusion.com/downloads/support/forum/166562/ze/166562-1301313005.zip 

Regards,
Rajapandi R