We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to delete specific row from grid

Thread ID:

Created:

Updated:

Platform:

Replies:

131797 Jul 27,2017 02:55 PM UTC Aug 2,2017 07:25 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Samuel Otero
Asked On July 27, 2017 02:55 PM UTC

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 [Syncfusion]
Replied On July 28, 2017 12:59 PM UTC

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, 

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, 

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' }); 
            } 
        } 


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


Regards, 
Venkatesh Ayothiraman. 


Samuel Otero
Replied On August 1, 2017 07:21 PM UTC

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 [Syncfusion]
Replied On August 2, 2017 07:25 AM UTC

Hi Sam, 

Thanks for the feedback. 

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

Regards, 
Venkatesh Ayothiraman. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;