Telerik Forums
UI for ASP.NET Core Forum
3 answers
439 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
447 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
393 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
487 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
93 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.2K+ 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
103 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
267 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
655 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
2 answers
130 views
I'm having some troubles trying to display events in the Scheduler, maybe casued by DateTime format.

My scheduler configuration is the following:

@(Html.Kendo().Scheduler<BookingSchedulerDto>()
    .Name(“Scheduler")
    .Date(DateTime.Now)
    .StartTime(Model.Start)
    .EndTime(Model.End)
    .Editable(m => m.TemplateId("editor"))
    .Views(views =>
    {
        views.DayView(view => view.Selected(true));
        views.WeekView();
        views.MonthView();
        views.AgendaView();
    })
    .Timezone("Etc/UTC")
    .DataSource(d => d
        .Events(e =>
        {
            e.Error("onError");
        })
        .Model(m =>
        {
            m.Id(f => f.Id);
            m.Field(f => f.Start);
            m.Field(f => f.End);
            m.Field(f => f.Title).DefaultValue("Nessun titolo");
            m.Field(f => f.IsAllDay).DefaultValue(false);
            m.Field(f => f.Name);
        })
        .Create("Update", "Booking")
        .Read("Read", "Booking")
        .Update("Update", "Booking")
        .Destroy("Delete", "Booking")
    )
)

where the Model.Start and Model.End are DateTime types. 
The BookingSchedulerDto entity properties Start and End are also DateTime objects. An example of result of read method is
[
  {
   â€¦,
    "StartTimezone": "Etc/UTC",
    "EndTimezone": "Etc/UTC",
    "RecurrenceRule": null,
    "Start": "2017-11-07T20:16:54.073+01:00",
    "End": "2017-11-07T23:16:54.073+01:00",
    "Id": 4,
   â€¦
  },
  {
      …
  }
]

The problem here is that events are not rendered in the scheduler as expected. What am I doing wrong? Is the result date format correct? Any other causes?
Davide Vernole
Top achievements
Rank 2
 answered on 21 Nov 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?