How to delete specific row from grid

[Samuel Otero]

Hello

I am completely new to SyncFusion so bear with me if by any chance this is a newbie question.

I am planing to use the Grid control for ASP.NET MVC. I have a couple of questions about how I can achieve specific behaviors. First, I want my Grid to look something like this:

In that example, I can delete and edit specific rows. Searching around your forum and Google, I only found a way to delete the last row of the grid and not an specific row. Moreover, that example is what would be an acceptable work for the project, but what I really want to achieve is to add, edit and delete the rows, working within those rows, instead of having separated labels and textboxes to enter and edit the data.So my questions are as follows:

1. How I can achieve the behavior of the picture?

2. How can I achieve that behavior but working within the grid? 

I will have dropdowns and textboxes inside that grid. Can I edit and delete rows within the grid???

A little bit of help will be appreciated.

Thank you!

- Sam

[Venkatesh Ayothi Raman]

Hi Sam, 

Thanks for contacting Syncfusion support. 

Query #1:”  How I can achieve the behavior of the picture:” 

We have achieved your requirement using column template feature of Grid. In this feature, we can have rendered the edit and delete icons in separate columns which is replicates in your screenshot and defined the click events for both icons like as follows, 

@Grid 

 

@(Html.EJ().Grid<EmployeeView>("CustomGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource1) 

        .AllowPaging() 

        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.ExternalFormTemplate).ExternalFormTemplateID("#template"); }) 

        .ClientSideEvents(e=>e.ActionComplete("complete")) 

        .Columns(col => 

        { 

        col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add(); 

 

        col.HeaderText("Edit").Template("<input type='image' src ='../Content/icons/edit2.png' onclick='edit()' alt='Submit' width='48' height='48'>").Width(90).Add(); 

        col.HeaderText("Delete").Template("<input type='image' src ='../Content/icons/delete.png' onclick='del()' alt='Submit' width='30' height='30'>").Width(80).Add(); 

 

    }) 

    ) 

Output: 

 

Refer to the Help documentation for more information, 

https://help.syncfusion.com/aspnetmvc/grid/columns#column-template 

Query #2:” How can I achieve that behavior but working within the grid?” 

 

We have built-in support of ExternalEditForm template feature to render the customize External edit form in Grid while editing. Please refer to the following code example, 

@Grid 

 

@(Html.EJ().Grid<EmployeeView>("CustomGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource1) 

        .AllowPaging() 

        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.ExternalFormTemplate).ExternalFormTemplateID("#template"); }) 

        .ClientSideEvents(e=>e.ActionComplete("complete")) 

        .Columns(col => 

        { 

        col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(100).Add(); 

 

        col.HeaderText("Edit").Template("<input type='image' src ='../Content/icons/edit2.png' onclick='edit()' alt='Submit' width='48' height='48'>").Width(90).Add(); 

        col.HeaderText("Delete").Template("<input type='image' src ='../Content/icons/delete.png' onclick='del()' alt='Submit' width='30' height='30'>").Width(80).Add(); 

 

    }) 

    ) 

 

@External template form 

<script id="template" type="text/template"> 

    <b>Order Details</b> 

    <table cellspacing="10"> 

        <tr> 

            <td style="text-align: right;"> 

                EmployeeID 

            </td> 

            <td style="text-align: left"> 

                <input id="EmployeeID" name="EmployeeID" value="{{: EmployeeID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" 

                       style="text-align: right; width: 116px; height: 28px" /> 

            </td> 

            <td style="text-align: right;"> 

                FirstName 

            </td> 

            <td style="text-align: left"> 

                <input id="FirstName" name="FirstName" value="{{: FirstName}}" class="e-field e-ejinputtext valid" 

                       style="width: 116px; height: 28px" /> 

            </td> 

        </tr> 

        <tr> 

            <td style="text-align: right;"> 

                LastName 

            </td> 

            <td style="text-align: left"> 

                <input type="text" id="LastName" name="LastName" value="{{:LastName}}" /> 

            </td> 

            <td style="text-align: right;"> 

              Country 

            </td> 

            <td style="text-align: left"> 

                <select id="Country" name="Country"> 

                    <option value="USA">USA</option> 

                    <option value="UK">UK</option>                     

                    <option value="Ireland">Ireland</option> 

                    <option value="Italy">Italy</option> 

                    <option value="Mexico">Mexico</option> 

                    <option value="Norway">Norway</option> 

                    <option value="Poland">Poland</option> 

                    <option value="Portugal">Portugal</option> 

                    <option value="Spain">Spain</option> 

                  > 

                </select> 

            </td> 

        </tr> 

        <tr> 

            <td style="text-align: right;"> 

                Hire Date 

            </td> 

            <td style="text-align: left"> 

                <input id="HireDate" name="HireDate" value="{{: HireDate}}" class="e-field e-ejinputtext valid" 

                       style="width: 116px; height: 28px" /> 

            </td> 

             

        </tr> 

         

    </table> 

</script> 

 And we can perform the Grid edit and delete action while clicking the icons like as follows, 

 

       function edit() { 

            var gridInstance = $("#CustomGrid").ejGrid("instance"); 

            gridInstance.startEdit(); //Start the edit action by calling the starEdit API 

        } 

 

        function del() { 

            var gridInstance = $("#CustomGrid").ejGrid("instance"); 

            //here we can pass the Primary key field name and record to deleteRecord for deleting the record  

            gridInstance.deleteRecord("EmployeeID", gridInstance.getSelectedRecords()[0]) 

        } 

  

Please refer to the Help documentation for more information, 

  StartEdit: https://help.syncfusion.com/api/js/ejgrid#methods:startedit 

  DeleteRecord: https://help.syncfusion.com/api/js/ejgrid#methods:deleterecord 

 SelectedRecord: https://help.syncfusion.com/api/js/ejgrid#methods:getselectedrecords 

Screenshot of Editing: 

 

In above screenshot, you can see datePicker and Dropdown list controls in External Edit form. If we using any Editform template then we should rendered the other controls in ActionComplete event. Please refer to the following code example and Help documentation for more information, 

@(Html.EJ().Grid<EmployeeView>("CustomGrid") 

        .Datasource((IEnumerable<object>)ViewBag.datasource1) 

        .AllowPaging() 

        .EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.ExternalFormTemplate).ExternalFormTemplateID("#template"); }) 

        .ClientSideEvents(e=>e.ActionComplete("complete")) 

        .Columns(col => 

        { 

        .  .  . 

 

    }) 

    ) 

 

@Complete event 

 

function complete(args) { 

            if ((args.requestType == "beginedit" || args.requestType == "add") && args.model.editSettings.editMode == "externalformtemplate") { 

                $("#HireDate").ejDatePicker({ value: ($("#HireDate").val()), width: "116px", height: "28px",  }); //render the date picker control 

                $("#Country").ejDropDownList({ width: '116px' }); //render the Dropdown list control 

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

                     

                    $("#Country").ejDropDownList("setSelectedValue", args.row.children().eq(4).text()); //set the Drodpown value for corresponding edited record 

                } 

                $(".e-field").css({ 'width': '116px', 'text-align': 'left' }); 

            } 

        } 

Help documentation: https://help.syncfusion.com/aspnetmvc/grid/editing#edit-modes 

Online Demo: http://mvc.syncfusion.com/demos/web/grid/externalformediting 

We have also prepared a sample based on your convenience which can be download from following link, 

Sample:http://www.syncfusion.com/downloads/support/directtrac/general/ze/BaseMVCSample_(2)735323230 

Regards, 

Venkatesh Ayothiraman. 

[Samuel Otero]

I am amazed by your step by step answer. Thank you so much. I will try it and if I have any tricky problems I will be back here bothering you guys again.

Thank you

[Venkatesh Ayothi Raman]

Hi Sam, 

Thanks for the feedback. 

Yes, you will let you know if you have any concern on this.  

Regards, 

Venkatesh Ayothiraman.