It doesn't work because of the DataGrid aggregates.

[TaeWook Kang]

hello

i added aggregates code.

but, there is a big problem when the grid edit state ends.

Please, see the snapshot below for details.

[Rajapandi Ravi]

Hi TaeWook, 

Greetings from Syncfusion support 

We have analyzed your query and we could see that you are having aggregate for Total F.U column and when you edit the SUPPLY WATER column you will get the script error. Based on your query we have prepared a sample and try to reproduce your reported problem at our end, but it was unsuccessful. Please refer the below sample for more information. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/172024404444793.zip 

If you still face the issue, please share the below details that will be helpful for us to provide better solution. 

1)          Please confirm while saving the Supply water column you are performing any custom action or not. 

2)          Please share your exact requirement scenario with detailed description. 

3)          Share your syncfusion package version. 

4)          If possible, Share the simple issue reproducible sample or try to reproduce the issue in the above attached sample. 

Regards, 

Rajapandi R 

[TaeWook Kang]

hi, Rajapandi 

thanks for your reply.

there is noting wrong with your code. 

so, i will send the code as below.

please give me a solution what is the problem

<cshtml>

<ejs-grid id="CalGrid" created="calGridCreated" frozenColumns="3" gridLines="Both" rowHeight="30" height="500px" allowTextWrap="true"
              cellEdit="calCellEdit" toolbar="@(new List<string>() { "Update","Cancel" })">
        <e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings>
        <e-grid-editSettings allowEditing="true" mode="Batch"></e-grid-editSettings>
        <e-grid-aggregates>
            <e-grid-aggregate>
                <e-aggregate-columns>
                    <e-aggregate-column field="SHOWER" type="Text" footerTemplate="TOTAL"></e-aggregate-column>
                    <e-aggregate-column field="TOTAL_FU" type="Sum" format="N1" footerTemplate="${Sum}"></e-aggregate-column>
                </e-aggregate-columns>
            </e-grid-aggregate>
        </e-grid-aggregates>
        <e-grid-columns>
            <e-grid-column field="BLDG_SNO" visible="false"></e-grid-column>
            <e-grid-column field="BLDG_NO"  headerText="BUILDING NO." width="100" defaultValue="@empty" headerTextAlign="Center" textAlign="Center"></e-grid-column>
            <e-grid-column field="BLDG_NM"  headerText="BUILDING Name" width="140" defaultValue="@empty" headerTextAlign="Center" textAlign="Left" validationRules="@new { required=true }"></e-grid-column>


            <e-grid-column field="VALV_WC" headerText="WATER CLOSET (FLUSH VALVE)" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="TANK_WC" headerText="WATER CLOSET (FLUSH TANK)" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="FHPS" headerText="FAUCET/ HOSS BIBB/ PERENNIAL SPRAY" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="URINAL" headerText="URINAL" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="LAVATORY" headerText="LAVATORY" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="SERVICE_SK" headerText="SERVICE SINK" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="ABLUTION_TAP" headerText="ABLUTION TAP" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="KITCHEN_SK" headerText="KITCHEN SINK" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="DK_FOUNTAIN" headerText="DRINKING FOUNTAIN" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="HUMIDIFIER" headerText="HUMIDIFIER" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="E_WASHER" headerText="EYE WASHER" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="E_WS" headerText="EYE WASH & SHOWER" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>
            <e-grid-column field="SHOWER" headerText="SHOWER" width="90" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { required=true } "> </e-grid-column>


            <e-grid-column field="TOTAL_FU" headerText="TOTAL F.U" width="120" type="number" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" validationRules="new { number = true, required=true } "></e-grid-column>
            <e-grid-column field="PEAK_FLRT_GPM" headerText="PEAK FLOW RATE(GPM)" width="120" defaultValue="@empty" headerTextAlign="Center" textAlign="Right"></e-grid-column>
            <e-grid-column field="PEAK_FLRT_LPM" headerText="PEAK FLOW RATE(LPM)" width="120" defaultValue="@empty" headerTextAlign="Center" textAlign="Right"></e-grid-column>
            <e-grid-column field="P_SIZE" headerText="PIPE SIZE (INCH)" width="120" defaultValue="@empty" headerTextAlign="Center" textAlign="Right"></e-grid-column>
            <e-grid-column field="NO_OF_OCC" headerText="NUMBER OF OCCUPANCY" width="120" defaultValue="@empty" headerTextAlign="Center" textAlign="Right"></e-grid-column>
            <e-grid-column field="SUPPLY_WATER" headerText="SUPPLY WATER [GALLON/DAY/PERSON]" width="120" defaultValue="@empty" headerTextAlign="Center" textAlign="Right" edit="@(new { create = "create", read = "read", destroy = "destroy", write = "write" })"></e-grid-column>
            <e-grid-column field="GALLON" headerText="PERSON [GALLON/DAY]" width="120" defaultValue="@empty" headerTextAlign="Center" textAlign="Right"></e-grid-column>
            <e-grid-column field="LITER" headerText="PERSON [LITER/DAY]" width="120" defaultValue="@empty" headerTextAlign="Center" textAlign="Right"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>

--<script>

<script>


    //Grid Create
    function calGridCreated() {


        //Grid Create
        var DataGrid = document.getElementById("CalGrid").ej2_instances[0];




        DataGrid.dataSource = new ej.data.DataManager({
            url: "/IDI/HCCOVERURL?JobNo=" + JobNo + "&RevNo=" + RevNo + "&sState=S1",
            crudUrl: "/IDI/HCCOVERCRUD?sState=U1",
            adaptor: new ej.data.UrlAdaptor()
        });
    }


    //cellEdit
    function calCellEdit(args) {


        if (args.columnName != "SUPPLY_WATER") {
            args.cancel = true;
        }
    }


    //Dropdown List
    var elem;
    var dObj;
    function create(args) {
        elem = document.createElement('input');
        return elem;
    }


    function write(args) {


        var value = args.rowData.SUPPLY_WATER;


        dObj = new ej.dropdowns.DropDownList({
            dataSource: ['25', '35'],
            value: value
        });
        dObj.appendTo(elem);
    }


    function destroy() {
        dObj.destroy();
    }


    function read(args) {
        return dObj.value;
    }


</script>

[TaeWook Kang]

1)          Please confirm while saving the Supply water column you are performing any custom action or not. 

  - no, not use any action

2)          Please share your exact requirement scenario with detailed description. 

 - The aggregates is just one column but moifing the another column causes problem.

i don't want any problems.

3)          Share your syncfusion package version. 

- shows as below.

4)          If possible, Share the simple issue reproducible sample or try to reproduce the issue in the above attached sample.

 - please see the answer above.

[Rajapandi Ravi]

Hi TaeWook, 

Thanks for the update 

We have checked your shared information and based on your query we have prepared a sample which was same as your application scenario and tried to reproduce your reported problem at our end, but it was unsuccessful. Please refer the below code example, sample and video demo for more information. 

<ejs-grid id="Grid" created="calGridCreated" frozenColumns="2" gridLines="Both" rowHeight="30" allowTextWrap="true" cellEdit="calCellEdit" height="300" allowPaging="true" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" })"> 

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

    <e-grid-selectionsettings type="Multiple"></e-grid-selectionsettings> 

    <e-grid-textwrapsettings wrapMode="Header"></e-grid-textwrapsettings> 

    <e-grid-aggregates> 

        <e-grid-aggregate> 

            <e-aggregate-columns> 

                <e-aggregate-column field="EmployeeID" type="Sum" footerTemplate="Sum:${Sum}"></e-aggregate-column> 

            </e-aggregate-columns> 

        </e-grid-aggregate> 

    </e-grid-aggregates> 

    <e-grid-columns> 

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

        <e-grid-column field="EmployeeID" headerText="Employee ID" width="150"></e-grid-column> 

        <e-grid-column field="Freight" edit="@(new { create = "create", read = "read", destroy = "destroy", write = "write" })" headerText="Freight" TextAlign="Right" width="160"></e-grid-column> 

        <e-grid-column field="ShipCity" headerText="ShipCity" width="150"> 

        </e-grid-column> 

    </e-grid-columns> 

 

</ejs-grid> 

 

<script> 

    //Grid Create 

    function calGridCreated() { 

        //Grid Create 

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

        DataGrid.dataSource = new ej.data.DataManager({ 

            url: "/home/UrlDatasource", 

            batchUrl: "/Home/BatchUpdate", 

            adaptor: new ej.data.UrlAdaptor() 

        }); 

    } 

 

    function calCellEdit(args) { 

        if (args.columnName != "Freight") { 

            args.cancel = true; 

        } 

    } 

    //Dropdown List 

    var elem; 

    var dObj; 

    function create(args) { 

        elem = document.createElement('input'); 

        return elem; 

    } 

 

    function write(args) { 

        var value = args.rowData.Freight; 

        dObj = new ej.dropdowns.DropDownList({ 

            dataSource: ['25', '35'], 

            value: value 

        }); 

        dObj.appendTo(elem); 

    } 

 

    function destroy() { 

        dObj.destroy(); 

    } 

 

    function read(args) { 

        return dObj.value; 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/forum/172024/ze/172024-1551214434.zip 

Video demo: https://www.syncfusion.com/downloads/support/forum/172024/ze/videodemo-616521410.zip 

If you still face the issue, please share the below details that will be helpful for us to provide better solution. 

1)          Please share your issue replication procedure step by step. 

2)          Please share your server-side code, we would like to check how you are binding the UrlAdaptor datasource and BatchUpdate method. 

3)          If possible, Share your issue reproducible sample or try to reproduce the issue in the above attached sample. 

Regards, 

Rajapandi R 

[TaeWook Kang]

Thanks for your reply.

i have been trying to solve it many times.

so, based on your answer, i found the problem.

you can see the code as below.

<e-grid-aggregates>
<e-grid-aggregate>
<e-aggregate-columns>
<e-aggregate-columnfield="SHOWER"type="Text"footerTemplate="TOTAL"></e-aggregate-column>
<e-aggregate-columnfield="TOTAL_FU"type="Sum"format="N1"footerTemplate="${Sum}"></e-aggregate-column>
</e-aggregate-columns>
</e-grid-aggregate>
</e-grid-aggregates>

I want to just show Text "TOTAL".

I would like to ask if this part can be applied.

( I am attaching a picture below for reference. )

[Rajapandi Ravi]

Hi TaeWook, 

We have analyzed your shared information and we could see that you are setting type as text and footerTemplate as Total. If we maintain the same in our sample for Freight column, we are also able to reproduce your mentioned problem at our end. 

From validating your shared information, we could see that you like to maintain the Text as “Total” beside the aggregate value of “Total_FU” column. Based on your requirement we have prepared a sample and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information. 

<e-grid-aggregates> 

        <e-grid-aggregate> 

            <e-aggregate-columns> 

                <e-aggregate-column field="EmployeeID" type="Sum" footerTemplate="Total:${Sum}"></e-aggregate-column> 

            </e-aggregate-columns> 

        </e-grid-aggregate> 

    </e-grid-aggregates> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/172024-851608747.zip 

Screenshot: 

 

Regards, 

Rajapandi R