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}
Hi - I'm trying to filter a grid that is bound to child tables using .Include() and .IncludeNext() and having no luck. I keep getting the error below - any help would be appreciated, I tried just about everything including gathering up all the SerialNumbers at a higher level but that was flakey code and causing a performance degradation.
Message"Invalid property or field - 'SerialNumber' for type: Invoice"string
Here's my data load statement:
invoices = from inv in _context.Invoices.Include(i => i.ShippingAddress).Include(i => i.InvoiceLines).ThenInclude(s => s.SerialNumbers)
where orgIds.Contains(inv.OwnedBy_Id) select inv;
And my filters:
$("#Grid").data("kendoGrid").dataSource.filter({
logic: "or",
filters: [
{
field: "SerialNumber",
operator: "contains",
value: searchValue
},
Thanks!
Craig
Hello,
I saw the demo here: http://demos.telerik.com/aspnet-core/grid/checkbox-selection
I'm trying to do the same, but I can't get it to work.
this is my code:
@(Html.Kendo().Grid<CalculationResultModel>()
.Name("Grid")
.Columns(columns =>
{
columns.Select().Width(50);
...
})
.Events(ev => ev.Change("onChange"))
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(true)
.Model(model => model.Id(m => m.CalculationRequestIdentification))
.Read(read => read.Action("x", "x").Type(HttpVerbs.Get))
)
)
when I call the selectedKeyName() function in the javascript, I get an empty array.
Any Idea why that can be? The Id is a Guid btw.
Thanks!
Hello,
I'm having some grid's - some with paging or grouping (Expanded and Collapsed) where I want to search for a specific row (Model_Id) and
select that row (if it is a grouped row it should be expand)...
var dataItem = $("#grid").data("kendoGrid").dataSource.get(id);
but does this work also in a paged grid?
robert