Getting images to work in AutoComplete box

daleyoung · Sep 12, 2013 · b793f2f · b793f2f
1 parent a5c5d9c
commit b793f2f
Show file tree

Hide file tree

Showing 8 changed files with 37 additions and 23 deletions.
diff --git a/FrontDeskSolution/FrontDesk.Web/Controllers/ClientsController.cs b/FrontDeskSolution/FrontDesk.Web/Controllers/ClientsController.cs
@@ -13,17 +13,14 @@ public IEnumerable<ClientViewModel> Get()
         {
             return new ClientViewModel[] { 
                 new ClientViewModel() {
-                    //ClientId= Guid.Empty,
-                    Name="Steve Smith"
-                    //Patients = new List<PatientViewModel>()
-                    //{
-                    //    //new PatientViewModel()
-                    //    //{
-                    //    //    Name="Darwin",
-                    //    //    PatientId=Guid.Empty,
-                    //    //    PhotoUrl="darwin.jpg"
-                    //    //}
-                    //}
+                    Name="Steve Smith",
+                    Patients = new List<PatientViewModel>()
+                    {
+                        new PatientViewModel()
+                        {
+                            Name="Darwin"
+                        }
+                    }
                 },
                 new ClientViewModel() { Name="Julie" }
             };

diff --git a/FrontDeskSolution/FrontDesk.Web/FrontDesk.Web.csproj b/FrontDeskSolution/FrontDesk.Web/FrontDesk.Web.csproj
@@ -288,6 +288,8 @@
   </ItemGroup>
   <ItemGroup>
     <Folder Include="App_Data\" />
+    <Folder Include="Images\Clients\" />
+    <Folder Include="Images\Patients\" />
   </ItemGroup>
   <ItemGroup>
     <Content Include="packages.config" />

diff --git a/FrontDeskSolution/FrontDesk.Web/Images/Clients/Steve_Smith.jpg b/FrontDeskSolution/FrontDesk.Web/Images/Clients/Steve_Smith.jpg
diff --git a/FrontDeskSolution/FrontDesk.Web/Images/Patients/darwin.jpg b/FrontDeskSolution/FrontDesk.Web/Images/Patients/darwin.jpg
diff --git a/FrontDeskSolution/FrontDesk.Web/Images/Patients/rumor.jpg b/FrontDeskSolution/FrontDesk.Web/Images/Patients/rumor.jpg
diff --git a/FrontDeskSolution/FrontDesk.Web/Models/CreateAppointmentViewModel.cs b/FrontDeskSolution/FrontDesk.Web/Models/CreateAppointmentViewModel.cs
@@ -30,13 +30,16 @@ public ClientViewModel()
         }
         public Guid ClientId { get; set; }
         public string Name { get; set; }
-       // public List<PatientViewModel> Patients { get; set; }
+        public List<PatientViewModel> Patients { get; set; }
     }
 
     public class PatientViewModel
     {
+        public PatientViewModel()
+        {
+            PatientId = Guid.NewGuid();
+        }
         public Guid PatientId { get; set; }
         public String Name { get; set; }
-        public string PhotoUrl { get; set; }
     }
 }
diff --git a/FrontDeskSolution/FrontDesk.Web/Views/Appointment/Create.cshtml b/FrontDeskSolution/FrontDesk.Web/Views/Appointment/Create.cshtml
@@ -15,11 +15,11 @@
         <div class="editor-label">
             Appointment For (choose client)
         </div>
-        @*        <div class="editor-field">*@
         <div class="k-content">
-            <input type="text" id="client" />
+            <input type="text" id="client" style="width: 400px;" />
             <p>Start typing to find a client</p>
-            <input type="button" value="Search" />
+            <input type="button" value="Select" />
+            <input type="button" value="Add New" />
         </div>
         <div class="editor-label">
             Patient / Pet Name
@@ -72,12 +72,22 @@
 </div>
 @section Scripts {
     @Scripts.Render("~/bundles/jqueryval")
+
     <script id="template" type="text/x-kendo-template">
-    <h3>${data.Name}</h3>
+        <img src="/Images/Clients/Steve_Smith.jpg" alt="${data.Name}" />
+        <span>${data.Name}</span><br />
+        #= renderPatientTemplate(data) #
+    </script>
+    <script id="patient-template" type="text/x-kendo-template">
+        # $.each(data.Patients, function (index, item) {
+            # <img src="/Images/Patients/darwin.jpg" alt="${item}" style="max-height:50px" /> #
+        });
+        #
     </script>
+
     <script type="text/javascript">
         $(document).ready(function () {
-            var clients2 = new kendo.data.DataSource({
+            var clients = new kendo.data.DataSource({
                 type: "json",
                 transport: {
                     read: {
@@ -87,19 +97,20 @@
                 }
             });
 
-            var clients = [{ "ClientId": "000-000", "Name": "Steve" }, { "ClientId": "000-001", "Name": "Julie" }];
-
             $("#client").kendoAutoComplete({
                 minLength: 1,
                 filter: "contains",
                 placeholder: "Type client name...",
                 dataTextField: "Name",
                 dataValueField: "ClientId",
                 template: kendo.template($("#template").html()),
-                dataSource: clients2,
-                height: 370,
+                dataSource: clients,
             }).data("kendoAutoComplete");
         });
+
+        function renderPatientTemplate(data) {
+            return kendo.Template.compile($('#patient-template').html())(data);
+        }
     </script>
     <style scoped>
         .demo-section {

diff --git a/FrontDeskSolution/FrontDesk.Web/Views/Shared/_Layout.cshtml b/FrontDeskSolution/FrontDesk.Web/Views/Shared/_Layout.cshtml
@@ -32,7 +32,8 @@
 
 @*    @Scripts.Render("~/bundles/jquery")*@
     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
-    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>@*    <script type="text/javascript" src="/Scripts/kendo.all.min.js"></script>*@
+    <script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
+@*    <script type="text/javascript" src="/Scripts/kendo.all.min.js"></script>*@
     @RenderSection("scripts", required: false)
 </body>
 </html>