We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core
  4. CRUD operations with local data

CRUD operations with local data

Hello,

The .NET Core grid samples I've seen so far use a remote data source. My use case is somewhat simpler, but I've been struggling for quite a while to find a working solution.

I need a simple grid that does CRUD on some locally managed data (i.e. in a MongoDB database). The model looks like this:

public class ClientModel
    {        
        public ObjectId Id { get; set; }
        public string IdStr { get { return Id.ToString(); } set { Id = new ObjectId(value); } }

        public string Name { get; set; }
        public string Address { get; set; }
        public string City { get; set; }
        public IList<AlarmModel> Alarms { get; set; }        
    }

    public class AlarmModel
    {
        public string Description { get; set; }
        public DateTime Date { get; set; }
    }

I have declared the grid as follows:

<ej-grid id="ClientGrid" allow-paging="true" enable-alt-row="true" enable-row-hover="true" selected-row-index="0">
    <e-datamanager json="(IEnumerable<object>)ViewBag.DataSource" update-url="@Url.Action("UpdateClient")" insert-url="@Url.Action("InsertClient")" remove-url="@Url.Action("DeleteClient")" adaptor="remoteSaveAdaptor" />
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="@(EditMode.InlineForm)" show-delete-confirm-dialog="true"></e-edit-settings>
    <e-toolbar-settings show-toolbar="true" toolbar-items="@(new List<string>() { "search", "add", "edit", "delete", "update", "cancel" })"></e-toolbar-settings>
    <e-columns>
        <e-column field="IdStr" width=@("3%") header-text="ID" is-primary-key="true" is-identity="true" visible="true"></e-column>
        <e-column field="Name" width=@("25%") header-text="Name" clip-mode="Ellipsis"></e-column>
        <e-column field="Address" width=@("20%") header-text="Address" clip-mode="Ellipsis"></e-column>
        <e-column field="City" header-text="City" clip-mode="Ellipsis"></e-column>
    </e-columns>
</ej-grid>

Actual data is provided by the controller, like so:

var data = new List<ClientModel>();
// populate relevant data (omitted for brevity)
ViewBag.DataSource = data

Problem #1: Inserting new values in the grid works (the method InsertClient is called serverside) and so is deleting. Updating on the other hand does not work. What am I doing wrong?

Problem #2: What would be the best way to add/remove alarms for a client (see the Alarms member of the model)? Anything would do, such as a nested grid or a slave grid. Could you provide a sample?

Thank you.

4 Replies
VB Valer Bocan June 3, 2017 06:01 AM UTC

Update: It seems that the UpdateClient is not called when some of the values of the row are null. If a row is created with all values filled-in, the editing works just fine.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 5, 2017 12:08 PM UTC

Hi Valer,  
 
Thanks for using Syncfusion Product.  
 
Query #1: Inserting new values in the grid works (the method InsertClient is called serverside) and so is deleting. Updating on the other hand does not work. What am I doing wrong? 
 
We are unable to reproduce any problem at our end. We have prepared a sample that can be downloaded from the following location.  
 
 
Pleas share the following details to analyze the problem at our end.  
 
1)      Complete code example of the Grid and code behind.  
2)      Screenshot for the issue with or video demo 
3)      Stacktrace of browser console (if any error) 
4)      Version of the Essential Studio 
 
Query #2: What would be the best way to add/remove alarms for a client (see the Alarms member of the model)? Anything would do, such as a nested grid or a slave grid. Could you provide a sample? 
 
You can use detailsTemplate feature of ejGrid to bind the Hierarchical JSON on to the Grid. detailsTemplate API specify the jsRender template ID and detailsDataBound is the event, triggered after the expanding the details Grid. In this event, you can render a Grid control using that data bound to the master Grid. Refer to the following code example and respective output.  
 
<ej-grid id="FlatGrid" allow-paging="true" details-data-bound="detailGridData" details-template="#GridContents"> 
            . . . 
                 . ..  
</ej-grid> 
 
<script id="GridContents" type="text/x-jsrender"> 
    <div id="gridTab{{:ID}}"> 
        <div id="detailGrid{{:ID}}"></div> 
    </div> 
</script> 
 
<script type="text/javascript"> 
    function detailGridData(e) { 
        var filteredData = e.data["Alarms"]; 
        var data = ej.DataManager(filteredData) 
        e.detailsElement.find("#detailGrid" + e.data["ID"]).ejGrid({ 
            dataSource: data, 
            columns: [ 
                { field: "Description" }, 
                { field: "Date" } 
            ] 
        }); 
    } 
</script> 
 
 
 
 
Sample attachment also includes this solution. Also, refer to the following Help Documents and sample demo.  
 
 
Regards,  
Seeni Sakthi Kumar S. 
 


VB Valer Bocan June 6, 2017 01:56 PM UTC

Thank you for you reply. In the example you have provided, the detail grid shows some additional information about the selected item in the main grid, but that is not editable.

I apologize for not being clear in the first place: Both the master and the slave grids should allow CRUD operations, i.e. the master grid should allow adding/removing clients and the slave grid should allow adding/removing alarms (zero or more) for the currently selected client. Both the master and the slave grids are populated from the same list of ClientModel objects.

I hope this clears a bit the requirement. Thanks again for your support.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team June 7, 2017 09:11 AM UTC

Hi Valer,  
 
As per your requirement, we have modified the sample that can be downloaded from the following location.  
 
 
Editing action in the Grid requires a isPrimayKey property of the Grid columns. We have already discussed about its necessity in the following KB. 
 
 
So, we suggest to add the isPrimaryKey in the slave Grid as well. We could have also see; they are only two fields in the slave Grid. So, we suggest to include them as isIdentity column and hide from the user view using visible property of the Grid Columns and need to update them in the server end.  
 
 
As per the data model of your application, you are binding records to the details Grid from one of the fields of the parent Grid. We recommend to pass the value of the parent primary key to the server end, for updating the values to the database. This can be achieved by using the custom headers of the DataManager. We have already discussed about this in the following Kb.  
 
 
In the following code example, we have included the DetailsID as a new field to the slave Grid which serves as a primarykey. As per the above statements, we have made them hidden using the visible property of the Grid columns. Later, in the server end, we have updated the DetailsID as an identity column. The ID value sent to the server end using the custom headers has been used to retrieve the records of the parent Grid and from there we have traversed current slave Grid’s record.  
 
<ej-grid id="FlatGrid" allow-paging="true" details-data-bound="detailGridData" details-template="#GridContents"> 
    <e-datamanager json="ViewBag.child1" insert-url="/Home/CellEditInsert" remove-url="/Home/CellEditDelete" adaptor="remoteSaveAdaptor" /> 
    <e-toolbar-settings show-toolbar="true" 
                        toolbar-items=@(new List<string>() {"add","delete","update","cancel" })> 
    </e-toolbar-settings> 
    <e-edit-settings allow-adding="true" allow-editing="true" allow-deleting="true" edit-mode="InlineForm" /> 
    <e-columns> 
        <e-column field="ID" is-primary-key="true" width="75"> </e-column> 
                . . . 
    </e-columns> 
</ej-grid> 
 
<script id="GridContents" type="text/x-jsrender"> 
    <div id="gridTab{{:ID}}"> 
        <div id="detailGrid{{:ID}}"></div> 
    </div> 
</script> 
 
<script type="text/javascript"> 
    function detailGridData(e) { 
        var filteredData = e.data["Alarms"]; 
        var data = ej.DataManager({ 
            json: filteredData, 
            insertUrl: "/Home/CellEditInsertDetail", 
            removeUrl: "/Home/CellEditDeleteDetail", 
            adaptor: "remoteSaveAdaptor", 
            headers: [{ "ID": e.data["ID"] }] 
        }) 
        e.detailsElement.find("#detailGrid" + e.data["ID"]).ejGrid({ 
            dataSource: data, 
            editSettings: { allowAdding: true, allowDeleting: true }, 
            toolbarSettings: { showToolbar: true, toolbarItems: ["add", "delete", "update", "cancel"] }, 
            columns: [ 
                //you can hide the columns from user using visible property 
                //update the primarykey in server end using the isIdentity 
                { field: "DetailsID", isIdentity: true, isPrimaryKey: true, visible: false }, 
                { field: "Description" }, 
                { field: "Date", format: "{0:MM/dd/yyyy}", editType: "datepicker" } 
            ] 
        }); 
    } 
</script> 
 
        public ActionResult CellEditInsertDetail([FromBody]CRUDModel<AlarmModel> value) 
        { 
            Random ran = new Random(); 
            value.Value.DetailsID = ran.Next(); 
            int readonlyID = int.Parse(Request.Headers["ID"]); 
            Orders ord = order.Where(or => or.ID == readonlyID).FirstOrDefault(); 
            ord.Alarms.Add(value.Value); 
            return Json(value.Value); 
        } 
 
        public ActionResult CellEditDeleteDetail([FromBody]CRUDModel<AlarmModel> value) 
        { 
            int readonlyID = int.Parse(Request.Headers["ID"]); 
            Orders ord = order.Where(or => or.ID == readonlyID).FirstOrDefault(); 
            ord.Alarms.Remove(ord.Alarms.Where(al => al.DetailsID == int.Parse(value.Key.ToString())).FirstOrDefault()); 
            return Json(value); 
        } 
 
Regards,  
Seeni Sakthi Kumar S. 


Loader.
Up arrow icon