Keep in mind that I am new to .Net Core 6.0, ASP.Net and the newest Telerik tools! I have very little experience with js and Razor but am learning quickly!
With that said: I would like to create an input form for collecting search information. I have created a slide out window from the right side... I just can't find a good example of how to add input objects to the form! Any suggestions of research documents would be greatly appreciated!
Current Html & js defining form:
<div id="dialog"></div>
$("#dialog").kendoWindow({ title: "IVM - Search Engine",
width: "40%",
height: "85%",
actions: [ "close" ],
draggable: false,
resizable: false,
modal: true,
position:{ top: 75, left: "50%" },
//content: { url: "Address/getTypes",
// dataType: "json",
// iframe: false }
//item:{ kendoComboBox:{name:"cmbaddressTypes", dataSource:@AddressTypes.addressTypes }}
animation: { open: { effects: "slideIn:left", duration: 500 },
close: { effects: "slideIn:left", reverse: true, duration: 500 } },
visible: false })
The AppBar declaration placing the search button on the bar.
@(Html.Kendo().AppBar()
.Position(AppBarPosition.Top)
.PositionMode(AppBarPositionMode.Fixed)
.Name("appbar")
.Items(items=> {
items.Add().Template("<a class='k-button k-toggle-button k-button-flat-base k-button-flat k-button-md k-rounded-md k-icon-button' href='\\#'><span class='k-icon k-i-menu'></span></a>").Type(AppBarItemType.ContentItem);
items.Add().Type(AppBarItemType.Spacer).Width("16px");
items.Add().Template("<h3>International Vending Machines</h3>").Type(AppBarItemType.ContentItem);
items.Add().Type(AppBarItemType.Spacer).Width("800px");
items.Add().Template("<a class='k-button k-search-button k-button-flat-base k-button-flat k-button-md k-rounded-md k-icon-button' href='\\#' id='openWindow'><span class='k-icon k-i-search'></span></a>").Type(AppBarItemType.ContentItem);
})
.Deferred()
)
and finally, the delegate and event:
$("#appbar").on("click", ".k-search-button", function (e) { IVMSearch(e); })
<script>
function IVMSearch(e)
{ var dialog = $("#dialog").getKendoWindow();
dialog.open(); }
</script>
The behavior is: when the search button is clicked, this kendoWindow slides out from the right side and this is where I want the user to enter their search criteria. I need kendoCombobox, kendoText, kendoButton and kendoLabel objects on this slide out....
Got the objects from the model displayed on the form... that was an interesting journey!
Now, I'm attempting to get the submit to subscribe to an event so I can submit the Form Data to the Controller....
Any suggestions would be greatly appreciated.
So, the answer to the submit button is this: .HtmlAttributes(new { action = "Search/SubmitAddressSearch", method = "POST" })
Here's the complete Model based kendoForm defintion:
@(Html.Kendo().Form<SearchModel>()
.Name("formSearch")
.HtmlAttributes(new { action = "Search/SubmitAddressSearch", method = "POST" })
.Items(items => { items.Add()
.Field(f => f.AddressTypes)
.ColSpan(1)
.Name("cmbAddressTypes")
.Editor(e => { e.MultiSelect().AutoWidth(false)
.Placeholder("--Select 1 or many defined Address Types ---")
.DataTextField("name")
.DataValueField("id")
.BindTo(@AddressTypes.addressTypes);
items.Add()
.Field(f => f.Attention).ColSpan(1)
.Editor(e => e.TextBox()
.Placeholder("--- Enter Attention To ---")
.Enable(true).Name("txtAttention")
.Rounded(Rounded.Large));
}
);
}
)
)
It took me hours to figure this out because the documentation for what I wanted to accomplish was unclear. In the end, the form displays MultiSelects, Text Boxes, ComboBoxes, DateTime Pickers and CheckBoxes. I hope this helps when others are looking to accomplish something like this!
Cheers.
Hi Alan,
Thank you for your feedback and for sharing how you achieved the desired result.
Regarding the Form documentation, I would recommend the following resources:
Each demo has a "View Source" section, where you can review its source code.
Also, feel free to share your feedback on the demos and documentation by using our Feedback form. It is available on the right side of each article/demo. We are constantly working on improving it, and any additional feedback would be greatly appreciated and therefore considered by our team.