Telerik Forums
UI for ASP.NET Core Forum
5 answers
531 views

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.

Veselin Tsvetanov
Telerik team
 answered on 07 Dec 2017
3 answers
433 views

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

 

Viktor Tachev
Telerik team
 answered on 06 Dec 2017
1 answer
432 views

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.

Stefan
Telerik team
 answered on 06 Dec 2017
3 answers
378 views

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 };
    }
}

 

 

Stefan
Telerik team
 answered on 04 Dec 2017
5 answers
466 views

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();
        }

Stefan
Telerik team
 answered on 01 Dec 2017
2 answers
88 views

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();
       }

 

Stefan
Telerik team
 answered on 27 Nov 2017
3 answers
1.1K+ views

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}
Viktor Tachev
Telerik team
 answered on 24 Nov 2017
1 answer
97 views

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

Konstantin Dikov
Telerik team
 answered on 24 Nov 2017
1 answer
257 views

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!

 

 

Steven
Top achievements
Rank 1
 answered on 22 Nov 2017
10 answers
635 views

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)...

  • I know that I can get the dataitem with
var dataItem = $("#grid").data("kendoGrid").dataSource.get(id);

but does this work also in a paged grid?

  • If I find the row how to select this row if it is on another page?
  • If I select the row and it is in a Group which is colapsed - how to expand that Group?

robert

 

 

 

 

Robert Madrian
Top achievements
Rank 1
Veteran
Iron
 answered on 22 Nov 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?