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

2 posts, 0 answers
  1. Dan
    Dan avatar
    4 posts
    Member since:
    Feb 2016

    Posted 26 Jan 2018 Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    2960 posts

    Posted 30 Jan 2018 Link to this post

    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.
Back to Top