Applying Kendo button K-state-disabled class removing functionality of button - button

Question

if(data[keyvar]==false)
{
jQuery('#BtnsaveAjax').prop("disabled", false).removeClass("k-state-disabled");
}
After I execute this statement the function which is present on the save button is not getting called. Do I need to add or remove any more classes to get that function back?

Answer 1

I want to try to answer your question but first what i grasp from your question is
i have a grid.. and to edit it i have a popup window.. on which there
are two buttons.. edit and save.. i have two view modes.. edit and
view.. in edit mode the save button is disabled and in view mode save
button is disabled..
so now when i click "the button" here i think refers to edit button then i want my save button to enable. So far this is what i've got,
first when you click view details you will see save button disabled
while edit button enabled,
then when you click edit button the save button will be enabled
DEMO

Answer 2

This is what my popup looks like.. so now when i click my edit button i want the save button to get enabled.. so buy adding that k-State-disabled i could manage that.. but now when i click my save button.. the click function i have added on save is not firing..
this is my code for that popup page .. and the Editable is a dictionary which contains the disabled value for ta particular kendo widget.
#using Kendo.Mvc.UI;
#using Newtonsoft.Json;
#using SampleUIApp.Areas.AreaOne.Models;
#using SampleUIApp.Common;
#model SampleUIApp.Areas.AreaOne.Models.MemberModel
<script type="text/javascript">
$(document).ready(function ()
{
// For setting control mode
// It is observed that Kendo Multiselect does not accept value through below code
// change mode of multiselect like done below in the same view
var Edit = #(Html.Raw(JsonConvert.SerializeObject((Dictionary<string, bool>)ViewBag.Editable)));
for ( keyVar in Edit )
{
if (keyVar.search("Btn") != -1) {
jQuery('#' + keyVar).attr("disabled", Edit[keyVar]);
} else {
jQuery('#' + keyVar).prop("readonly", Edit[keyVar]);
}
}
var viewMode = #Html.Raw(Json.Encode(ViewBag.ViewMode));
if(viewMode == 'ADD')
{
$("#LoanGrid1").remove();
}
var title = viewMode + ' MEMBER';
setTitle(title);
});
function setViewMode(data) {
//for ( keyVar in data ) {
// if (keyVar.search("Btn") != -1) {
// jQuery('#' + keyVar).attr("disabled", data[keyVar]);
// }
// else {
// jQuery('#' + keyVar).prop("readonly", data[keyVar]);
// }
for ( keyVar in data ) {
if (keyVar.search("Btn") != -1) {
if(data[keyVar]==true){
jQuery('#' + keyVar).prop("disabled", true).addClass("k-state-disabled");
}
else{
jQuery('#' + keyVar).prop("disabled", false).removeClass("k-state-disabled");
}
}
else {
jQuery('#' + keyVar).prop("readonly", data[keyVar]);
}
}
}
function onAdditionalData() {
return {
text: $("#CityName").val()
};
}
function AccessModelDetails() {
var data = #Html.Raw(Json.Encode(this.Model));
alert(data.Remark);
}
function UpdateModelDetails() {
// var model = $('form').serialize();
// var data = Sys.Serialization.JavaScriptSerializer.deserialize(model);
// alert('model: ' + data.Remark);
$("#Remark").val("Remark Updated");
}
function saveDetails() {
alert('Calling : saveDetails');
var model = $("form").serialize();
Save(model); // Save Function is Written On Parent View
}
function Edit() {
var mode = 2; // 2 For Edit
var Fid = 0;
var viewName = 'MemberEditor';
var actionURL = '#Url.Action("setViewMode", "Member")';
$.ajax({
type: "POST",
data: {
Mode: mode,
lFeatureId: Fid,
ViewName: viewName
},
url: actionURL,
success: function (result) {
setViewMode(result);
}
});
}
// This Function will be called when an item is got selected from Multiselect Control
// Used for Member role
// here is a sample methos to get the selected item.
function OnSelectMemberRole(e) {
var dataItem = this.dataSource.view()[e.item.index()];
alert("event :: select (" + dataItem.MemberRoleName + " : " + dataItem.MemberRoleId + ")");
}
</script>
#using (Html.BeginForm())
{
<div class="editor">
<div id="DIV_Line07" class="line">
<div id="DIV_Buttons" class="col100" style="float: right">
#*
1.Below is the kendo button to call server side controller action by using MultiButton Attribute
2. Have to Set HtmlAttributes as follows
* name = Given Name With MutiButton Attribute
* type = "submit",
* value = Given Name With MutiButton Attribute
3. .Name(Given Name With MutiButton Attribute)
4. .Content("Caption Of Button")
*#
#(Html.Kendo().Button()
.Name("BtnEditAjax")
.Content("Edit - AJAX")
.HtmlAttributes(new { style = "float:right", type = "button" })
.Events(ev => ev.Click("Edit"))
)
#* #(Html.Kendo().Button()
.Name("Btnsave")
.HtmlAttributes(new { style = "float:right", name = "Btnsave", type = "submit", value = "save" })
.Content("Save - Server")
)*#
#*
1.Below is the kendo button to call server side controller action by using Javascript Function With Ajax
2. Have to Set HtmlAttributes as follows
* type = "button",
3. .Name(Name Of The Button)
4. .Content("Caption Of Button")
5. Events(ev => ev.Click("Javascript Function Name"))
*#
#(Html.Kendo().Button()
.Name("BtnsaveAjax")
.Content("Save - AJAX")
.HtmlAttributes(new { style = "float:right", type = "button" })
)
#(Html.Kendo().Button()
.Name("AccessModelinJS")
.Content("Access Model In JS")
.HtmlAttributes(new { style = "float:right", type = "button" })
.Events(ev => ev.Click("AccessModelDetails"))
)
#(Html.Kendo().Button()
.Name("UpdateModelinJS")
.Content("Update Model In JS")
.HtmlAttributes(new { style = "float:right", type = "button" })
.Events(ev => ev.Click("UpdateModelDetails"))
)
</div>
</div>
<div id="DIV_Line00" class="line">
<div id="DIV_Fname" class="col33">
#Html.HiddenFor(model => model.MemberId)
<label>
First Name - Upper Case
</label>
#*To make textbox uppercase set style's "text-transform" Attribute's value as "uppercase" in html HtmlAttributes*#
#(Html.Kendo().TextBoxFor(m => m.FirstName)
.Name("FirstName")
.HtmlAttributes(new { #class = "width100", style = " text-transform: uppercase" })
)
</div>
<div id="DIV_MName" class="col33">
<label>
Middle Name - Lower Case
</label>
#*To make textbox lowercase set style's "text-transform" Attribute's value as "lowercase" in html HtmlAttributes*#
#Html.Kendo().TextBoxFor(m => m.MiddleName).Name("MiddleName").HtmlAttributes(new { #class = "width100", style = " text-transform: lowercase" })
</div>
<div id="DIV_LName" class="col33">
<label>
Last Name - Alphabets Only
</label>
#*To make textbox AlphaOnly set pattern Attribute's value as "[A-Za-z\\s]*" in html HtmlAttributes*#
#Html.TextBoxFor(m => m.LastName, new { id = "LastName", #class = "width100 k-textbox", type = "text", pattern = "[A-Za-z\\s]*" })
</div>
</div>
<div id="DIV_Line01" class="line">
<div id="DIV_Height" class="col15">
<label>
DOB - Min & Max
</label>
#Html.ValidationMessageFor(model => model.DateOfBirth)
#(Html.Kendo().DatePickerFor(m => m.DateOfBirth)
.Min(new DateTime(1970, 01, 01))
.Max(new DateTime(2014, 11, 30))
.HtmlAttributes(new { #class = "width100" })
.Format("dd/MM/yyyy")
)
</div>
<div id="DIV_Membe rName" class="col18">
<label>
Age - Integer
</label>
#Html.ValidationMessageFor(model => model.Age)
#Html.Kendo().IntegerTextBoxFor(m => m.Age).HtmlAttributes(new { #class = "width100" })
</div>
<div id="DIV_Age" class="col15">
<label>
Height-Decimal 3
</label>
#*Format as "#.000" specifies that 3 decimals will be displayed, Number of 0s in the format Specifies number of decimals*#
#Html.ValidationMessageFor(model => model.Height)
#Html.Kendo().NumericTextBoxFor(m => m.Height).HtmlAttributes(new { #class = "width100" }).Format("#.000")
</div>
<div id="DIV_Country" class="col18">
<label>
StateAutoComplete
</label>
#* 1.Name Of the autocomplete must be ur property name of the model so that it could bind selected value to model .
2.List for autocomplete will only contains value and does not support Id Value pair pattern(In Used Version of kendo).
*#
#(Html.Kendo().AutoCompleteFor(m => m.StateName)
.Name("StateName")
.DataTextField("StateName")
.BindTo((System.Collections.IEnumerable)ViewData["states"]).HtmlAttributes(new { #class = "width100" })
)
</div>
<div id="DIV_CityServer" class="col33">
<label>
City-AutoComplete Server Filtering
</label>
#* 1.Name Of the autocomplete must be ur property name of the model so that it could bind selected value to model .
2.List for autocomplete will only contains value and does not support Id Value pair pattern(In Used Version of kendo).
*#
#(Html.Kendo().AutoCompleteFor(m => m.CityName)
.Name("CityName")
.DataTextField("CityName")
.MinLength(3)
//.BindTo((System.Collections.IEnumerable)ViewData["cities"]).HtmlAttributes(new { #class = "width100" })
.DataSource(
source =>
{
source.Read(read => { read.Action("GetCities", "Member").Data("onAdditionalData"); });
source.ServerFiltering(true);
})
.HtmlAttributes(new { #class = "width100" })
)
</div>
</div>
<div id="DIV_Line02" class="line">
<div id="DIV_DateOfBirth" class="col33">
<label>
Member Type - DropDownList
</label>
#*
0.List can be bind to DropDownListFor using "BindTo" or using "DataSource".
1.Name Of the DropDownListFor must be ur property name of the model so that it could bind selected value to model .
2.List for DropDownListFor will contains Id Value pair .
3.Selected Value will be Value of DataValueField - ".DataValueField("MemberTypeId")"
4.Selected Value will bind to model property given as name to DropDownListFor
*#
#(Html.Kendo().DropDownListFor(m => m.MemberType)
.Name("MemberType")
.DataTextField("MemberTypeName")
.DataValueField("MemberTypeId")
.HtmlAttributes(new { #class = "width100" })
.Filter("contains")
.BindTo((System.Collections.IEnumerable)ViewData["memberTypes"])
//.DataSource(
// source =>
// {
// source.Read(read => { read.Action("GetMemberTypes", "Member"); });
// })
)
</div>
<div id="DIV_MemberRole" class="col33">
<label>
Member Role - MultiSelect
</label>
#*
0.List can be bind to MultiSelectFor using "BindTo" or using "DataSource".
2.List for MultiSelectFor will contains Id Value pair .
1.Name Of the MultiSelectFor must be ur property name of the model so that it could bind selected values to model.
2.Type of property Specified in Name of MultiSelectFor has to be a collection type for example List<long> or List<string>.
3.Selected Values will be Values of DataValueField - ".DataValueField("MemberRoleId")"
4.Selected Values will bind to model property given as name to MultiSelectFor
*#
#(Html.Kendo().MultiSelectFor(m => m)
.Name("MemberRoleList")
.DataTextField("MemberRoleName")
.DataValueField("MemberRoleId")
.BindTo((System.Collections.IEnumerable)ViewData["memberRoles"])
.Events(e => e.Select("OnSelectMemberRole"))
//.DataSource(
// source =>
// {
// source.Read(read => { read.Action("GetMemberRoles", "Member"); });
// })
)
</div>
<div id="DIV_Mobile" class="col33">
<label>
Mobile - Mobile Mask
</label>
#*
1. Specifying Mask As "0000000000" allows to enter only 10 Digits.
*#
#Html.ValidationMessageFor(model => model.Mobile)
#(Html.Kendo().MaskedTextBoxFor(m => m.Mobile)
.Mask("0000000000")
.HtmlAttributes(new { #class = "width100" })
)
</div>
</div>
<div id="DIV_Line03" class="line">
<div id="DIV_Email" class="col33">
<label>
Email - With Validation
</label>
#*
1. For Email Validation On UI, Use Html.TextBoxFor
2. Set Attributes as follows
* type = "email"
* #class = "k-textbox"
* style = " text-transform: lowercase"
*#
#Html.TextBoxFor(model => model.Email, new { #class = "k-textbox width100", type = "email", style = " text-transform: lowercase" })
</div>
<div id="DIV_PIN" class="col33">
<label>
PIN - Mask
</label>
#*
1. Specifying Mask As "000000" allows to enter only 6 Digits.
*#
#(Html.Kendo().MaskedTextBoxFor(m => m.PIN)
.Mask("000000")
.HtmlAttributes(new { #class = "width100" })
)
</div>
<div id="DIV_Phone" class="col33">
<label>
Phone - Mask
</label>
#*
1. Specifying Mask As "[phone]" allows to enter Digits within specified mask.
*#
#(Html.Kendo().MaskedTextBoxFor(m => m.Phone)
.Mask("[phone]")
.HtmlAttributes(new { #class = "width100" })
)
</div>
<div id="DIV_Line05" class="line">
</div>
<div id="DIV_Line06" class="line">
<div id="DIV_Remark" class="col100">
<label>
Remark - Text Area
</label>
#*
To Use Text Area us helper Html.TextAreaFor
2. Set Attributes as follows
* #class = "k-textbox"
* style = " text-transform: lowercase"
* rows = as much U Want
* cols = as much U Want
*#
#Html.TextAreaFor(m => m.Remark, new { #class = "k-textbox width100", rows = "2", cols = "50" })
#Html.HiddenFor(m => m.Remark, new { id = "Remark" })
#* <textarea class="k-textbox" rows="2" cols="50" >
</textarea>*#
</div>
</div>
<div id="DIV_Phone" class="col100">
<label>
Loan Details
</label>
#(Html.Kendo().Grid<LoanModel>()
.Name("LoanGrid1")
.Columns(columns =>
{
columns.Bound(m => m.LoanNumber).Filterable(false).Title("Loan Number").Width("20%").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Bound(m => m.ROI).Filterable(false).Title("ROI").Width("10%").Format("{0:N2}").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Bound(m => m.Period).Filterable(false).Title("Period").Width("10%").Format("{0:N2}").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Bound(m => m.LoanAmount).Filterable(false).Title("Loan Amount").Width("10%").Format("{0:N2}").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Bound(m => m.OtstngAmount).Filterable(false).Title("Outstanding amount").Width("10%").Format("{0:N2}").HtmlAttributes(new { #style = "font-size:x-small" });
columns.Command(cmd => cmd.Destroy());
})
.Pageable()
.Scrollable(config => config.Enabled(false))
.Filterable(config => config.Mode(GridFilterMode.Menu))
.Sortable()
.Resizable(config => { config.Columns(true); })
.Reorderable(config => { config.Columns(true); })
.DataSource(source => source
.Ajax()
.PageSize(5)
.Model(model =>
{
model.Id(m => m.MemberId);
})
.Read(read => read.Action("FetchMemberLoanList", "Member", new { area = "AreaOne" }))
.Destroy(del => del.Action("Destroy", "Member", new { area = "AreaOne" }))
)
)
</div>
</div>
</div>
}