1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Insert not working. On controller parameter value is null

Insert not working. On controller parameter value is null

Insert not working, on controller parameter value is null.

 public async Task<IActionResult>Add([FromBody] ICRUDModel<Accountants> value)

{

....

}

@{

        List<object> toolbarItems = new List<object>();

        toolbarItems.Add("Add");

        toolbarItems.Add("Edit");

        toolbarItems.Add("Delete");

        toolbarItems.Add("Cancel");

        toolbarItems.Add("Update");

        //toolbarItems.Add(new { text = "Clear Filter", tooltipText = "Clear Filter", id = "Click", align = "Right" });

    }


    <div class="col-sm-12">

        <ejs-grid id="Grid" dataBound="dataBound" allowPaging="true" allowFiltering="true" toolbar=toolbarItems>

            <e-grid-aggregates>

                <e-grid-aggregate>

                    <e-aggregate-columns>

                        <e-aggregate-column field="Debit" type="Sum" format="C2" footerTemplate="${Sum}">

                        </e-aggregate-column>

                        <e-aggregate-column field="Credit" type="Sum" format="C2" footerTemplate="${Sum}">

                        </e-aggregate-column>

                    </e-aggregate-columns>

                </e-grid-aggregate>

            </e-grid-aggregates>

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

            <e-data-manager json="@Model.ToArray()" insertUrl="/Accountant/Add" updateUrl="/Accountant/Update"

                            removeUrl="/Accountant/Delete" adaptor="RemoteSaveAdaptor"></e-data-manager>

            <e-grid-editsettings showDeleteConfirmDialog="true" allowAdding="true" allowDeleting="true" allowEditing="true"></e-grid-editsettings>

            <e-grid-pagesettings pageSizes="true" pageSize="100"></e-grid-pagesettings>

            <e-grid-columns>

                <e-grid-column field="Id" headerText="Id" isPrimaryKey="true" width="0"></e-grid-column>

                <e-grid-column field="Date" headerText="Date" editType="datepickeredit" format="yMd"></e-grid-column>

                <e-grid-column field="Transaction" headerText="Transaction" width="240"></e-grid-column>

                <e-grid-column field="Description" headerText="Description" width="320"></e-grid-column>

                <e-grid-column field="Category" headerText="Category"></e-grid-column>

                <e-grid-column field="Debit" headerText="Debit" editType="numericedit"></e-grid-column>

                <e-grid-column field="Credit" headerText="Credit" editType="numericedit"></e-grid-column>

            </e-grid-columns>

        </ejs-grid>


i guess no need for this databound event script but anyway i am pasting it.

function dataBound(e) {

        var grid = document.getElementById('Grid').ej2_instances[0];

        var field = 'Debit';

        var field2 = 'Credit';

        document.getElementById('debitSum').innerText = 'Total Debit: ' + grid.aggregateModule.footerRenderer.aggregates.aggregates[field + ' - sum'].toFixed(2);

        document.getElementById('creditSum').innerText = 'Total Credit: ' + grid.aggregateModule.footerRenderer.aggregates.aggregates[field2 + ' - sum'].toFixed(2);


I checked your forums specially this link but no help

https://www.syncfusion.com/forums/168674/new-row-displays-empty-at-datagrid-using-remotesaveadaptor


i have this as well in my startup class

services.AddMvc().AddNewtonsoftJson(options =>

            {

                options.SerializerSettings.ContractResolver = new DefaultContractResolver();

            });


dot net core framework is 3.1

Package : Syncfusion.EJ2.AspNet.Core

Vesrion : 19.4.0.53


10 Replies 1 reply marked as answer
PS Pavithra Subramaniyam Syncfusion Team March 4, 2022 09:29 AM UTC

Hi Mohammed, 
 
We have tried to reproduce the issue at our end, but the insert method has the newly added value in controller side. Please refer to the below sample link. 
 
 
For further validation please share the below details that will be helpful for us to provide a better solution. 
 
  1. Share the network tab screenshot to check the passed value to the server while editing
  2. Share the “ICRUDModel” class
  3. Is there any script error?
  4. Share the issue reproducible sample if possible
 
Regards, 
Pavithra S 


MA Mohammed Ansar Vaseem March 5, 2022 02:24 AM UTC

Hi Pavithra please check the attachment. 


Attachment: ScreenShots_2670ed05.zip

MA Mohammed Ansar Vaseem March 5, 2022 11:39 PM UTC

Hi Pavithra , I also want a date range picker on the date column while filtering. 

I am checking these links but no help.

https://www.syncfusion.com/forums/171499/adding-daterangepicker-filter-to-datagrid-filterbaroperator?reply=S2RQOG

https://helpej2.syncfusion.com/aspnetcore/documentation/grid/how-to/use-filter-bar-template-in-foreign-key-column?cs-save-lang=1&cs-lang=razor


Please help on this as well 



PS Pavithra Subramaniyam Syncfusion Team March 7, 2022 10:30 AM UTC

Hi Mohammed, 
 
Query#1: Insert not working. On controller parameter value is null 
 
From the given screenshot we suspect that you are passing null value to the non-nullable field to the server which caused this issue. So, we suggest setting the field as nullable or pass a value to those fields. For the primary key field, you can set a default value since this field is hidden in your sample. Please refer to the below code example and API link for more information. 
 
<ejs-grid id="Grid" dataBound="dataBound" allowPaging="true" allowFiltering="true" toolbar=toolbarItems> 
        .  .  . 
        <e-grid-columns> 
 
            <e-grid-column field="OrderID" headerText="Order ID" defaultValue="1" isPrimaryKey="true" width="0"></e-grid-column> 
            .  .  . 
        </e-grid-columns> 
 
    </ejs-grid> 
 
 
 
Query#2: I also want a date range picker on the date column while filtering. 
 
You can achieve your requirement by rendering the date range as a custom component in the filter menu. This is explained below, 
 
Initially define create and write methods of the column filters “ui” property. In the create method, create an input element and append it to the target element(returned in event arguments). Then, render a EJ2 JS date range picker control and append it to the input element. 
 
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowFiltering="true"> 
    <e-grid-filterSettings type="Menu"></e-grid-filterSettings> 
    <e-grid-columns> 
        <e-grid-column field="OrderDate" headerText="Order Date" filter="@(new { ui= new { create = "onFilterCreate", write = "onFilterWrite" } })" type="date" format="yMd" width="120"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
<script> 
    function onFilterCreate(args) { 
        // Input element is created and appended to the target element 
        var flValInput = new ej.base.createElement('input', { className: 'flm-input' }); 
        args.target.appendChild(flValInput); 
        // Date range picker is rendered and appended to the input element 
        var dateRangeInst = new ej.calendars.DateRangePicker({ 
        }); 
        dateRangeInst.appendTo(flValInput); 
    } 
 
    function onFilterWrite(args) { 
    } 
</script> 
 
Now in the date range picker’s change event, the start and end date values are stored in a global variable and using the Grid’s filterByColumn the start date value is filtered with ‘greaterthan’ operator on the date column. 
 
var dateRangeInst = new ej.calendars.DateRangePicker({ 
        change: function (e) { 
            if (e != undefined && e.value) { 
                var grid = document.getElementById("Grid").ej2_instances[0]; 
                // Get date values from date range picker 
                startDate = e.value[0]; 
                endDate = e.value[1]; 
                // Flag variable is used to identify this case in the Grid’s action begin event 
                customFilter = true; 
                // Filter the required column with start date of the date range picker 
                // GridInstance.filterByColumn(Column field name, filter operator, filter value) 
                grid.filterByColumn('OrderDate', 'greaterthan', startDate); 
            } 
        } 
}); 
dateRangeInst.appendTo(flValInput); 
 
Finally in the Grid’s actionBegin event handler, additional ‘lessthan’ filter for the date column is pushed to the column property(returned in event arguments) with end date value. A flag variable is enabled in the date range picker’s change event to identify this case here. 
 
// Grid’s actionBegin event handler 
function onActionBegin(args) { 
        // Check for filter column and flag enabled in date range picker’s change event 
        if (args.requestType === "filtering" && args.currentFilteringColumn === "OrderDate" && customFilter) { 
            customFilter = false; 
            // End date value is added as additional filter value with ‘lessthan’ filter operator 
            args.columns.push({ actualFilterValue: {}, actualOperator: {}, field: "OrderDate", ignoreAccent: false, isForeignKey: false, matchCase: false, operator: "lessthan", predicate: "and", uid: this.getColumnByField(args.currentFilteringColumn).uid, value: endDate }); 
        } 
} 
 
If the previously filtered date range needs to be displayed in the filter Menu’s input element, it can be achieved by getting the filter values for the date column from the Grid’s filterSettings property and setting them to the date range picker’s startDate and endDate properties. 
 
function onFilterCreate(args) { 
                   . 
                   . 
        var grid = document.getElementById("Grid").ej2_instances[0]; 
        var date = []; 
        grid.filterSettings.columns.forEach(col => { 
            // Filter values for the date column are pushed into an array 
            if (col.field === "OrderDate") 
                date.push(col.value); 
        }); 
        var dateRangeInst = new ej.calendars.DateRangePicker({ 
            startDate: date[0], 
            endDate: date[1], 
                   . 
                   . 
        }); 
        dateRangeInst.appendTo(flValInput); 
    } 
 
We have prepared a sample based on this for your reference. You can download it from the below link, 
 
 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Pavithra S 


MA Mohammed Ansar Vaseem March 8, 2022 03:17 AM UTC

Thank you  Pavithra

I now have a date range picker in the date filter and I can select start and end dates. 

But filtering is not working correct. It is bringing dates which are greater than end date.


PS Pavithra Subramaniyam Syncfusion Team March 8, 2022 01:12 PM UTC

Hi Mohammed, 

Since the DateRangePicker filtering is working fine at our end, could you please share the below details that will be helpful for check the issue and give a better solution as early as possible? 

  1. Share the full Grid code
  2. Is there any script error?
  3. The “ej2.min.js” script file version
 
Regards, 
Pavithra S  


MA Mohammed Ansar Vaseem March 9, 2022 12:12 AM UTC

Hi Pavithra

thank you for your reply, please check attachment.

Also I am not able to download your sample attachments. Its saying access denied even though I am logged in to syncfusion portal. It is saying.

  • The incident associated with this file is not tied to the account you used to log in. To Logout use this .
  • Your enterprise portal admin has not allowed you to access other portal users’ incidents. Ask admin to change the support visibility in their Syncfusion profile.


Attachment: ScreenShots_2efef71e.zip


PS Pavithra Subramaniyam Syncfusion Team March 9, 2022 11:34 AM UTC

Hi Mohammed, 
 
Thanks for the details. 
 
We have tried the same code, but it is working fine at our end. We have prepared new sample link for you reference. Please refer to the below sample and screenshot for more information. 
 
 
 
 
 
 
For further validation please share a issue reproducible sample or hosted link that will be helpful for us to provide a better solution as early as possible. 
 
Regards, 
Pavithra S 


Marked as answer
MA Mohammed Ansar Vaseem March 21, 2022 10:08 PM UTC

Hi  Pavithra,

Sorry for late response.

Its working! Thank you! for you help

Regards


PS Pavithra Subramaniyam Syncfusion Team March 22, 2022 01:04 PM UTC

Hi Mohammed, 
 
It is great to hear that the provided solution is working! 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S 


Loader.
Up arrow icon