This is a migrated thread and some comments may be shown as answers.

Grid with Inline cell drop-down inside a pop-up template

1 Answer 76 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Dan
Top achievements
Rank 1
Dan asked on 26 Jan 2018, 02:53 PM

I'm having trouble with getting  a inline cell drop-down that's in a grid, inside a tab strip which is for a pop-up editor for another grid (complicated I know).

The drop-down in question that is causing the error is called "NoteType"

The error I keep getting is the following:

VM1563:1 Uncaught SyntaxError: Invalid or unexpected token
    at eval (<anonymous>)
    at eval (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:2651)
    at Function.globalEval (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:2662)
    at Ha (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:53272)
    at n.fn.init.append (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:54801)
    at M.fn.init.n.fn.(anonymous function) [as appendTo] (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:56520)
    at init._createPopupEditor (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:24:21766)
    at init.editRow (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:24:19002)
    at HTMLAnchorElement.eval (https://kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js:24:14868)
    at HTMLDivElement.dispatch (https://kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js:1:44454)
(anonymous) @ jquery.min.js:1
globalEval @ jquery.min.js:1
Ha @ jquery.min.js:1
append @ jquery.min.js:1
n.fn.(anonymous function) @ jquery.min.js:1
_createPopupEditor @ kendo.all.min.js:24
editRow @ kendo.all.min.js:24
(anonymous) @ kendo.all.min.js:24
dispatch @ jquery.min.js:1
r.handle @ jquery.min.js:1

 

Here is my parent  grid - Index.cshtml

---------------------------------------

@using AccuChart.Controllers;
@using AccuChart.Models;
@using AccuChart.ViewModels;

@model PatientViewModel

@{
    ViewBag.Title = "Patients";
}

<h3>Patients</h3>


@(Html.Kendo().Grid(Model.Patients)
        .Name("patientGrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.FirstName).Title("First Name").Filterable(true);
            columns.Bound(p => p.LastName).Title("Last Name").Filterable(true);
            columns.Bound(p => p.PatientId).Visible(false);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_Patient")
                .Window(w => w.Title("Edit Patient").Name("Patient").Width(800))
    )
    .Pageable(pageable => pageable
        .Refresh(true)
        .PageSizes(true)
        .ButtonCount(3))
    .Sortable()
    .Scrollable()
    .Filterable(ftb => ftb.Mode(GridFilterMode.Menu))
    .DataSource(dataSource => dataSource
        .Ajax().ServerOperation(false)
        .PageSize(20)
        .Model(model =>
        {
            model.Id(patient => patient.PatientId);
            model.Field(e => e.PatientNotes).DefaultValue(new List<PatientNoteModel>());
        })
        .Read(read => read.Action("GetPatients", "Patient"))
        .Create(create => create.Action("EditingPopup_Create", "Patient"))
        .Update(update => update.Action("EditingPopup_Update", "Patient"))
        .Destroy(delete => delete.Action("EditingPopup_Delete", "Patient"))
        .Events(e =>
        {
            e.RequestEnd("onGridDataSourceRequestEnd");
            e.Error("onError");
            e.Change("Grid_OnRowSelect");
        })
        .Sort(sort => sort.Add("FullName"))
       )
)
<script type="text/javascript">
    function onError(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function () {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }

    function onGridDataSourceRequestEnd(e) {
        // Check request type
        if (e.type == "create" || e.type == "update") {
            //check for errors in the response
            if (e.response == null || e.response.Errors == null) {
                $('#patientGrid').data().kendoGrid.dataSource.read();
            }
            else {
                alert("Update Failed");
            }
        }
    }

    function Grid_OnRowSelect(e) {
        if (e != null) {
            if (e.index != null && e.items != null) {
                var model = e.items[e.index];
                $.post("Patient/SetPatientId", { patientId: model.id }, function (r) {
                    if (r.Status != "Success") {
                        alert("Issue with patient")
                    }
                });
        }
    }

    }

</script>
<style>
    .k-header.k-grid-toolbar, .k-button.k-button-icontext.k-grid-add, .k-window-titlebar.k-header {
        background-color: #393536;
        border-color: #605d5e;
    }

        .k-button.k-button-icontext.k-grid-add:hover {
            background-color: #605d5e;
            border-color: #4c494a;
        }
</style>

Here is my pop-up editor template - _Patient.cshtml
---------------------------------------

@using AccuChart.Controllers;
@using AccuChart.Models;
@using AccuChart.ViewModels;


<div style="width:800px;">
    @(Html.Kendo().TabStrip().Animation(false)
              .Name("tabstrip")
              .Items(tabstrip =>
              {
              tabstrip.Add().Text("Patient Information")
                                .Selected(true)
                                .Content(@<text>
    <div style="width:100%">
        @Html.HiddenFor(m => m.PatientId)
        @Html.HiddenFor(m => m.ClinicId)

        <div style="float:left; width:300px;">

            <div class="editor-label">
                @Html.LabelFor(m => m.FirstName)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.FirstName).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.FirstName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.MiddleName)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.MiddleName).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.MiddleName)
            </div>


            <div class="editor-label">
                @Html.LabelFor(m => m.LastName)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.LastName).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.LastName)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Address1)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.Address1).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.Address1)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Address2)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.Address2).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.Address2)
            </div>

        </div>
        <div style="float:left; width:300px;">
            <div class="editor-label">
                @Html.LabelFor(m => m.City)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.City).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.City)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.State)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.State).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.State)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Zip)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.Zip).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.Zip)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.HomePhone)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.HomePhone).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.HomePhone)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.CellPhone)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.CellPhone).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.CellPhone)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.Email)
            </div>
            <div class="editor-field">
                @Html.Kendo().TextBoxFor(m => m.Email).HtmlAttributes(new { style = "width:100%" })
                @Html.ValidationMessageFor(m => m.Email)
            </div>

            <div class="editor-label">
                @Html.LabelFor(m => m.PreferContact)
            </div>
            <div class="editor-field">
                @(Html.Kendo().DropDownListFor(m => m.PreferContact)
                        .HtmlAttributes(new { style = "width:100%" })
                        .DataTextField("Name")
                        .DataValueField("Name")
                        .DataSource(ds =>
                        {
                            ds.Read(read => read.Action("GetModeContact", "Patient"));
                        })
                        .AutoBind(true)
                )
                @Html.ValidationMessageFor(m => m.PreferContact)
            </div>
        </div>
        <div style="clear:both"></div>
    </div>
                                </text>);

    tabstrip.Add().Text("Insurance").Content(@<text>
    <div style="width:100%">

        <div class="editor-label">
            @Html.LabelFor(m => m.InsuranceCompany)
        </div>
        <div class="editor-field">
            @Html.Kendo().TextBoxFor(m => m.InsuranceCompany).HtmlAttributes(new { style = "width:100%" })
            @Html.ValidationMessageFor(m => m.InsuranceCompany)
        </div>

        <div class="editor-label">
            @Html.LabelFor(m => m.InsuranceGroupNumber)
        </div>
        <div class="editor-field">
            @Html.Kendo().TextBoxFor(m => m.InsuranceGroupNumber).HtmlAttributes(new { style = "width:100%" })
            @Html.ValidationMessageFor(m => m.InsuranceGroupNumber)
        </div>

        <div class="editor-label">
            @Html.LabelFor(m => m.InsurancePolicyNumber)
        </div>
        <div class="editor-field">
            @Html.Kendo().TextBoxFor(m => m.InsurancePolicyNumber).HtmlAttributes(new { style = "width:100%" })
            @Html.ValidationMessageFor(m => m.InsurancePolicyNumber)
        </div>

        <div class="editor-label">
            @Html.LabelFor(m => m.InsurancePolicyHolderName)
        </div>
        <div class="editor-field">
            @Html.Kendo().TextBoxFor(m => m.InsurancePolicyHolderName).HtmlAttributes(new { style = "width:100%" })
            @Html.ValidationMessageFor(m => m.InsurancePolicyHolderName)
        </div>
    </div>

    </text>);


    tabstrip.Add().Text("Therapy Note").Content(@<text>
     
        <div style="width:100%">
            @(Html.Kendo().Grid(Model.PatientNotes)
        .Name("PatientNote")
        .Sortable()
        .Columns(cols =>
        {
            cols.Bound(b => b.NoteType).ClientTemplate(
                 (Html.Kendo().DropDownList()
                 .Name("NoteType")
                    .DataTextField("Name")
                    .DataValueField("Id")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetNoteTypes", "Patient");
                        });

                    })
                    ).ToClientTemplate().ToHtmlString());
            cols.Bound(b => b.Note);
            cols.Bound(b => b.EnteredBy);
            cols.Bound(b => b.EnteredOn);
    })
        .ToolBar(toolbar => toolbar.Create())
        .Editable( ed => ed.Mode(GridEditMode.InCell))
        //  .AutoBind(false)
        .DataSource(ds => ds.Ajax().Model(mo =>
        {
            mo.Id(m => m.PatientNoteId);
            mo.Field(f => f.PatientNoteId).Editable(false);
            mo.Field(f => f.PatientId).Editable(false);
            mo.Field(f => f.NoteType).Editable(true);
            mo.Field(f => f.Note).Editable(true);
            mo.Field(f => f.Version).Editable(false);
            mo.Field(f => f.EnteredBy).Editable(false);
            mo.Field(f => f.EnteredOn).Editable(false);
        })
        .Read(read => read.Action("GetPatientNotes", "Patient"))
        .Create(create => create.Action("EditingPopup_PatientNoteCreate", "Patient"))
        )
        .ToClientTemplate()
            )

           
       


        </div>

    </text>);


              }))


</div>

    @model PatientModel

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 30 Jan 2018, 07:43 AM
Hello, Dan,

Thank you for the provided information.

After inspecting it I noticed the DropDown is initialized inside the ClientTemplate which is not supported as the ClientTemplate is used for display purposes only, and it is executed on the client which may be causing the syntax error having in mind that the ClientTemplate contains Razor.

We have an example of hierarchical Grid with editing and a DropDown editor which can be helpful and used for reference:

https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/edit-three-level-hierarchical-grid

Also, the following article in regards to the DropDown editors can be helpful as well:

https://docs.telerik.com/aspnet-mvc/helpers/grid/templating/editor-templates

I hope this will help to achieve the desired result.

Regards,
Stefan
Progress Telerik
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Dan
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Share this question
or