i have RadTabStrip, with General and other tabs. there are input fields and save button on the general tab.
the purpose of the code bellow is to enable the general save button only when the user changed a value on general tab and don't allow him to continue to another tab if there is unsaved data.
the accomplish it:
1) $('#MainContent_RadPageViewGeneral :input').change(...
using this event I identify changes in any input and enable the save button
2) OnClientTabSelecting
using this event i identify when the user try to move to another tab, and block him in case he
didn't perform save (if the save button is enabled)
it's working beside in one case when the user enter the general tab, perform first change in a field and
then press on another tab without moving to another field inside this tab. in this case, change event isn't called, so the save
button didn't become enable and the user is allowed to move to another tab, even tough the field was modified.
how can i catch this event of modification on first time and pressing on another tab?
piece of code (.aspx):
the purpose of the code bellow is to enable the general save button only when the user changed a value on general tab and don't allow him to continue to another tab if there is unsaved data.
the accomplish it:
1) $('#MainContent_RadPageViewGeneral :input').change(...
using this event I identify changes in any input and enable the save button
2) OnClientTabSelecting
using this event i identify when the user try to move to another tab, and block him in case he
didn't perform save (if the save button is enabled)
it's working beside in one case when the user enter the general tab, perform first change in a field and
then press on another tab without moving to another field inside this tab. in this case, change event isn't called, so the save
button didn't become enable and the user is allowed to move to another tab, even tough the field was modified.
how can i catch this event of modification on first time and pressing on another tab?
piece of code (.aspx):
<telerik:RadTabStrip ID=
"RadTabStripEditClaim"
runat=
"server"
MultiPageID=
"RadMultiPageEditClaim"
SelectedIndex=
"0"
OnClientTabSelecting=
"OnClientTabSelecting"
>
<Tabs>
<telerik:RadTab Text=
"General"
Enabled=
"true"
Value=
"General"
></telerik:RadTab>
<telerik:RadTab Text=
"Files"
Enabled=
"true"
Value=
"Files"
></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID=
"RadMultiPageEditClaim"
runat=
"server"
SelectedIndex=
"0"
>
<telerik:RadPageView ID=
"RadPageViewGeneral"
runat=
"server"
>
<fieldset>
</fieldset>
</telerik:RadPageView>
....
</telerik:RadMultiPage>
<telerik:RadCodeBlock ID=
"RadCodeBlock1"
runat=
"server"
>
<script src=
"http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"
></script> <%--load jquery library--%>
<script type=
"text/javascript"
>
$(document).ready(function () {
//disable button <Save and Continue Update>
$(
"#MainContent_ButtonSubmit"
).attr(
'disabled'
,
'disabled'
);
$(
"#MainContent_ButtonSubmit"
).css({
"cursor"
:
"default"
,
//"box-shadow": "none"
});
//in case the user perform changes in General tab
$(
'#MainContent_RadPageViewGeneral :input'
).change(function () {
//disable button <Save and Continue Update>
$(
"#MainContent_ButtonSubmit"
).removeAttr(
'disabled'
);
$(
"#MainContent_ButtonSubmit"
).css({
"cursor"
:
"pointer"
,
// "box-shadow": "1px 0px 6px #333"
});
});
});
//client-side event occurs when the user selects a tab, before the tab is selected.
function OnClientTabSelecting(sender, eventArgs) {
var pageView = multiPage.get_selectedPageView();
if
(pageView.get_id() ==
'MainContent_RadPageViewGeneral'
)
{
//we are exiting General tab
//check status of save button, if not disabled then we need to save
var disabledValue = $(
"#MainContent_ButtonSubmit"
).attr(
'disabled'
);
if
(disabledValue !=
'disabled'
)
{
alert(
'You cannot continue without performing save'
);
eventArgs.set_cancel(
true
);
//stop the selection
return
;
}
}
eventArgs.set_cancel(
false
);
}
</script>
</telerik:RadCodeBlock>