Button 应用剑道按钮K状态禁用类删除按钮的功能
执行此语句后，不会调用save按钮上的函数。我是否需要添加或删除更多类才能恢复该函数？我想尝试回答您的问题，但首先我从您的问题中了解到的是 我有一个网格。。要编辑它，我有一个弹出窗口。。上面有 有两个按钮。。编辑并保存。。我有两种查看模式。。编辑和 看法在编辑模式下，保存按钮被禁用，在查看模式下保存 按钮被禁用 所以现在当我点击这里的“按钮”时，我想是指编辑按钮，然后我希望我的保存按钮启用。到目前为止，这就是我得到的Button 应用剑道按钮K状态禁用类删除按钮的功能,button,kendo-ui,Button,Kendo Ui,执行此语句后，不会调用save按钮上的函数。我是否需要添加或删除更多类才能恢复该函数？我想尝试回答您的问题，但首先我从您的问题中了解到的是 我有一个网格。。要编辑它，我有一个弹出窗口。。上面有 有两个按钮。。编辑并保存。。我有两种查看模式。。编辑和 看法在编辑模式下，保存按钮被禁用，在查看模式下保存 按钮被禁用 所以现在当我点击这里的“按钮”时，我想是指编辑按钮，然后我希望我的保存按钮启用。到目前为止，这就是我得到的 首先，当您单击“查看详细信息”时，您将看到“保存”按钮已禁用 启用“编辑”按
- 首先，当您单击“查看详细信息”时，您将看到“保存”按钮已禁用 启用“编辑”按钮时
- 然后，当您单击“编辑”按钮时，将启用“保存”按钮
这就是我的弹出窗口的样子。。因此，现在当我单击编辑按钮时，我希望启用保存按钮。。因此，我认为k-State-disabled我可以处理这件事。。但是现在当我点击我的保存按钮。。我在保存时添加的单击功能未启动 这是我的弹出页面代码。。可编辑的是一个字典，其中包含特定剑道小部件的禁用值
if(data[keyvar]==false)
{
jQuery('#BtnsaveAjax').prop("disabled", false).removeClass("k-state-disabled");
}
@使用Kendo.Mvc.UI；
@使用Newtonsoft.Json；
@使用SampleUIApp.Areas.AreaOne.Models；
@使用SampleUIApp.Common；
@模型示例UIApp.Areas.AreaOne.Models.MemberModel
$（文档）.ready（函数（）
{
//用于设置控制模式
//据观察，Kendo Multiselect不接受以下代码中的值
//在同一视图中更改multiselect的模式，如下所示
var Edit=@（Html.Raw（JsonConvert.SerializeObject（（Dictionary）ViewBag.Editable））；
for（编辑中的键变量）
{
如果（键变量搜索（“Btn”）！=-1）{
jQuery（'#'+keyVar）.attr（“禁用”，编辑[keyVar]）；
}否则{
jQuery（'#'+keyVar）.prop（“只读”，编辑[keyVar]）；
}
}
var viewMode=@Html.Raw（Json.Encode（ViewBag.viewMode））；
如果（视图模式=='ADD'）
{
$（“#LoanGrid1”）.remove（）；
}
变量标题=视图模式+“成员”；
片名（片名）；
});
函数setViewMode（数据）{
//for（数据中的keyVar）{
//如果（键变量搜索（“Btn”）！=-1）{
//jQuery（'#'+keyVar）.attr（“disabled”，data[keyVar]）；
// }
//否则{
//jQuery（'#'+keyVar）.prop（“readonly”，data[keyVar]）；
// }
for（数据中的keyVar）{
如果（键变量搜索（“Btn”）！=-1）{
如果（数据[keyVar]==true）{
jQuery（'#'+keyVar）.prop（“disabled”，true）.addClass（“k-state-disabled”）；
}
否则{
jQuery（'#'+keyVar）.prop（“disabled”，false）.removeClass（“k-state-disabled”）；
}
}
否则{
jQuery（'#'+keyVar）.prop（“readonly”，data[keyVar]）；
}
}
}
附加数据（）上的函数{
返回{
正文：$（“#城市名称”）.val（）
};
}
函数AccessModelDetails（）{
var data=@Html.Raw（Json.Encode（this.Model））；
警报（数据备注）；
}
函数UpdateModelDetails（）{
//var model=$（'form'）.serialize（）；
//var data=Sys.Serialization.JavaScriptSerializer.deserialize（模型）；
//警报（“型号：”+数据备注）；
$（“备注”）.val（“备注更新”）；
}
函数saveDetails（）{
警报（'Calling:saveDetails'）；
var model=$（“form”）.serialize（）；
保存（模型）；//保存函数写在父视图上
}
函数编辑（）{
var mode=2；//2用于编辑
var-Fid=0；
var viewName='MemberEditor'；
var actionURL='@Url.Action（“setViewMode”，“Member”）；
$.ajax({
类型：“POST”，
数据：{
模式:模式,，
lFeatureId:Fid，
ViewName:ViewName
},
url:actionURL，
成功：功能（结果）{
setViewMode（结果）；
}
});
}
//当从Multiselect控件中选择项时，将调用此函数
//用于成员角色
//下面是获取所选项目的示例方法。
函数OnSelectMemberRole（e）{
var dataItem=this.dataSource.view（）[e.item.index（）]；
警报（“事件：：选择（“+dataItem.MemberRoleName+”：“+dataItem.MemberRoleId+”）；
}
@使用（Html.BeginForm（））
{
@*
1.下面是使用MultiButton属性调用服务器端控制器操作的剑道按钮
2.必须按如下方式设置HtmlAttributes
*名称=具有多按钮属性的给定名称
*type=“提交”，
*值=具有多按钮属性的给定名称
3.名称（具有多按钮属性的给定名称）
4.内容（“按钮标题”）
*@
@（Html.Kendo（）.Button（））
.名称（“BtnEditAjax”）
.Content（“编辑-AJAX”）
.HtmlAttributes（新的{style=“float:right”，type=“button”}）
.事件（ev=>ev.单击（“编辑”））
)
@*@（Html.Kendo（）.Button（））
.名称（“Btnsave”）
.HtmlAttributes（新的{style=“float:right”，name=“Btnsave”，type=“submit”，value=“save”}）
.Content（“保存-服务器”）
)*@
@*
1.下面是呼叫发球的剑道按钮
@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 "(999) 000-0000" allows to enter Digits within specified mask.
*@
@(Html.Kendo().MaskedTextBoxFor(m => m.Phone)
.Mask("(999) 000-0000")
.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>
}