我想在网格中的删除按钮的单击事件完成时执行操作.如何知道Javascript何时被点击？
我使用两个剑道内联网格父母和孩子.子网格包含产品列表,当用户从子网格中选择产品(多选)并单击保存按钮时,它将插入到父网格中.
儿童网格:
var selectedIds = {};
var ctlGrid = $("#KendoWebDataGrid3");
ctlGrid.kendoGrid({
dataSource: {
data:data1,
schema: {
model: {
id: 'id',
fields: {
select: {
type: "string",
editable: false
},
Qty: {
editable: true,
type: "number",
validation: { min: 1, required: true }
},
Unit: {
editable: false,
type: "string"
},
StyleNumber: {
editable: false,
type: "string"
},
Description: {
editable: false,
type: "string"
}
}
}
},
pageSize: 5
},
editable: 'inline',
selectable: "multiple",
sortable: {
mode: 'single',
allowUnsort: false …event-handling cancel-button kendo-ui kendo-treeview kendo-grid
所以标题几乎说明了一切.我正在尝试将新的MultiSelect小部件合并到Grid的自定义弹出编辑器模板中.
我正在使用数据属性初始化方法并从远程dataSource读取下拉选项.这一切都正常,但我无法将所选项的值放入模型中.
保存行时,会向服务器发送一个数据数组,表示在MultiSelect中选择的第一个数据项,而不是以逗号分隔的所选值列表.
我有什么想法可以将MultiSelect值(所选值的列表/数组)放入网格模型中？
谢谢
编辑:我现在使用了一种解决方法,但我很想知道是否有一种"正确的方法"将MultiSelects与网格结合使用.
解决方法是在Grid的配置中添加类似的内容:
save: function(e) {
e.model.items = $('#select_items').data("kendoMultiSelect").value();
}
这是弹出编辑器模板的相关部分:
<input name="select_items" id="select_items" data-value-field="id"
data-text-field="description" data-source="itemsDataSource"
data-role="multiselect" data-auto-bind="false" data-item-template="itemList">
我没有进入select_items模型定义:我正在使用上面的解决方法来复制模型中MultiSelect的值items.这似乎有效,我只是不知道为什么有必要.
我是kendo.ui的首发,我写了这段代码来创建kendo.ui.grid
@(Html.Kendo().Grid<BrandViewModel>(Model)
.Name("Grid")
.Columns(columns =>
{
columns.Bound(p => p.BrandName);
columns.Bound(p => p.BrandAbbr);
columns.Bound(p => p.SrcImage);
columns.Command(command => command.Custom("Edit").Click("editItem"));
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("CustomCommand_Read", "Brand"))
.Model(model => model.Id(p => p.Id))
)
)
当用户单击网格中的编辑按钮时,它将在kendo.ui.window中显示编辑视图,用户可以编辑数据.
@(Html.Kendo().Window().Name("Details")
.Title("Customer Details")
.Visible(false)
.Modal(true)
.Height(400)
.Draggable(true)
.Width(300)
.Events(events => events.Close("onClose"))
)
<script type="text/x-kendo-template" id="template">
<div id="details-container">
<!-- this will be the content of the popup -->
BrandName: <input type='text' value='#= BrandName #' />
</div>
</script>
<script type="text/javascript">
var detailsTemplate = kendo.template($("#template").html());
var windowObject;
$(document).ready(function …我正在使用Kendo-Grid,它的列具有数字和字符串(NA)的值.知道如何对它们进行排序吗？
我使用具有分层网格(父网格和子网格)的kendo网格和custom.command; 单击Child的查看按钮(在父网格运行正常的情况下),它应该调用java脚本函数,显示该行的详细信息,但发生的是它调用javascript两次,第一次有正确的行ID(即相同的行)然后第二次错误的id(即父网格的第一个id).
代码如下.
家长网
@(Html.Kendo().Grid<IRIS.Web.BackOffice.ViewModels.AuditListView>()
.Name("GridAudit")
.Columns(column =>
{
column.Bound(model => model.LogId).Visible(true);
column.Bound(model => model.Date);
column.Bound(model => model.Time);
column.Bound(model => model.User).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("User"));
column.Bound(model => model.Module).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Module")).Width(150);
column.Bound(model => model.Activity);
column.Bound(model => model.Description).ClientTemplate(IRIS.Common.Helpers.ViewTemplateFormats.GetUnWrapColum("Description")).Width(200);
column.Command(command =>
{
command.Custom("View").Text(" ").Click("onParentAuditHirarchy");
}).Width("6em").Title("Actions");
})
.Reorderable(reorder => reorder.Columns(true))
.Selectable(select => select.Enabled(true).Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
.ClientDetailTemplateId("template1")
.Sortable()
.Scrollable(scroll => scroll.Enabled(false))
.Filterable()
.Pageable(page => page.ButtonCount(5))
.HtmlAttributes(new { style = "height:400px" })
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Audit_Load", "AuditLog").Data("getSearchData")
)
.PageSize(11)
)
)
儿童网格
<script id="template1" type="text/kendo-tmpl">
@(Html.Kendo().Grid<IRIS.Web.BackOffice.ViewModels.AuditListView>()
.Name("GridDetails" + "#=LogId#")
.AutoBind(true)
.Resizable(resize …这是我创建网格的代码:
@{
if (Model.GenericEntityList.Count > 0)
{
@(Html.Kendo().Grid(Model.GenericEntityList).Name(screenNames.ToString()).Columns(
columns =>
{
columns.Bound(a => a.ID).Title("<input id='checkAll' type='checkbox' />").ClientTemplate("<input type='checkbox' id=#=genericCheckbox(ID,ViewFlag)#").Width(7);
columns.Bound(a => a.Name).Title(screen.ToString() + " Name").Width(93);
}
).Selectable().Scrollable().DataSource(
datasource =>
datasource.Ajax().Read(read => read.Action("CompSetHide", "Compset"))
).Events(a => a.Change("rowclick")
)
.HtmlAttributes(new {style = "height: 185px;"})
)
}
}
如何禁用和启用自动出现在kendo网格内的垂直滚动条？
在我的Kendo网格中,我试图将"创建新项目"按钮放在命令列的标题(标题)而不是工具栏中.这是我的网格定义的一部分:
var grid = $("#grid").kendoGrid({
columns: [{ command: { name: "edit", title: "Edit", text: { edit: "", cancel: "", update: "" } },
headerTemplate: "<a onclick ='NewItemClick()' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"},
我的问题是:如何创建一个新行并将该行置于'NewItemClick()'中的编辑模式
如何知道Kendo网格行何时处于编辑模式而不使用网格编辑事件？
var tanquesGrid = $(".tanques").data("kendoGrid");
tanquesGrid.element.delegate("tbody>tr", "dblclick", function () {
var selectedItem = tanquesGrid.dataItem(tanquesGrid.select());
if (hasWriteAccess && isClosed == false && selectedItem.EquipmentHistoricID != '')
tanquesGrid.editRow($(this));
});
问题是,当行处于内联编辑模式并且我双击它时,编辑模式消失,这种方式(上面的代码)我在新行中解析这个id!=''但编辑现有行时问题仍然存在.
有任何想法吗？？
抱歉我的英语
我使用kenod UI来创建我的Web UI.我有一个列模板,如下所示
var template = "<input id='details-button' type='image' src='images/detail_button.png' ng-click='showDetals(this.dataItem)'/>#: Contact #";我想在每次单击详细信息按钮时弹出一个窗口,弹出窗口的位置应该在我单击的按钮的右下角.这就是我现在所做的
var popup = $("#detailsPopup");
popup.kendoPopup({
anchor: "#details-button",
origin: "bottom right",
});但它不起作用.每次,弹出窗口显示在第一行按钮的右下角,而不是我点击的按钮的右下角.
检查生成的html,所有按钮的id都相同(详细信息按钮).因此弹出窗口始终显示与第一个详细信息按钮相关.
更新:
这是我改变的解决方案,但仍然无效.
function popupDetails(item) {
detailsGrid.kendoGrid({
columns: ...,
dataSource: item.Details
});
var anchor = "#details-button" + item.id;
var popup = $("#details-popup");
popupp.kendoPopup({
anchor: anchor,
origin: "bottom right",
});
popup.data("kendoPopup").open();
}有人可以帮忙吗？