Hello,
I have multiple MultiSelectFor in my view with the same Ajax Datasource - now I want to use the Html.Kendo().DataSource for all of this
MultiSelectFor but it seems this is not possible - is it only possible to use Html.Kendo().DataSource with Grid and Autocomplete like in the sample?
how to share a datasource with multiple MultiSelectFor or FropDownFor?
(I don't want to have multiple requests)
robert
Hello,
I want to set a NumericTexbox to work with integer numbers without decimals, but using taghelper didn't work.
This code block shows the number with 2 decimals:
<kendo-numerictextbox for="Id" spinners="false" decimals="0" format="#"/>
But if I use this code block, it works as expected:
@Html.Kendo().NumericTextBoxFor(model => model.Id).Format("#").Decimals(0).Spinners(false)
Thanks
@(Html.Kendo().Grid<SysRoleModel>
()
.HtmlAttributes("")
.AutoBind(true)
.Name("grid")
.Selectable(selectable =>//Grid选中设置
{
selectable.Enabled(true);//是否可以选中
selectable.Type(GridSelectionType.Row);//选中行还是单元格;Row为行模式;Incell为单元格模式
selectable.Mode(GridSelectionMode.Multiple);//选中一行还是可以选中多行;Single为单选;Multiple为多选
})
.Columns(columns =>
{
columns.Template("<input class=\"box\" id=\"assignChkBx\" name=\"assignChkBx\" title=\"#=RoleName#\" CompanyRole=\"#=CompanyRole#\" type=\"checkbox\" value=\"#=Id#\" onclick=\"selectRow(this)\"/> ")
.Width(50)
.ClientHeaderTemplate("<input class=\"selectAll\" type=\"checkbox\" id=\"allBox\" onclick=\"selectAllRow(this)\" /></text>")
.HeaderHtmlAttributes(new { style = "text-align: center" })
.HtmlAttributes(new { style = "text-align: center" });
columns.Bound(c => c.RoleName).Title("角色名称").Width(150).HeaderHtmlAttributes(new { style = "text-align: center" });
columns.Bound(c => c.RoleDescription).Title("角色说明").Width(150).HeaderHtmlAttributes(new { style = "text-align: center" });
columns.Bound(c => c.Remark).Title("备注").Width(117).HeaderHtmlAttributes(new { style = "text-align: center" });
columns.Bound(c => c.Enabled).Title("是否有效").Width(117).HeaderHtmlAttributes(new { style = "text-align: center" }).ClientTemplate("#if(Enabled=='1'){#" +
"<span>是</span>" +
"#}else {#" +
"<span>否</span>" +
"#}#").HtmlAttributes(new { style = "text-align: center" });
columns.Bound(c => c.CompanyRole).Title("系统角色").Width(117).HeaderHtmlAttributes(new { style = "text-align: center" }).ClientTemplate("#if(CompanyRole=='1'){#" +
"<span>是</span>" +
"#}else {#" +
"<span>否</span>" +
"#}#").HtmlAttributes(new { style = "text-align: center" });
columns.Bound(c => c.InDate).Title("录入时间").Width(126).HeaderHtmlAttributes(new { style = "text-align: center" }).Format("{0:yyyy-MM-dd HH:mm:ss}");
})
.Pageable(page => page
.Refresh(true)
.ButtonCount(10)
.PageSizes(new[] { 20, 30, 50 })
.Messages(mess => mess.ItemsPerPage("每页显示数目").Display("显示{0}-{1}条,共{2}条"))
)//分页设置
.Sortable() // 是否支持排序
.Scrollable(c => c.Height("100%"))
.HtmlAttributes(new { @class = "k-grid-autoheight" })
.Events(c => c.DataBound("window.kendoGridAutoHeightDataBound"))
.PersistSelection()
.Reorderable(reorderable => reorderable.Columns(true))//是否支持列的拖拽
.Resizable(resizable => resizable.Columns(true))//设置Grid是否可以手动调整列宽
.ColumnMenu()
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.ServerOperation(true)
.Model(model => model.Id(p => p.Id))
.Read(read => read.Action("Role_Read", "Role").Data("GetCriteria"))
)
)
Scrollable Properties set 100% Why does not work, I want to make the grid control automatically according to the interface height how to set
Hi,
I am wondering if it possible to change the text from whatever the viewmodel properties are in the column headers to something custom after the spreadsheet has read from the datasource.
For example, I have a viewmodel with properties "SundayOne", "MondayOne" etc but I would like to dynamically change the value in the spreadsheet cell from "SundayOne" to a specific date like "Nov 12th" depending on what data items get loaded after the read event to make it more user friendly.
However when I attempt to change the value of the cell after the read the changes don't take effect.
I have attached a picture of the cells I am trying to edit in case it is unclear.
Thanks.
Hello,
I have a grid nested within another grid using .ClientDetailTemplateId("template").
the template looks like this:
<script id=
"template"
type=
"text/kendo-tmpl"
>
@(Html.Kendo().Grid<IMSCore.ViewModels.FolderAttachmentTaskAttachmentsViewModel>()
.Name(
"gridAttachmentTasks_#=FolderAttachmentTaskId#"
)
.Columns(columns =>
{
columns.Bound(o => o.Attachment.MigrationAttachmentId);
columns.Bound(o => o.AttachmentId).Hidden();
columns.Template(
"<a role='button' class='k-button k-button-icontext editAttachmentButton ' attachmentid='#: #' style='font-size:smaller;'>Edit</a>"
)
.Title(
"Edit Attachment"
)
.HtmlAttributes(
new
{ @
class
=
"k-button k-button-icontext"
, attachmentId =
"#: AttachmentId #"
})
.Width(75);
columns.Command(command => { command.Edit(); }).Width(EditTemplateHelper.COMMAND_WIDTH);
})
.Editable(edit =>
{
edit.Mode(GridEditMode.PopUp).TemplateName(
"FolderAttachmentTaskAttachmentsEditTemplate"
).AdditionalViewData(
new
{ caid = Model.Caid });
})
.DataSource(dataSource => dataSource
.Ajax()
.Model(m => m.Id(con => con.AttachmentId))
.PageSize(10)
.Read(read => read.Action(
"GetFolderAttachmentTaskAttachments_Post"
,
"FolderAttachmentTaskAttachmentsApi"
,
new
{ folderAttachmentTaskId =
"#=FolderAttachmentTaskId#"
}))
)
.Pageable()
.Sortable()
.ToClientTemplate()
)
</script>
Inside the nested grid I am trying to add a pop editor template like so:
edit.Mode(GridEditMode.PopUp).TemplateName(
"FolderAttachmentTaskAttachmentsEditTemplate"
).AdditionalViewData(
new
{ caid = Model.Caid });
However, when I go to click the edit button, I get invalid Template error.
The contents of the editorTemplate is:
Form to create or edit a folders attachment
*@
@model IMSCore.ViewModels.FolderAttachmentViewModel
@{
CategorySettings categorySettings = new CategorySettings();
string caid = null;
if (ViewData["CategorySettings"] != null)
{
categorySettings = (CategorySettings)ViewData["CategorySettings"];
}
if (ViewData["CAID"] != null)
{
caid = ViewData["CAID"].ToString();
//Model.Caid = caid;
}
}
<
script
>
function ddlDefaultDescriptionSelecet(e) {
var item = this.dataItem(e.item);
var form = $("#FolderAttachmentForm");
var inputs = form.find(":input");
var description = $("#Description");
$.each(inputs, function (inputIndex, input) {
input = $(input);
if (input.attr("id") == "Description") {
input.val(item.Value).trigger("change");
/*Still need to update the actual value. */
description.val(item.Value);
}
});
}
function AttachmentTypeSelect(e) {
var item = this.dataItem(e.item);
var attachmentId = item.AttachmentTypeId;
var attachmentType = item.AttachmentType;
var hiddenAttachmentId = $("#AttachmentTypeId");
/*Update the hidden AttachmentId Field */
hiddenAttachmentId.val(attachmentId).trigger("change");
console.log(hiddenAttachmentId);
}
</
script
>
@* Click Event for custom Check boxes. *@
<
script
>
$(document).on('click', '.checkBoxGroup > input', function (e) {
var $this = $(this);
console.log("Changed!");
console.log($(this));
console.log(e);
debugger;
console.log($this.val());
var value = $this.val();
if (value == true || value == "true" || value == "True") {
value = false;
}
else if (value == false || value == "false" || value == "False") {
value = true;
}
console.log("new value");
console.log(value);
/*change the value*/
/*$this.val(value).trigger("change");*/
$this.attr("value", value);
console.log($this.val());
console.log("change done");
});
</
script
>
<
div
class
=
"templateForm"
>
<
article
class
=
"form-horizontal gridEditForm"
id
=
"FolderAttachmentForm"
style
=
""
>
@* Incase this form is ever going to be used to edit a record in the future. *@
@Html.HiddenFor(m => m.AttachmentId)
@Html.HiddenFor(m => m.AttachmentTypeId)
@Html.HiddenFor(m => m.Caid, new { @Value = caid })
@*@Html.Hidden("Caid", caid)*@
@* Incoming *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.Incoming)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.DropDownListFor(m => m.Incoming)
.BindTo(new List<
SelectListItem
>() {
new SelectListItem() {
Text = "Incoming"
},
new SelectListItem() {
Text = "Outgoing"
},
new SelectListItem() {
Text = "Internal"
}
})
.DataTextField("Text")
.OptionLabel("Select Status")
)
</
div
>
</
section
>
@* Attachment Type *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.AttachmentType)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.ComboBoxFor(m => m.AttachmentType)
.DataTextField("AttachmentType")
.DataValueField("AttachmentTypeId")
.Filter(FilterType.StartsWith)
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetAllAttachmentTypes", "AttachmentTypesApi");
});
})
.Events(e =>
{
e.Select("AttachmentTypeSelect");
})
.HtmlAttributes(new
{
style = "width: 100%;"
})
)
</
div
>
</
section
>
@* Reveived Date *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.Received)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.DatePickerFor(m => m.Received)
//.Value("10/10/2011")
.HtmlAttributes(new { style = "width: 100%", title = "datepicker" })
)
</
div
>
</
section
>
@* From *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.From)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.TextBoxFor(m => m.From)
.HtmlAttributes(new { style = "width: 100%; " })
)
</
div
>
</
section
>
@* To *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.To)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.TextBoxFor(m => m.To)
.HtmlAttributes(new { style = "width: 100%; " })
)
</
div
>
</
section
>
@* Report Author *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.ReportAuthor)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.TextBoxFor(m => m.ReportAuthor)
.HtmlAttributes(new { style = "width: 100%; " })
)
</
div
>
</
section
>
@* Description *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.Description)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.TextAreaFor(m => m.Description, 0, 0, new
{
@class = "k-textbox",
style = "width: 100%"
})
)
</
div
>
</
section
>
@* Default Description Drop down list *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.DropDownList()
.Name("ddlDefaultDescription")
.BindTo(new List<
SelectListItem
>() {
new SelectListItem() {
Text = "Legal Inquiry"
},
new SelectListItem() {
Text = "Permit Application"
},
new SelectListItem() {
Text = "Response To"
},
new SelectListItem() {
Text = "Signed Permit"
},
new SelectListItem() {
Text = "Statutory Requestfor Comments"
},
})
.OptionLabel("SELECT A DEFAULT DESCRIPTION")
.HtmlAttributes(new { style = "width: 100%; " })
.Events(e =>
{
e.Select("ddlDefaultDescriptionSelecet");
})
)
</
div
>
</
section
>
@* Item Date *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.ItemDate)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.DatePickerFor(m => m.ItemDate)
//.Value("10/10/2011")
.HtmlAttributes(new { style = "width: 100%", title = "datepicker" })
)
</
div
>
</
section
>
@* Date Response *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.DateReponse)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.DatePickerFor(m => m.DateReponse)
//.Value("10/10/2011")
.HtmlAttributes(new { style = "width: 100%", title = "datepicker" })
)
</
div
>
</
section
>
@* Date Due *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.DateDue)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.DatePickerFor(m => m.DateDue)
//.Value("10/10/2011")
.HtmlAttributes(new { style = "width: 100%", title = "datepicker" })
)
</
div
>
</
section
>
@* Confidential *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.Confidential)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.CheckBoxFor(m => m.Confidential)
.Checked(false)
.HtmlAttributes(new { value = "false" })
)
</
div
>
</
section
>
@* Owner ID *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.OwnerId)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
//.TextBoxFor(m => m.CreatedBy)
.ComboBoxFor(m => m.OwnerId)
.Placeholder("Select an Owner")
.DataTextField("Name")
.DataValueField("UserId")
//.Template("<
div
><
span
>#:data.FirstName# #:data.LastName#</
span
></
div
>")
.DataSource(ds =>
{
ds.Read(read => read.Action("Get_OwnerUsers", "UsersApi"));
})
.Suggest(true)
.HtmlAttributes(new { style = "width: 100%;" })
)
</
div
>
</
section
>
@* Default Task *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.DefaultTask)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.CheckBoxFor(m => m.DefaultTask)
.Checked(false)
.HtmlAttributes(new { value = "false" })
)
<
span
>Enter an attachment Owner above to assign a default attachment task</
span
>
</
div
>
</
section
>
@* Email Notification *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.EmailNotification)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.CheckBoxFor(m => m.EmailNotification)
.Checked(false)
.HtmlAttributes(new { value = "false" })
)
<
span
>Send Task Recipients a Notification Email?</
span
>
</
div
>
</
section
>
@*@if (categorySettings.PlanReviews == true)
{
<
section
class
=
"form-group no-padding"
style
=
""
>
<
div
class
=
"pull-left text-left col-sm-5"
>
@Html.LabelFor(m => m.FolderAttachmentRegulations)
</
div
>
<
div
class
=
"pull-right col-sm-5"
>
@(
Html.Kendo()
.MultiSelectFor(m => m.FolderAttachmentRegulations)
.Placeholder("Select Associated Regulations")
.DataTextField("RegulationNumber")
.DataValueField("RegulationItemId")
.AutoClose(false)
.DataSource(ds =>
{
ds.Read(read => read.Action("GetRegulationItems", "RegulationItemsApi", new { caid = caid }));
})
)
</
div
>
</
section
>
}*@
@if (categorySettings.PlanReviews == true)
{
@* Regulation Numbers *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-12"
>
@Html.LabelFor(m => m.RegulationNumber)
</
div
>
<
div
class
=
"pull-right col-sm-12"
style
=
"margin-top: 10px;"
>
@await Component.InvokeAsync("RegulationCheckboxWidget")
</
div
>
</
section
>
@* Municipal Numbers *@
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-12"
>
@Html.LabelFor(m => m.MunicipalNumber)
</
div
>
<
div
class
=
"pull-right col-sm-12"
style
=
"margin-top: 10px;"
>
@await Component.InvokeAsync("MunicipalNumberCheckboxWidget")
</
div
>
</
section
>
}
<
section
class
=
"form-group "
style
=
"padding-bottom: 3em;"
>
<
div
class
=
"pull-left text-left col-sm-12"
>
@Html.LabelFor(m => m.AssociatedAttachmentIds)
</
div
>
<
div
class
=
"pull-right col-sm-12"
style
=
"margin-top: 10px;"
>
@await Component.InvokeAsync("AssociatedAttachmentCheckboxWidget")
</
div
>
</
section
>
<
div
class
=
"row col-md-12"
>
@* Folder Attachments *@
<
div
class
=
"row col-md-12"
>
<
section
style
=
"background-color: #3f51b5; padding-top: 3px; padding-bottom: 5px; padding-left: 5px;"
>
<
h3
style
=
"color:#fff;"
class
=
"no-padding"
>File Attachments</
h3
>
</
section
>
</
div
>
<
section
class
=
"form-group no-padding"
style
=
""
>
<
script
>
function onSuccess(e) {
if (e.operation == "upload") {
for (var i = 0; i <
e.files.length
; i++) {
var
file
= e.files[i].rawFile;
if (file) {
var
reader
=
new
FileReader();
reader.onloadend
=
function
() {
$("<div
class
=
'product'
><
img
src
=
" + this.result + "
/></
div
>").appendTo($("#products"));
};
reader.readAsDataURL(file);
}
}
}
}
</
script
>
<
div
class
=
"demo-section k-content wide"
>
<
div
class
=
"wrapper"
>
<
div
id
=
"products"
></
div
>
<
div
class
=
"dropZoneElement"
>
<
div
class
=
"textWrapper"
>
<
p
><
span
>+</
span
>Add Image</
p
>
<
p
class
=
"dropImageHereText"
>Drop image here to upload</
p
>
</
div
>
</
div
>
</
div
>
</
div
>
<
script
type
=
"text/x-kendo-template"
id
=
"template"
>
<
div
class
=
"product"
>
<
img
src
=
"../shared/web/foods/#= name #"
alt
=
"#: name # image"
/>
</
div
>
</
script
>
<
script
id
=
"fileTemplate"
type
=
"text/x-kendo-template"
>
<
span
class
=
'k-progress'
></
span
>
<
div
class
=
'file-wrapper'
>
<
div
style
=
"display: flex;"
class
=
"attachmentsWrapper"
>
<
div
style
=
"width: 50%"
>
<
span
class
=
"file-icon k-file-extension-wrapper"
><
span
class
=
"k-file-extension"
>#=files[0].extension#</
span
><
span
class
=
"k-file-state"
>uploaded</
span
></
span
>
<
h4
class
=
'file-heading file-name-heading'
>Name: <
span
class
=
"file-name"
>#=name#</
span
></
h4
>
<
h4
class
=
'file-heading file-size-heading'
>Size: <
span
class
=
"file-size"
>#=size#</
span
> bytes</
h4
>
<
input
type
=
"hidden"
name
=
"attachmentId"
value
=
""
class
=
"newFolderAttachmentId FolderAttachmentDocumentId"
/>
</
div
>
<
div
style
=
"width: 50%;"
>
<
select
id
=
"uploadAttachmentType"
class
=
"uploadType uploadAttachmentType"
name
=
"uploadType"
></
select
>
</
div
>
</
div
>
<
strong
class
=
"k-upload-status"
>
<
button
type
=
'button'
class
=
'k-upload-action'
></
button
>
@*<
button
type
=
'button'
class
=
'k-upload-action'
></
button
>*@
</
strong
>
</
div
>
</
script
>
@* Get the required info needed Create or Update an attached document *@
<
script
>
function getAttachmentInfo() {
debugger;
var attachmentId = $("#AttachmentId").val();
var fileName = $(".file-name").last().html();
var selected = $(".uploadAttachmentType").last().find(":selected").text();
return { attachmentId: attachmentId, fileName: fileName, caid: "@caid", documentType: selected };
}
</
script
>
<
script
>
function uploadComplete(e) {
/*Find the parent wrapper to update the record. */
var url = "@Url.Action("UpdateDocumentType", "FolderAttachmentUpload")";
$.post(url, getAttachmentInfo(), function (data) { })
.success(function (data) { })
.fail(function (data) { });
}
</
script
>
<
script
>
function uploadGetCaid(e) {
uploadSelect(e);
var attachmentId = $("#AttachmentId").val();
var output = { caid: "@caid", attachmentId: attachmentId };
console.log(output);
e.data = output;
}
function uploadSuccess(e) {
/* Success Event for Uploading the file. */
if (e.operation == "upload") {
var id = e.response.AttachmentId;
/* var attachmentId = $("#AttachmentId").data("kendoAutoComplete");
attachmentId.value(id);
attachmentId.trigger("change");*/
$("#AttachmentId").val(id).trigger("change");
/*Get the attachment ID. The controller will check to see if it is set or not. */
var attachmentId = $("#AttachmentId");
}
}
function getAttachmentId() {
return { attachmentId: $("#AttachmentId").val() };
}
</
script
>
@* Event for deleting the record. *@
<
script
>
function uploadRemove(e) {
var attachmentName = e.files[0].name;
var data = { attachmentId: getAttachmentInfo().attachmentId, fileName: attachmentName };
e.data = data;
}
</
script
>
@* Change Event for a folder attachments document type dropdown list change *@
<
script
>
$(document).on('change', '.uploadAttachmentType', function (e) {
var attachmentInfo = getAttachmentInfo();
/**
* Update the file name to THIS files name.
*/
var fileName = $(this).closest(".file-wrapper").find(".file-name").html();
/*
* Update the dropdown list values.
*/
var ddList = $(this).find('option:selected');
attachmentInfo.fileName = fileName;
attachmentInfo.documentType = ddList.text();
debugger;
var url = "@Url.Action("UpdateDocumentType", "FolderAttachmentUpload")";
$.post(url, attachmentInfo, function (data) { })
.success(function (data) { $.ShowNotification({ type:"success", title: "Document Type Changed" }); })
.fail(function (data) { $.ShowNotification({ type: "error", title: "Unable to Change Document Type" }); });
});
</
script
>
<
script
>
function uploadSelect(e) {
/*use jquery to get the list of attachment types. */
var url = "@Url.Action("GetAttachmentTypes", "AttachmentTypesApi")";
var ddlAttachmentType = $(".uploadAttachmentType").last();
$.get(url, function (data) {
})
.success(function (data) {
/*Loop through each one and append it to the drop down list.*/
ddlAttachmentType.empty();
$.each(data, function (index, attachmentType) {
var listItem = $("<
option
>", {
value: attachmentType.AttachmentTypeId,
text: attachmentType.AttachmentType
});
ddlAttachmentType.append(listItem);
});
ddlAttachmentType.val(1);
})
.fail(function (data) {
debugger;
});
}
</
script
>
@(Html.Kendo().Upload()
.Name("files")
.TemplateId("fileTemplate")
.Async(a => a
.Save("Save", "FolderAttachmentUpload")
.Remove("Remove", "FolderAttachmentUpload")
.AutoUpload(true)
)
.Events(e =>
{
e.Upload("uploadGetCaid");
e.Success("uploadSuccess");
e.Complete("uploadComplete");
e.Remove("uploadRemove");
})
.ShowFileList(true)
.DropZone(".dropZoneElement")
)
@* Template for existing attachments *@
<
div
class
=
"col-sm-10 "
>
<
ul
class
=
"k-upload-files k-reset "
id
=
"ExistingFolderAttachmentDocuments"
>
<
li
class
=
"k-file k-file-success documentWrapper"
id
=
"FolderAttachmentDocumentRecord"
style
=
"display: none;"
>
<
div
class
=
"file-wrapper"
>
<
div
style
=
"display: flex;"
class
=
"attachmentWrapper"
>
<
div
style
=
"width: 50%; margin-right: 5px;"
class
=
"border-hover bold"
>
<
span
class
=
"file-icon k-file-extension-wrapper"
>
<
span
class
=
"k-file-extension"
>.jpg</
span
>
<
span
class
=
"k-file-state"
>uploaded</
span
>
</
span
>
<
h4
class
=
"file-heading file-name-heading"
>Name: <
span
class
=
"temp-file-name"
>7jWBoem.jpg</
span
></
h4
>
<
h4
class
=
"file-heading file-size-heading"
>Size: <
span
class
=
"file-size"
>510514</
span
> bytes</
h4
>
<
input
type
=
"hidden"
name
=
"attachmentId"
value
=
"31"
class
=
"folderAttachmentDocumentId"
>
</
div
>
<
div
style
=
"width: 50%;"
>
<
div
style
=
"width: 100%;"
>
Type: <
span
class
=
"folderAttachmentDocumentType"
style
=
"font-weight:600;"
></
span
>
</
div
>
<
select
class
=
"uploadType existingUploadAttachmentType"
name
=
"uploadType"
></
select
>
</
div
>
</
div
>
<
strong
class
=
"k-upload-status"
>
<
button
type
=
"button"
class
=
"k-upload-action k-button"
style
=
"display: inline-block;"
>
<
span
class
=
"k-icon k-i-close k-i-x removeDocument"
title
=
"Remove"
aria-label
=
"Remove"
></
span
>
</
button
>
</
strong
>
</
div
>
</
li
>
</
ul
>
</
div
>
</
section
>
</
div
>
</
article
>
</
div
>
<
script
>
$(document).ready(function () {
var grid = $("#gridFolderAttachments").data("kendoGrid");
$(".k-grid-update, .k-grid-cancel").click(function (e) {
grid.dataSource.read();
console.log("click");
});
$("[aria-label=Close]").click(function (e) {
console.log("click");
});
});
</
script
>
<
script
>
$(document).on("click", ".removeDocument, [title='Remove']", function (e) {
var document = $(this).closest(".documentWrapper");
debugger;
var documentId = document.attr("document_Id");
var urlRemoveDoc = "@Url.Action("RemoveAttachmentDocument", "FolderAttachmentsApi", new { documentId = "{documentId}" })";
urlRemoveDoc = urlRemoveDoc.replace("%7BdocumentId%7D", documentId);
$.get(urlRemoveDoc, function (data) { })
.success(function (data) {
console.log("successfully removed document");
document.hide();
})
.fail(function (data) {
console.log("failed to remove document");
});
});
</
script
>
and the error im getting can be seen in the attached image.
I am hoping for some insight on this issue.
thanks,
Andrew
Hi,
I have a grid with a details template. I want to hide a column in the details template based on the value of a column from the main grid. Is this possible?
Thanks,
Cornel.
Hi,
I'm currently validating the UI for ASP.NET Core grid component and I run into an issue with the WebApi datasource. When trying the fetch the data it tries to find the data on endpoint "localhost:50050/Customers" however the endpoint is located at the endpoint "localhost:50050/api/Customers". I am following the examples listed here: "http://demos.telerik.com/aspnet-core/grid/webapi". In the demo the route is also configured at "api/{controller}".
Is there any special route configuration I need to add somewhere?
My "Index.cshtml" looks like:
<
div
class
=
"main"
>
@(Html.Kendo().Grid<
Customer
>()
.Name("customerGrid")
.Columns(columns =>
{
columns.Bound(c => c.Id).Title("Tenant");
columns.Bound(c => c.CompanyProfile.CompanyName).Title("Naam");
columns.Bound(c => c.CompanyProfile.Domain).Title("Domein");
columns.Bound(c => c.RelationshipToPartner).Title("Relatie");
})
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.WebApi()
.Model(model =>
{
model.Id(c => c.Id);
})
.Read(read => read.Action("Get", "Customer"))
)
)
</
div
>
My controller class:
public
class
CustomerController : Controller
{
private
readonly
IAuthenticationService _authenticationService;
private
readonly
ICustomerService _customerService;
private
readonly
ISubscriptionService _subscriptionService;
private
readonly
IUsageService _usageService;
public
CustomerController(
IAuthenticationService authenticationService,
ICustomerService customerService,
ISubscriptionService subscriptionService,
IUsageService usageService
)
{
if
(authenticationService ==
null
)
throw
new
ArgumentNullException(nameof(authenticationService));
if
(customerService ==
null
)
throw
new
ArgumentNullException(nameof(customerService));
if
(subscriptionService ==
null
)
throw
new
ArgumentNullException(nameof(subscriptionService));
if
(usageService ==
null
)
throw
new
ArgumentNullException(nameof(usageService));
_authenticationService = authenticationService;
_customerService = customerService;
_subscriptionService = subscriptionService;
_usageService = usageService;
}
// GET: /<controller>/
public
IActionResult Index()
{
return
View();
}
[HttpGet, Route(
"api/Customers"
)]
public
async Task<
object
> Customers([DataSourceRequest]DataSourceRequest request)
{
var customers = await _customerService
.GetCustomersAsync();
return
new
{ data = customers, totalCount = customers.Count };
}
}
I am using Telerik Grid for Aspnet Core 2.0, but here my Actionresult "[DataSourceRequest]" can't be called, the browser says error message "The connection was reset".
Please find my code below:
Index.cshtml
-----------------
@(Html.Kendo().Grid<MVC6.Models.Blog>()
.Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.Title).Width(140);
columns.Bound(c => c.Description).Width(190);
})
.HtmlAttributes(new { style = "height: 380px;" })
.Scrollable()
.Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Customers_Read", "Blogs"))
)
)
BlogController.cs
-----------------------------------
// GET: Blogs
public async Task<IActionResult> Index()
{
return View("~/Views/Home/Index1.cshtml");
}
public IActionResult Customers_Read([DataSourceRequest] DataSourceRequest request)
{
return Json(GetBlogs().ToDataSourceResult(request));
}
private IEnumerable<Blog> GetBlogs()
{
return _context.Blog.Select(blog => new Blog
{
Title = blog.Title,
Description = blog.Description
}).ToList();
}
While populating a ComboBoxFor to be inside a grid, if the name of the view data variable is the same as the id, validation will be ignored.
View:
columns.ForeignKey(p => p.JobNo, (System.Collections.IEnumerable)ViewData[
"JobNo"
],
"JobNo"
,
"JobNumber"
);
Controller:
public
IActionResult Index()
{
ViewData[
"jobnumber"
] = _ddservice.GetAllOrdersByOfficeIdDD(oid);
return
View();
}
Hello,
I have the following grid with columns.AutoGenerate(true) :
@(Html.Kendo().Grid<dynamic>()
.Name(
"gridEQ"
)
.Columns(columns =>
{
columns.AutoGenerate(
true
);
})
.Pageable()
.Sortable()
.Scrollable()
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.NoRecords()
.Filterable(f => f.Enabled(
false
))
.AutoBind(
false
)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action(
"Read"
,
"Home"
))
)
)
If there is a query result from SQLServer with a column Name with spaces no rows are shown in the grid (the column Header is there)
see attached Picture
here is the json result:
{"Data":[{"Anzahl der Betriebsmittel":1376}],"Total":1,"AggregateResults":null,"Errors":null}