or
var
grid = $(
"#copyHierarchyGrid"
).data(
'kendoGrid'
);
var
allSelected = grid.select();
var
element = $(
"#copyHierarchyGrid"
).kendoGrid({
dataSource: {
type:
"jsonp"
,
transport: {
read:
'/AdministerRates/GetCombinedRatesToCopy?collection='
+ sCollection
},
pageSize: 6,
serverPaging:
false
,
serverSorting:
false
},
scrollable:
false
,
height:
'auto'
,
sortable:
false
,
pageable:
false
,
detailInit: detailInit,
selectable:
"multiple"
,
dataBound:
function
() {
this
.expandRow(
this
.tbody.find(
"tr.k-master-row"
));
},
columns: [
{
field:
""
,
title:
"Select All"
,
width:
"75px"
},
{
field:
"ProductTypeName"
,
title:
"Product Type"
,
width:
"auto"
}
]
, rowTemplate: kendo.template($(
"#rowTemplate"
).html())
}).data(
'kendoGrid'
);
<script id=
"rowTemplate"
type=
"text/x-kendo-tmpl"
>
<tr data-uid=
"#: uid #"
class=
"assignment-table-row1 k-master-row"
>
<td class=
"k-hierarchy-cell"
><a class=
"k-icon k-plus"
href=
"\\#"
tabindex=
"-1"
></a></td>
<td class=
"photo"
>
<input type=
"checkbox"
class=
"checkParent"
onchange=
"javascript:testing('#: ProductTypeName#', this)"
/>
</td>
<td>
#:ProductTypeName#</td>
</tr>
</script>
<script id=
"detailRowTemplate"
type=
"text/x-kendo-tmpl"
>
<tr data-uid=
"#: uid #"
id=
"#: uid #"
>
<td>
<input type=
"checkbox"
class=
"checkChild"
onchange=
"javascript:testing('#: SourceProductId#')"
/>
</td>
<td>
#:SourceProductName#</td>
<td>
#:SourceStartDate#</td>
<td>
#:SourceEndDate#</td>
<td>
#:TargetProductName#</td>
<td>
#:TargetStartDate#</td>
<td>
#:TargetEndDate#</td>
</tr>
</script>
function
detailInit(e) {
debugger
$(
"<div/>"
).appendTo(e.detailCell).kendoGrid({
dataSource: e.data.ProductDetails,
scrollable:
true
,
sortable:
false
,
pageable:
false
,
columns: [
{ field:
"SourceProductId"
, title:
"Select Rate"
, },
{ field:
"SourceProductName"
},
{ field:
"SourceStartDate"
},
{ field:
"SourceEndDate"
},
{ field:
"TargetProductName"
},
{ field:
"TargetStartDate"
},
{ field:
"TargetEndDate"
}
],
selectable:
"multiple"
,
rowTemplate: kendo.template($(
"#detailRowTemplate"
).html()),
editable:
true
});
}
@model SignupList.Models.FormGroupViewModel
@{
ViewBag.Title = "FormGroup";
}
<
h2
>Group Form </
h2
>
<
div
>
@{
Html.RenderPartial("GroupForm");
}
</
div
>
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="GroupForm.ascx.cs" Inherits="SignupList.Views.Group.GroupForm" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI.ComboBox" tagprefix="cc1" %>
<
h2
>Join Form</
h2
>
<
p
>Create the membership form.</
p
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadTextBox
ID
=
"InputDateTimeWidth"
InputType
=
"Number"
EmptyMessage
=
"Pixels"
Columns
=
"12"
MaxLength
=
"10"
RunAt
=
"server"
></
telerik:RadTextBox
>
</
form
>
{"Error executing child request for handler 'System.Web.Mvc.HttpHandlerUtil+ServerExecuteHttpHandlerWrapper'."}
<telerik:RadScriptBlock ID=
"RadCodeBlockCompanyAdministrationPermissions"
runat=
"server"
>
<script type=
"text/javascript"
>
$telerik.$(document).ready(
function
() {
var
url =
"/MVC/Permission/Index/<%=ParentObject.Id %>"
;
$.ajax(
{
type:
"GET"
,
url: url,
success:
function
(msg) {
$(
"#mvcpartial"
).html(msg);
},
error:
function
(state, err) {
alert(
'ERROR: '
+state +
' - '
+ err);
}
});
});
</script>
</telerik:RadScriptBlock>
@(Html.Kendo()
.Grid(Model)
.Name(
"grdPermissionGroup"
)
.Columns(column =>
{
column.Bound(p => p.Id).HtmlAttributes(
new
{ @class =
"permissionGroupId"
}).Hidden(
true
);
column.Bound(p => p.CompanyId).HtmlAttributes(
new
{ @class =
"companyId"
}).Hidden(
true
);
column.Bound(p => p.Name);
column.Command(cmd =>
{
cmd.Edit().Text(
" "
).UpdateText(
" "
).CancelText(
" "
).HtmlAttributes(
new
{ title = ViewBag.Edit });
cmd.Destroy().Text(
" "
).HtmlAttributes(
new
{ title = ViewBag.Delete });
cmd.Custom(
"ShowRoles"
).Text(
" "
).Click(
"addRole"
);
});
})
.ClientDetailTemplateId(
"roleDetails"
)
.DataSource(ds => ds
.Ajax()
.Model(model =>
{
model.Id(
"Id"
);
model.Field(f => f.Id).DefaultValue(Guid.NewGuid());
model.Field(f => f.CompanyId).DefaultValue(@Model.First().CompanyId);
})
.Create(create => create.Action(
"PermissionGroupCreate"
,
"Permission"
))
.Update(update => update.Action(
"PermissionGroupUpdate"
,
"Permission"
))
.Read(read => read.Action(
"PermissionGroups"
,
"Permission"
).Data(
"additionalData"
))
.Destroy(destroy => destroy.Action(
"PermissionGroupDelete"
,
"Permission"
))
.Events(e =>
{
e.Error(
"permissionGroupGrid_errorHandler"
);
})
)
.ToolBar(commands => commands.Create().Text(
"Neue Berechtigungsgruppe"
))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Selectable()
.Scrollable(builder => builder.Height(368))
.Sortable()
.Events(ev =>
{
ev.DataBound(
"onPermissionGroupGridRowBound"
);
ev.Edit(
"pgEdit"
);
ev.Change(
"pgChange"
);
ev.Cancel(
"pgCancel"
);
ev.Remove(
"pgRemove"
);
ev.Save(
"pgSave"
);
})
)
function
addRole(e) {
var
row =
this
.select();
permissionGroupId = row.find(
'.permissionGroupId'
).html();
var
childGridName =
'grdRoleDetails_'
+ permissionGroupId;
if
(!permissionGroupId) {
alert(
'Please select permissiongroup!'
);
return
;
}
var
childGrid = $(
"#"
+ childGridName).data(
"kendoGrid"
);
if
(childGrid ==
null
) {
this
.expandRow(row);
}
childGrid = $(
"#"
+ childGridName).data(
"kendoGrid"
);
if
(childGrid !=
null
) {
var
window = $(
'#wndAddRole'
).data(
"kendoWindow"
);
if
(window ==
null
) {
window = $(
"#wndAddRole"
).kendoWindow({
actions: [
"Close"
],
content:
'/MVC/Permission/GetRoleWindowContent/'
+ permissionGroupId,
draggable:
true
,
height:
"240px"
,
width:
"425px"
,
resizable:
false
,
title:
"AssignRole"
,
close: onRoleWindowClose,
}).data(
"kendoWindow"
);
}
window.center();
window.open();
}
else
{
_pendingAddItem =
true
;
}
}
@model CargoGuard.WebPortal.Neu.Areas.MVC.Models.RoleViewModel
@{
var pgId = ViewBag.PermissionGroupId;
}
<
div
class
=
"roleEditContainer"
>
@Html.HiddenFor(m => m.Id)
<
div
class
=
"editor-row"
>
<
div
class
=
"editor-label"
>
@Html.Label("Roles")
</
div
>
<
div
class
=
"editor-field role-edit-field"
>
@(Html.Kendo().DropDownList()
.Name("drpRoleSelection")
.AutoBind(true)
.HtmlAttributes(new { style = "width:230px;" })
.DataTextField("Name")
.DataValueField("Id")
.DataSource(ds => ds.Read(read => read.Action("GetAllRoles", "Permission", new{id=pgId})))
.OptionLabel(HttpContext.GetGlobalResourceObject("GlobalMVC", "OptionSelectRole"))
.SelectedIndex(0).Events(evt => evt.Change("onRoleDropDownChange"))
)
</
div
>
</
div
>
<
div
class
=
"editor-row"
>
<
div
class
=
"editor-label"
>
@Html.LabelFor(m => m.Name)
</
div
>
<
div
class
=
"editor-field role-edit-field"
>
@Html.Kendo().TextBoxFor(m => m.Name).HtmlAttributes(new { style = "width:250px;" })
</
div
>
</
div
>
<
div
class
=
"editor-row"
>
<
div
class
=
"editor-label"
>
@Html.LabelFor(m => m.Description)
</
div
>
<
div
class
=
"editor-field role-edit-field"
>
@Html.TextAreaFor(m => m.Description, new { @class = "k-textbox", style = "height:100px; width:200px;" })
</
div
>
</
div
>
</
div
>
<
div
class
=
"k-edit-form-container"
>
<
div
class
=
"k-edit-buttons k-state-default"
>
<
a
id
=
"btnAssignRole"
class
=
"k-button k-button-icontext k-primary k-grid-update"
href
=
"#"
title
=
"Bearbeiten"
>
<
span
class
=
"k-icon k-update"
></
span
>
</
a
>
<
a
id
=
"btnCancleAssignRole"
class
=
"k-button k-button-icontext k-grid-cancel"
href
=
"#"
title
=
"Bearbeiten"
>
<
span
class
=
"k-icon k-cancel"
></
span
>
</
a
>
</
div
>
</
div
>
<
script
>
$(document).ready(function () {
var dropDownList = $('#drpRoleSelection').data('kendoDropDownList');
dropDownList.dataSource.read();
dropDownList.refresh();
$('#btnAssignRole').click(function() {
var id = $('#Id').val();
var name = $('#Name').val();
if(name == null )
var url = '/MVC/Permission/AssignRole?id=' + id + '&permissionGrpId=' + '@pgId';
$.ajax(
{
type: "POST",
url: url,
success: function (msg) {
alert(msg);
var gridGroup = $("#grdPermissionGroup").data("kendoGrid");
var selectedRow = gridGroup.select();
var dataItem = gridGroup.dataItem(selectedRow);
var Id = dataItem.Id;
var grdRoleDetails = $('#grdRoleDetails_' + Id).data("kendoGrid");
grdRoleDetails.dataSource.read();
var window = $("#wndAddRole").data("kendoWindow");
window.close();
},
error: function (state, err) {
alert('ERROR: ' + state + ' - ' + err);
}
});
});
$('#btnCancleAssignRole').click(function () {
var window = $("#wndAddRole").data("kendoWindow");
window.close();
});
})
</
script
>
@(Html.Kendo().Grid<field>()
.Name(
"myGrid"
)
.HtmlAttributes(
new
{ @
class
=
"ignore"
})
.ToolBar(toolbar =>
{
if
(pnlViewUserAccess == PageViewType.Edit || pnlViewUserAccess == PageViewType.Create)
{
toolbar.Create().HtmlAttributes(
new
{ @
class
=
"ignoreDirty"
});
toolbar.Save();
}
})
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Scrollable(s => s.Height(
"auto"
))
.Columns(columns =>
{
columns.Bound(p => p.key).Title(
"Key"
);
columns.Bound(p => p.label);
columns.ForeignKey(p => p.fieldType, (System.Collections.IEnumerable)ViewData[
"FieldTypes"
],
"Value"
,
"Text"
).Title(
"Field Type"
);
columns.Bound(p => p.valueLength).Title(
"Field Length"
);
columns.ForeignKey(p => p.searchable, (System.Collections.IEnumerable)ViewData[
"TrueFalse"
],
"Value"
,
"Text"
).Title(
"Searchable"
);
columns.ForeignKey(p => p.access, (System.Collections.IEnumerable)ViewData[
"Access"
],
"Value"
,
"Text"
).Title(
"Access"
);
columns.ForeignKey(p => p.active, (System.Collections.IEnumerable)ViewData[
"TrueFalse"
],
"Value"
,
"Text"
).Title(
"Enabled"
);
columns.Bound(p => p.order).Title(
"Order"
);
})
.DataSource(dataSource => dataSource
.Ajax()
.Batch(
true
)
.ServerOperation(
false
)
.PageSize(40)
.Model(model =>
{
model.Id(p => p.oid);
model.Field(x => x.key).Editable(
false
);
model.Field(x => x.active).DefaultValue(
true
);
model.Field(x => x.searchable).DefaultValue(
false
);
model.Field(x => x.access).DefaultValue(3);
})
.Events(e => e.Error(
"handleAjaxError"
))
.Update(update => update.Action(
"FieldDef_Update"
,
"Forms"
))
.Create(update => update.Action(
"FieldDef_Create"
,
"Forms"
))
.Read(read => read.Action(
"FieldDef_Read"
,
"Forms"
,
new
{ recordTypeOid = Model.Entity.Oid }))
)
)
I then had a requirement to be able to 'order' and save the order of the rows. I decided to use the Sortable - again this was fine I could drag the rows and then on the onChange event of Sortable I updated the Grid datasource Order numbers. All good!
However when I attempt to edit a cell I run into problems which I'll detail below:
On the Sortable widget I tried different variations of .Filter(), .Handler() etc.. but couldnt get it working properly. My Sortable code is below:
@(Html.Kendo().Sortable()
.For(
"#myGrid"
)
.ContainerSelector(
"#myGrid tbody"
)
.Filter(
"table > tbody > tr"
)
.Cursor(
"move"
)
//.Handler(".isSortable")
//.HintHandler("noHint")
.PlaceholderHandler(
"myGrid_placeHolder"
)
.Events(events => events.Change(
"myGrid_onChange"
))
)
@{
var serializer =
new
System.Web.Script.Serialization.JavaScriptSerializer();
string
fundsJson = serializer.Serialize(Model.Funds);
}
<script id=
"dropdown-template"
type=
"x-tmpl-mustache"
>
<input type=
"hidden"
name=
"[{{index}}].IndexInXml"
value=
"{{indexInXml}}"
/>
<input id=
"_{{index}}__FundId"
name=
"[{{index}}].FundId"
style=
"width: 300px"
type=
"text"
/>
{{attachComboBox}}
</script>
<script>
var
currentDropDownIndex = 0;
var
fundsJson =@Html.Raw(fundsJson)@(
";"
)
function
attachDropDown(dropDownIndex) {
jQuery(
"#_"
+ dropDownIndex +
"__FundId"
).kendoDropDownList(
{
"dataSource"
: fundsJson,
"dataTextField"
:
"FundName"
,
"height"
: 250,
"headerTemplate"
:
"<div class=\"dropdown-header\"><span class=\"k-widget k-header\">Fund</span><span class=\"k-widget k-header\">Reg</span></div>"
,
"template"
:
"<span class=\"k-state-default\">#: data.FundName #</span><span class=\"k-state-default\">#: data.Reg #</span>"
,
"valueTemplate"
:
"<span>#:data.FundName#</span>"
,
"dataValueField"
:
"FundId"
,
});
}
function
getDropDown(indexInXml) {
var
view = {
index: currentDropDownIndex, indexInXml: indexInXml,
attachComboBox:
function
() {
(
function
(currentDropDownIndex) {
jQuery(
function
() {
console.log(currentDropDownIndex);
attachDropDown(currentDropDownIndex);
});
})(currentDropDownIndex);
}
};
var
template = $(
'#dropdown-template'
).html();
Mustache.parse(template);
var
rendered = Mustache.render(template, view);
currentDropDownIndex++;
return
rendered;
}
function
init() {
currentDropDownIndex = 0;
}
</script>
@(Html.Kendo().Grid<Administration.ViewModels.UnmappedFundInfoViewModel>(Model.ImportedFundData)
.Name(
"funds-mapping"
)
.Sortable()
.Columns(columns =>
{
columns.Bound(c => c.ImportedFundName)
.Title(
"Imported fund name"
);
columns.Bound(c => c.FundId).Title(
"Fund ID"
).Width(100);
columns.Template(@<text> </text>).Title(
"Linked fund"
).ClientTemplate(
"#= getDropDown(data.IndexInXml)#"
);
})
.Scrollable(x => x.Enabled(
true
).Height(
"250px"
))
.DataSource(dataSource =>
dataSource.Ajax().ServerOperation(
false
)
)
.Resizable(resize => resize.Columns(
true
))
)
<script>
$(document).ready(
function
() {
var
grid = $(
"#funds-mapping"
).data(
"kendoGrid"
);
grid.bind(
"dataBinding"
,
function
() {
init();
});
});
</script>