From b8f984661dc93243210a9223b3b7a507b550b3d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tiago=20Ara=C3=BAjo=20=5BSSW=5D?= Date: Tue, 23 Apr 2024 15:14:24 -0700 Subject: [PATCH 1/3] Update rules-to-better-websites-layout-and-formatting.md added orphaned rule https://www.ssw.com.au/rules/create-a-combo-box-that-has-a-custom-template/ --- .../design/rules-to-better-websites-layout-and-formatting.md | 1 + 1 file changed, 1 insertion(+) diff --git a/categories/design/rules-to-better-websites-layout-and-formatting.md b/categories/design/rules-to-better-websites-layout-and-formatting.md index 5784d983ff7..357ee25ff00 100644 --- a/categories/design/rules-to-better-websites-layout-and-formatting.md +++ b/categories/design/rules-to-better-websites-layout-and-formatting.md @@ -8,6 +8,7 @@ index: - forms-do-you-indicate-which-fields-are-required-and-validate-them - forms-do-you-know-when-to-use-links-and-when-to-use-buttons - forms-do-you-include-the-number-of-results-in-comboboxes +- create-a-combo-box-that-has-a-custom-template - figures-do-you-use-images-to-reduce-the-words - add-useful-and-concise-figure-captions - use-bad-and-good-examples From eb3f2b0e0bfe1bd761ee380b2010f6d74fcbe5b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tiago=20Ara=C3=BAjo=20=5BSSW=5D?= Date: Tue, 23 Apr 2024 15:15:11 -0700 Subject: [PATCH 2/3] Update rule.md --- rules/create-a-combo-box-that-has-a-custom-template/rule.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/rules/create-a-combo-box-that-has-a-custom-template/rule.md b/rules/create-a-combo-box-that-has-a-custom-template/rule.md index e5946e4118c..c452b64c414 100644 --- a/rules/create-a-combo-box-that-has-a-custom-template/rule.md +++ b/rules/create-a-combo-box-that-has-a-custom-template/rule.md @@ -1,6 +1,6 @@ --- type: rule -title: Do You create a combo-box that has a custom template? +title: Do you create a combo-box that has a custom template? uri: create-a-combo-box-that-has-a-custom-template authors: - title: Adam Cogan From 79f3f2a77987a47e5384a0ac00347e7a0c3e2eac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tiago=20Ara=C3=BAjo=20=5BSSW=5D?= Date: Thu, 25 Apr 2024 09:20:16 -0700 Subject: [PATCH 3/3] Update rule.md --- .../rule.md | 220 +++++++++--------- 1 file changed, 110 insertions(+), 110 deletions(-) diff --git a/rules/create-a-combo-box-that-has-a-custom-template/rule.md b/rules/create-a-combo-box-that-has-a-custom-template/rule.md index c452b64c414..c60eb5a54f9 100644 --- a/rules/create-a-combo-box-that-has-a-custom-template/rule.md +++ b/rules/create-a-combo-box-that-has-a-custom-template/rule.md @@ -23,119 +23,119 @@ Feel free to use our sample: 1. Download and install Kendo UI Controls from [Kendo UI](http://www.kendoui.com/) 2. **HTML (Razor)** - Create a combo-box that has a custom template. Use a code bellow as an example: -``` html -@(Html.Kendo().ComboBoxFor(x => x.EmpTime.ProjectID) -.AutoBind(true) -.Suggest(true) -.Delay(300) -.DataSource(source => source.Read(read => read.Action("ProjectNameAjaxBind", "Ajax") -.Data("function() { return {clientId : getClientId()}; }") -.Type(HttpVerbs.Post))) -.Height(450) -.DataTextField("DisplayText") -.DataValueField("Value") -.Filter(FilterType.Contains) -.Template(@" - - - - - - -
${data.DisplayText}${data.UsedCount}${data.LastUsedText}
-") -.HighlightFirst(false) -.IgnoreCase(true) -.Events(e => e.Change("projectChanged").Open("onProjectOpened")) -) -``` + ``` html + @(Html.Kendo().ComboBoxFor(x => x.EmpTime.ProjectID) + .AutoBind(true) + .Suggest(true) + .Delay(300) + .DataSource(source => source.Read(read => read.Action("ProjectNameAjaxBind", "Ajax") + .Data("function() { return {clientId : getClientId()}; }") + .Type(HttpVerbs.Post))) + .Height(450) + .DataTextField("DisplayText") + .DataValueField("Value") + .Filter(FilterType.Contains) + .Template(@" + + + + + + +
${data.DisplayText}${data.UsedCount}${data.LastUsedText}
+ ") + .HighlightFirst(false) + .IgnoreCase(true) + .Events(e => e.Change("projectChanged").Open("onProjectOpened")) + ) + ``` 3. **CSS** - Customize the look & feel to suit your needs. Example: -``` css -#projectsTableBorder { - border-bottom: 1px solid rgb(217, 217, 217); - margin: 0 -2px; - } - .comboBox-Projects#projectsHeader { - color: black; - font-weight: bold; - margin: 4px 16px 4px 4px; - } - .comboBox-Projects td.projectName { - width: 400px; - text-align: left; - } - .comboBox-Projects td.projectTotalCount { - width: 70px; - text-align: right; - padding-right: 16px; - } - .comboBox-Projects td.projectLastUsed { text-align: left; } - #projectNameHeader:hover, #projectTotalCountHeader:hover, #projectLastUsedHeader:hover { - cursor: pointer; - text-decoration: underline; - } -``` + ``` css + #projectsTableBorder { + border-bottom: 1px solid rgb(217, 217, 217); + margin: 0 -2px; + } + .comboBox-Projects#projectsHeader { + color: black; + font-weight: bold; + margin: 4px 16px 4px 4px; + } + .comboBox-Projects td.projectName { + width: 400px; + text-align: left; + } + .comboBox-Projects td.projectTotalCount { + width: 70px; + text-align: right; + padding-right: 16px; + } + .comboBox-Projects td.projectLastUsed { text-align: left; } + #projectNameHeader:hover, #projectTotalCountHeader:hover, #projectLastUsedHeader:hover { + cursor: pointer; + text-decoration: underline; + } + ``` 4. **JavaScript** - Use JavaScript to change the combo-box's behavior. Example: -``` js -// resize the drop-down list -function resizeComboBoxList(comboBoxListId, width) { - var list = $(comboBoxListId); - list.width(width); - var height = list.height(); - list.children("ul").height(height - 25); -} -function onProjectOpened() { - resizeComboBoxList("#EmpTime_ProjectID-list", 600); -} -// execute sorting when a header column is clicked -function onClick_ColumnHeader(senderId, comboBoxId, fieldName) { - var column = $(senderId); - column.unbind('click'); - column.click(function() { - sortComboBoxBy(comboBoxId, fieldName); - }); -} -// sort any combo-box based on a field name -function sortComboBoxBy(comboBoxId, fieldName) { - var comboBox = $(comboBoxId).data("kendoComboBox"); - var sortDescriptors = comboBox.dataSource._sort; - var direction = "asc"; - if (typeof(sortDescriptors) != "undefined") { - var sortDescriptor = sortDescriptors[0]; - if (typeof(sortDescriptor) != "undefined") { - if (sortDescriptor["field"] == fieldName) { - if (sortDescriptor["dir"] == "asc") { - direction = "desc"; - } - } - } - } - comboBox.dataSource.sort({ - field: fieldName, - dir: direction, - }); -} -// prepare -$(document).ready(function() { - var projectsId = "#EmpTime_ProjectID"; - var projectsListId = projectsId + '-list'; - // prepend header to combo-box list. By default you only get
    - $(" - -Project Name" + - "Used" + - "Last Used" + - "" + - "") - .prependTo(projectsListId); - // register click events for each column - onClick_ColumnHeader('#projectNameHeader', projectsId, "DisplayText"); - onClick_ColumnHeader('#projectTotalCountHeader', projectsId, "UsedCount"); - onClick_ColumnHeader('#projectLastUsedHeader', projectsId, "LastUsedValue"); -}); -}); -``` + ``` js + // resize the drop-down list + function resizeComboBoxList(comboBoxListId, width) { + var list = $(comboBoxListId); + list.width(width); + var height = list.height(); + list.children("ul").height(height - 25); + } + function onProjectOpened() { + resizeComboBoxList("#EmpTime_ProjectID-list", 600); + } + // execute sorting when a header column is clicked + function onClick_ColumnHeader(senderId, comboBoxId, fieldName) { + var column = $(senderId); + column.unbind('click'); + column.click(function() { + sortComboBoxBy(comboBoxId, fieldName); + }); + } + // sort any combo-box based on a field name + function sortComboBoxBy(comboBoxId, fieldName) { + var comboBox = $(comboBoxId).data("kendoComboBox"); + var sortDescriptors = comboBox.dataSource._sort; + var direction = "asc"; + if (typeof(sortDescriptors) != "undefined") { + var sortDescriptor = sortDescriptors[0]; + if (typeof(sortDescriptor) != "undefined") { + if (sortDescriptor["field"] == fieldName) { + if (sortDescriptor["dir"] == "asc") { + direction = "desc"; + } + } + } + } + comboBox.dataSource.sort({ + field: fieldName, + dir: direction, + }); + } + // prepare + $(document).ready(function() { + var projectsId = "#EmpTime_ProjectID"; + var projectsListId = projectsId + '-list'; + // prepend header to combo-box list. By default you only get
      + $(" + + Project Name" + + "Used" + + "Last Used" + + "" + + "") + .prependTo(projectsListId); + // register click events for each column + onClick_ColumnHeader('#projectNameHeader', projectsId, "DisplayText"); + onClick_ColumnHeader('#projectTotalCountHeader', projectsId, "UsedCount"); + onClick_ColumnHeader('#projectLastUsedHeader', projectsId, "LastUsedValue"); + }); + }); + ```