How the user can enter null value to a grid cell?

[gabor]

I have a <ejs-grid ...> which uses <e-data-manager adaptor="UrlAdaptor"..> 

When inline updating a row Data goes to the server in json where controller action is executed

public async Task<IActionResult> Update([FromBody] CRUDModel<UserModel> crudModel)

All is working OK. However I have a nullable property in my UserModel say DateTimeOffset? LockoutEnd { get; set; }

When any data is in this filed user wants to null this field via inline row editing.

Unfortunately emptying the cell in the UI will send ,"lockoutEnd":"" json body instead of ,"lockoutEnd":null.

Q1: How can the end user null that cell, and update the row?

Q2: Is there the datagrid usage (keyboard shortcuts) etc documented, explained. I mean, I only know by intuition that Esc cancels the inline row editing and also by intuition that Alt+Insert created a new row for inline editing...

[Manivel Sellamuthu]

Hi Gabor, 

Greetings from Syncfusion support. 

Query: How can the end user null that cell, and update the row? 

 

Before proceeding your query, we request you to share the complete Grid code, so that we can check the edit type used for the  LockoutEnd field and provide an appropriate solution. 

Query: Is there the datagrid usage (keyboard shortcuts) etc documented, explained. I mean, I only know by intuition that Esc cancels the inline row editing and also by intuition that Alt+Insert created a new row for inline editing 

Yes. We have already discussed about this in our documentation section. Please refer the below documentation link for more information. 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/accessibility/#keyboard-navigation 

Regards, 

Manivel 

[gabor]

Many thanks for the answer.

Meanwhile I've also discovered the grid keyboard documentation, it unfortunately do not mention the "how to null a cell" topic, I suppose it is related with your answer, "it depends on..." However still it would be great to know how the most default scenario (default editor for string model data cell) is working, and how to null it?

I understood, it could be specific, and depends on the edit type, thanks for making the question more clear.

Q1: How can the end user, using the browser UI enter null as his input to a grid cell which have the default edit type for string model property (for example in my code field: "userName")

Q2: How can the end user, using the browser UI enter null as his input to the "lockoutEnd" cell?

Regards

Gabor

   <ejs-grid id="Grid" allowPaging="true" allowSorting="true" allowFiltering="true" toolbar="@(new List<string> {"Search"})">

      <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" newRowPosition="Top" ShowDeleteConfirmDialog="true"></e-grid-editSettings>

      <e-grid-filterSettings type="Menu"></e-grid-filterSettings>

      <e-data-manager adaptor="UrlAdaptor" url="@Url.Action("Get", "User")" insertUrl="@Url.Action("Insert", "User")" updateUrl="@Url.Action("Update", "User")" removeUrl="@Url.Action("Remove", "User")"></e-data-manager>

      <e-grid-columns>

          <e-grid-column field="id" isPrimaryKey="true" textAlign="Right" headerText="Id" width="120"></e-grid-column>

          <e-grid-column field="userName" textAlign="Right" headerText="Name" width="120"></e-grid-column>

         <e-grid-column field="lockoutEnd" 

                        format="M/d/yyyy h:mm a"

                        editType="datetimepickeredit"

                        edit="@( new { params = { format = "M/d/yyyy h:mm a", timeFormat = "h:mm a" } })"

                        textAlign="Right" headerText="LockoutEnd" width="120"></e-grid-column>

      </e-grid-columns>

   </ejs-grid>

[Manivel Sellamuthu]

Hi Gabor, 

Thanks for your update and sharing the code example. 

Query1:How can the end user, using the browser UI enter null as his input to a grid cell which have the default edit type for string model property (for example in my code field: "userName") 

By default in Grid, If edit type is not defined in the column, then it will be considered as the stringedit type (Textbox component). So if we do not enter the value for “username” field it will be considered as undefined. We can change the value to null using the actionBegin event of the Grid. Please refer the below code example for more information. 

function actionBegin(args) { 

  if (args.requestType === "save") { 

    var customerID = args.data.CustomerID; 

// if the customer id is undefined or ‘’,we can change it to null 

    if (customerID === undefined || customerID === "") { 

      args.data.CustomerID = null; 

    } 

  } 

} 

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#cell-edit-type-and-its-params 

Q2: How can the end user, using the browser UI enter null as his input to the "lockoutEnd" cell? 

From your code example, we could see that you are using the “datetimepickeredit”.  By default if we do not enter the value(leave as blank), we could see that the value is null. Please refer the below screenshot for more information. 

 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[gabor]

Manivel,

Many thanks, perfect answer.

Regards

Gabor

[Manivel Sellamuthu]

Hi Gabor, 

Thanks for your update. 

We are glad that the provided suggestion helped. 

  

Please let us know, if you need further assistance. 

Regards, 

Manivel