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:
- Listening for the on remove event
- event prevent default
- launch a dialog to capture extra data
- user confirm or not
- if user confirm we delete
- 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