template column with multiple datepicker control and batchSave this column using an external button

[priya]

Hi,

I added grid control and a button in my application as below.....

<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowTextWrap="true" allowPaging="true" allowSorting="true"

                                  cellEdit="cellEdit" detailTemplate="#detailtemplate">

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

                            <e-grid-editSettings allowEditing="true" mode="Batch" showConfirmDialog="true"></e-grid-editSettings>

                            <e-grid-selectionsettings persistSelection="true" type="Multiple" checkboxOnly="true"></e-grid-selectionsettings>

                            <e-grid-columns>

                                <e-grid-column field="" type="checkbox" width="60" allowFiltering="false" headerTextAlign="Center" allowSorting="false"></e-grid-column>

                                <e-grid-column field="FullName" headerText="Employee" template="#EmpName" width="185" allowEditing="false"></e-grid-column>

                                <e-grid-column headerText="start date" width="120" template="#StartDate" allowEditing="true"></e-grid-column>

                                <e-grid-column headerText="end date" width=" 120" template="#EndDate" allowEditing="true"></e-grid-column>

                            </e-grid-columns>

                        </ejs-grid>

<input type="button" value="Submit" onclick="SubmitHandler()" />

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

    <div>

    ${if(StartDate1)}

        <span class="date__input__box input__margin__bottom">

                        <ej-date-picker format="MM-dd-yyyy" strictmode="true" value="${StartDate1}" display-inline="true"></ej-date-picker>

          </span>

                    ${/if}

                     ${if(StartDate2)}

        <span class="date__input__box input__margin__bottom">

                        <ej-date-picker format="MM-dd-yyyy" strictmode="true" value="${StartDate2}" display-inline="true"></ej-date-picker>

                         </span>

                    ${/if}

    </div>

</script>

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

    <div>

        ${if(StartDate1)}

        <span class="date__input__box input__margin__bottom">

                        <ej-date-picker format="MM-dd-yyyy" strictmode="true" value="${EndDate1}" display-inline="true"></ej-date-picker>

                    </span>

                    ${/if}

                     ${if(StartDate2)}

        <span class="date__input__box input__margin__bottom">

                        <ej-date-picker format="MM-dd-yyyy" strictmode="true" value="${EndDate2}" display-inline="true"></ej-date-picker>

                    </span>

    </div>

</script>

Note: there are multiple datepicker elements inside a single template column.

Please help in addressing the below...

1. Bind the values from C# method to these elements in template column.(assigned value to {StartDate1}, {StartDate2},{EndDate1} and {EndDate2} - the controls are rendered with no value displayed in the UI.
2. i dont see the datepicker(calendar) option to reselect the dates

3. I need to add custom validator to the EndDate field and check whether it is greater than StartDate (each pair separately).
3. Manually changing the date in these fields and trying to click the external button (Submit).

Please refer the code below....I understand batchSave() method is not available and used batchUpdate() instead. Trying to get the changed values using getBatchChanges and rowData as below. But i dont see the changed values in neither option. I want to pass these selected records values(updated values) to the post method.

function SubmitHandler() {

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

        obj.batchUpdate();

        var batchData = obj.getBatchChanges();

        var selectedRowIndexes = obj.getSelectedRowIndexes();

        selectedRowIndexes.forEach(function (item, i) {

            var rowData = (obj.getRowInfo(obj.getRowByIndex(item))).rowData;

        });

        $.ajax({

            url: '/ControllerName/Submit',

            data: { },

            type: "POST",

            success: function () {

                //alert('submitted');

            }

        });

    }

[Santhosh Iruthayaraj]

Hi Priya,

Greetings from Syncfusion support.

From your query, we understand that you wish to display two DatePicker components in a single column and update the grid dataSource using Batch editing when changing the DatePicker values. We have prepared a code snippet and a sample for your reference, which you can find attached below:

[CSHTML]

 

<ejs-grid id="Grid" dataSource="ViewBag.datasource" allowPaging='true' created="gridCreated" height="300"

    toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })" queryCellInfo="queryCellInfo">

    <e-grid-editSettings allowAdding="true" allowDeleting="true" allowEditing="true" mode="Batch"

        showConfirmDialog="false"></e-grid-editSettings>

    <e-grid-selectionsettings persistSelection="true" type="Multiple" checkboxOnly="true"></e-grid-selectionsettings>

    <e-grid-columns>

        <e-grid-column type="checkbox" width="60" allowFiltering="false" headerTextAlign="Center"

            allowSorting="false"></e-grid-column>

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

        <e-grid-column field="FullName" headerText="Employee" width="100" allowEditing="true"></e-grid-column>

        <e-grid-column headerText="start date" width="250" template="#StartDate" allowEditing="true"></e-grid-column>

        <e-grid-column headerText="end date" width=" 250" template="#EndDate" allowEditing="true"></e-grid-column>

 

        @* you need to have the below four columns to update the changes using updateCell method *@

        @* but you can hide it using by setting the "visible" property to false *@

        <e-grid-column field="StartDate1" visible="true" format="yMd"></e-grid-column>

        <e-grid-column field="StartDate2" visible="true" format="yMd"></e-grid-column>

        <e-grid-column field="EndDate1" visible="true" format="yMd"></e-grid-column>

        <e-grid-column field="EndDate2" visible="true" format="yMd"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

 

<input type="button" value="Submit" onclick="submitHandler()" class="e-btn e-primary"/>

 

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

        ${if(StartDate1)}

            <div>

                Start Date 1: <input class="StartDate1DatePicker" />

            </div>

        ${/if}

        ${if(StartDate2)}

            <div>

                Start Date 2: <input class="StartDate2DatePicker " />

            </div>

        ${/if}

</script>

 

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

        ${if(EndDate1)}

            <div>

                End Date 1: <input class="EndDate1DatePicker" />

            </div>

        ${/if}

        ${if(EndDate2)}

            <div>

                End Date 2: <input class="EndDate2DatePicker" />

            </div>

        ${/if}

</script>

 

<script type="text/javascript">

    let gridInstance;

 

    function gridCreated() {

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

    }

 

    function queryCellInfo(args) {

        if (args.column.headerText === "start date") {

            renderDatePicker(args, "StartDate1");

            renderDatePicker(args, "StartDate2");

        } else if (args.column.headerText === "end date") {

            renderDatePicker(args, "EndDate1");

            renderDatePicker(args, "EndDate2");

        }

    }

 

    function renderDatePicker(args, field) {

        if (args.data[field]) {

            var datepicker = new ej.calendars.DatePicker({

                value: args.data[field],

                change: (e) => {

                    let rowIndex = gridInstance.getRowInfo(e.element.closest('.e-rowcell')).rowIndex;

                    gridInstance.updateCell(rowIndex, field, e.value);

                },

                width: 140

            });

            datepicker.appendTo(args.cell.querySelector(`.${field}DatePicker`));

        }

    }

 

    function submitHandler() {

        @* you can get the batch changes using the getBatchChanges method here *@

        console.log(gridInstance.getBatchChanges());

 

        @* you can call the batchSave method from editModule to save the batchChanges to the Grid *@

        gridInstance.editModule.batchSave();

 

 

        @* you can update the data here using post method with data retrieved from getBatchChanges method *@

    }

</script>

 

Note: We have incorporated the DatePicker into the Column Template by rendering the input element and appending our JavaScript DatePicker control using the "queryCellInfo" event of the Grid control.

Regards,
Santhosh I

Attachment: CoreGridApp_5a261d1.zip