How to delete specific row from grid
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
SIGN IN To post a reply.
3 Replies
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' });
}
} |
Help documentation: https://help.syncfusion.com/aspnetmvc/grid/editing#edit-modes
We have also prepared a sample based on your convenience which can be download from following link,
Regards,
Venkatesh Ayothiraman.
SIGN IN To post a reply.
