Prevent Grid row disappearing on remove

2 posts, 0 answers
  1. Yannick
    Yannick avatar
    8 posts
    Member since:
    May 2015

    Posted 05 Jun 2020 Link to this post

    Hi,

    I would like to get Telerik feedback on the best way to override the delete grid function.

    We are using a grid with inline editing but on the delete we need to capture extra data.

    We are are doing right now:

    1. Listening for the on remove event
    2. event prevent default
    3. launch a dialog to capture extra data
    4. user confirm or not
    5. if user confirm we delete
    6. if user cancel we cancel

    Everything is working good but I would like to get recommandation on how to prevent the row to disapear from the frontend ONLY WHEN the user confirm.

     

    Right now as soon the delete command is clicked and we reach the on remove the row is already removed from the frontend.

     

    here is code samples we have

    the grid with the onremove

     

    <kendo-grid name="plancodegroupgrid" height="600" navigatable="true" selectable="" on-data-bound="dataBound" on-remove="onremove">
        <datasource type="DataSourceTagHelperType.Ajax" server-filtering="true" server-paging="true" page-size="100" on-request-end="onrequestend">
            <transport>
                <read url="planCodeGroup/PlanCodeGroup_Read" />
                <update url="planCodeGroup/PlanCodeGroup_Update" />
            </transport>
            <schema>
                <model id="PlanCodeGroupID">
                    <fields>
                        <field name="PlanCode" editable="false"></field>
                        <field name="RateScaleCode" editable="false"></field>
                        <field name="PolicyTypeCode" editable="false"></field>
                        <field name="RiskIntegrityGroupPrefixCode"></field>
                        <field name="SystemName" editable="false"></field>
                        <field name="StartDate" editable="false" type="date"></field>
                        <field name="EndDate" type="date"></field>
                    </fields>
                </model>
            </schema>
        </datasource>
        <messages>
            <commands edit=" " update=" " canceledit=" " destroy=" " create=" "/>
        </messages>
        <sortable enabled="true" mode="multiple" show-indexes="true" />
        <filterable enabled="true" mode="row" />
        <editable mode="inline" confirmation="false" />
        <columns>
            <column field="PlanCode" title="@localizer["PlanCode"].Value">
                <filterable>
                    <cell show-operators="false"></cell>
                </filterable>
            </column>
            <column width="150" field="RateScaleCode" title="@localizer["RateScale"].Value">
                <filterable>
                    <cell show-operators="false"></cell>
                </filterable>
            </column>
            <column width="150" field="PolicyTypeCode" title="@localizer["PolicyType"].Value">
                <filterable>
                    <cell show-operators="false"></cell>
                </filterable>
            </column>
            <column width="150" field="SystemName" title="@localizer["System"].Value">
                <filterable>
                    <cell show-operators="false"></cell>
                </filterable>
            </column>
            <column field="RiskIntegrityGroupPrefixCode" editor="riskIntegrityGroupPrefixCodeEditor" title="@localizer["GroupPrefix"].Value">
                <filterable>
                    <cell show-operators="false"></cell>
                </filterable>
            </column>
            <column field="StartDate" title="@localizer["Start Date"].Value" format="{0:MM/dd/yyyy}">
                <filterable>
                    <cell show-operators="false"></cell>
                </filterable>
            </column>
            <column field="EndDate" title="@localizer["EndDate"].Value" format="{0:MM/dd/yyyy}">
                <filterable>
                    <cell show-operators="false"></cell>
                </filterable>
            </column>
            <column width="100">
                <commands>
                    <column-command name="edit"></column-command>
                    <column-command name="destroy"></column-command>
                </commands>
            </column>
        </columns>
        <scrollable height="auto" virtual="true" enabled="true" />
    </kendo-grid>

     

     

    The onremove js  stopping the event and launching how dialog

    function onremove(e) {
        e.preventDefault();
        $('#reason').val('');
        $('#dialog').data('kendoDialog').open();
        model = $('#plancodegroupgrid')
            .data('kendoGrid')
            .dataSource.get(e.model.PlanCodeGroupID);
    };

     

    if user cancel that s what we have (the row is re showing) 

    function cancelDeletePlanGroup(e) {
        if (!confirmed) {
            $("#plancodegroupgrid").data("kendoGrid").cancelChanges();
        } else {
            confirmed = false;
        }
    }

     

    I tried the setup an onclick event on the delete command

    But somehow the function is never called

    <column width="100">
        <commands>
            <column-command name="edit"></column-command>
            <column-command name="destroy" click="onremove"></column-command>
        </commands>
    </column>

    The grid is capable of because when i setup the built in confirmation dialog on the row is staying in the UI until a choice is made.

    other option would be to build my own delete button but I want to ask you guys before moving forward.

    Let me know what is your recommended to proceed with all that logic being the exact same but without row getting away while user is making his choice.

     

    Cheers

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    1236 posts

    Posted 10 Jun 2020 Link to this post

    Hi Yannick,

    I would suggest you follow one of the approaches that you have suggested in your initial post. That would be to define your own custom Delete button:

    <commands>
        <column-command name="customDelete" click="onClick"/>
    </commands>

    With that button, the item will be kept in the UI until the user confirms the action. Upon that, you could call the dataSource.remove(model) and dataSource.sync() to submit the changes.

    Regards,
    Veselin Tsvetanov
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top