Some example of the editing of a grid with template mode, but in razor pages not in MVC

[Patricio Venegas B]

Some example of the editing of a grid with template mode, but in razor pages not in MVC

Thank you

[Madhu Sudhanan P]

Hi Patricio Venegas, 

We have checked your query and created a simple sample based on your requirement. In the below sample, we have rendered the Essential JS2 Grid component in ASP.NET core with Razor pages and perform dialog template operation in Grid. 

[index.cshtml] 

<ejs-grid id="Grid" allowPaging="true" load="onLoad" actionComplete="actionComplete" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template="#dialogtemplate"></e-grid-editSettings> 

    <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete"  adaptor="UrlAdaptor"></e-data-manager> 

    .  .  .  .  .  

    <e-grid-columns> 

           .  .  .  .  . 

        <e-grid-column field="OrderDate" headerText="OrderDate" editType="datepickeredit" format="yMd" textAlign="Right" width="120"></e-grid-column> 

    </e-grid-columns> 

</ejs-grid> 

<script id='dialogtemplate' type="text/x-template"> 

    <div class="form-row"> 

       <div class="form-group col-md-6"> 

            <div class="e-float-input e-control-wrapper"> 

                <input id="OrderID" name="OrderID" type="text" value="${OrderID}" ${if(isAdd)} ${else} disabled ${/if} /> 

                <span class="e-float-line"></span> 

                <label class="e-float-text e-label-top" for="OrderID">Order ID</label> 

            </div> 

        </div> 

        </div> 

        <div class="form-row"> 

            <div class="form-group col-md-6"> 

                <input name="Freight" id="Freight" value=${Freight} /> 

            </div> 

        </div> 

        <div class="form-row"> 

            <div class="form-group col-md-12"> 

                <input type="text" name="OrderDate" id="OrderDate" value=${OrderDate} /> 

            </div> 

        </div> 

</script> 

<script> 

    function actionComplete(args) { 

        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { 

            var data = args.rowData; 

            // Convert Widget for the Freight field 

            new ej.inputs.NumericTextBox({ value: data.Freight, format: 'C2', placeholder: 'Freight', floatLabelType: 'Always' }, 

                args.form.elements.namedItem('Freight')); 

            // Convert Widget for the OrderDate field 

            new ej.calendars.DatePicker({ value: data.OrderDate, placeholder: 'Order Date', floatLabelType: 'Always' }, 

                args.form.elements.namedItem('OrderDate')); 

            if (args.requestType === 'add') {                 

                args.form.elements.namedItem('OrderID').focus(); 

            } 

        } 

    } 

</script> 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/razorpage1416871775  

Help Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit.html#dialoginline-template 

 

In this sample we have used dialog template for editing, if you meant any other template mode in your query please get back with us the details about the template mode you expected to use in the grid. 

Regards, 

Madhu Sudhanan P 

[Costa]

Hi. How to avoid “undefined” text in the fields when adding a record?

Thanks.

[Madhu Sudhanan P]

Hi Costa, 

Please modify the value assigning to the input element as follows to resolve this problem. 

<input type="text" name="ShipCity" id="ShipCity" value=${if(isAdd)} '' ${else} ${ShipCity} ${/if} /> 

Regards, 

Madhu Sudhanan P  

[Costa]

Ok, Thanks.

[Madhu Sudhanan P]

Hi Costa, 

Thanks for the update. Please get back to us if you need further assistance. 

Regards, 

Madhu 

[Costa]

Hello, guys. It seems like everything is fine, but if you change the time zone on the server, for example at UTC + 9 (JST), the editing date does not work correctly.

[Costa]

[Costa]

[Costa]

[Thavasianand Sankaranarayanan]

Hi Costa, 

 

Query: Hello, guys. It seems like everything is fine, but if you change the time zone on the server, for example at UTC + 9 (JST), the editing date does not work correctly. 

 

We have validated the reported issue and found that timezoneoffset is cause of this issue. TimezoneOffset will affect the converted string, when we stringify the date object. So we suggest you to use the following solution in actionBegin event of the Grid to resolve this issue. Please refer the following code example for your reference. 

[code example] 

 

... 

 

<div> 

    <ejs-grid id="Grid" locale="it" allowPaging="true" actionBegin="actionBegin" allowSorting="true" allowFiltering="true" height="273" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

        ... 

       <e-grid-columns> 

            ... 

       </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

    function actionBegin(args) { 

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

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

            var cols = grid.columns; 

            for (var i = 0; i < cols.length; i++) { 

                if (cols[i].type == "date") { 

                    var date = args.data[cols[i].field]; 

                    args.data[cols[i].field] = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMilliseconds())); 

                } 

            } 

        } 

    } 

</script> 

Please get back to us if you need further assistance. 

Regards, 

Thavasianand S. 

[Costa]

Thanks, but maybe better::

                    if (date != undefined) {

                        args.data[cols[i].field] = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMilliseconds()));

                    }

And, is it a bug on the side of Syncfusion, or expected behavior?

[Madhu Sudhanan P]

Hi Costa 

Thanks for your update. 

By default, the Date object will be converted into ISO string to before sending to the server and the local timezone adjustment will not be made to the selected values since there are cases when the date object need to be send as it is entered from the editor.  Due to this scenario the local time adjustment has to be made at the client side. Hence we suggest you to use the previously provided solution in your sample to achieve your requirement.  

Regards, 

Madhu Sudhanan P 

[Costa]

Thank you, but I don't understand. When an application is started under Visual Studio, the local computer is both a client and a server. Accordingly, they have the same time zone. Why in this case the date when saving is distorted?

[Madhu Sudhanan P]

Hi Costa, 

Thanks for your update. 

We have validated with our end and we suggest you to use the below way to achieve your requirement. By default, while using remote data it send(response) the date object in UTC format and it does not converted to local time zone so we request you to apply the serverTimezoneOffset as below to resolve the reported problem. 

<script> 

    ej.data.DataUtil.serverTimezoneOffset = (2 * (new Date().getTimezoneOffset() / 60));   //Set the servertimezoneoffset 

</script> 

 

<ejs-grid id="Grid" allowPaging="true" load="onLoad" actionComplete="actionComplete" toolbar="@( new List<object>() {"Add","Edit","Delete","Update","Cancel"})"> 

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Dialog" template="#dialogtemplate"></e-grid-editSettings> 

    <e-data-manager url="/Index?handler=DataSource" insertUrl="/Index?handler=Insert" updateUrl="/Index?handler=Update" removeUrl="/Index?handler=Delete" adaptor="UrlAdaptor"></e-data-manager> 

    <e-grid-columns> 

 

        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="100"></e-grid-column> 

        . . . .  

    </e-grid-columns> 

</ejs-grid> 

Regards, 

Madhu Sudhanan P 

[Costa]

Thanks. It seems to work, and it is a more preferable option than the first one. But we need to check for pitfalls.

[Madhu Sudhanan P]

Hi Costa, 

Thanks for the update. Please get back to us if you face any problem with the provided solution. 

Regards, 

Madhu 

[Joe Gonzalez]

When I run the sample project SyncFusion provided in this forum, I get an error in the OnPostUpdate handler as the value passed in is null.

I am also looking to apply validations while using the dialog template and the validations I defined in the grid column definitions section of the page are not being triggered.

Please provide an updated sample with the OnPostUpdate correction and with the use of validations.

Thanks

Attachment: syncfusion_razor_demo_error_5e78646d.zip

[Balaji Sekar]

Hi Costa, 

 

Thanks for your valuable patience. 

 

We have validated the dialogTemplate feature in the Razor page but we are unable to reproduced the reported problem. Please download the sample which we have prepared to dialogTemplate feature in razor page from the link below, 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/140090/ze/Grid_Razor_31429153331_(1)-6622329751478901544.zip  

 

Please get back to us, if you need further assistance. 

 

Regards, 

Balaji Sekar