Filling other controls by combobox selected item.

[Alper]

     Hi;

I'm newbie to core and trying progress controls. I'm using razor pages and i couldn't find any sample about selecteditemchanged event usage for filling other controls from db. 

Is it possible to give a short sample? If filling can be done serverside will be more happy :) 

 

Thanks

[Marin Bratanov]

Hello Alper,

SelectedIndexChanged event is a concept from WebForms and that is not available in .NET Core. The standard approach for calling the server when the user makes a selection is to use a client-side event of the corresponding UI element (be that a click handler for a <button>, a change handler for a <select>, or something else that mathches the desired UX), and call a controller in any suitable fashion. Here is a more detailed article on the subject: https://www.aspsnippets.com/Articles/Implement-DropDownList-SelectedIndexChanged-event-in-ASPNet-MVC.aspx. Here are a few other ideas on invoking requests, depending on what you need:

• use jQuery to do an AJAX request with a payload you can write up yourself
• POST a form
• use AjaxForm

And here is an example on sending data to a razor page: https://www.learnrazorpages.com/razor-pages/ajax/form-post

With the Kendo ComboBox, you will have an <input name="theName()ConfigurationYouSetOrEditorField" /> so it will participate in a POST action like any regular input. If you want it to trigger the data submission, you can use its change or select event.

That's suitable if you want to do a form submission mostly, though. In WebForms, where this comes from, every server event comes from a form submission, and there is a complex state management that does not exist in MVC. In MVC one would use AJAX requests for data where the developer can define parameters and actions that will handle them (be that WebAPI endpoints, controllers or razor page handlers) in order to return the appropriate data.

With the general stuff out of the way, let's talk about filling in Kendo widgets with data based on the selection of a widget. What I would advise is that you first set their auitoBind setting to false, so they don't request data until needed. Then, the data source you will configure for them exposes a Data() function for the read request that can take the .value() of the combo box so that the action that provides the data can receive it as a parameter and know what to return. To then trigger the data loading, call the .read() method of the data source of the widget. Of course, the signature of the action/handler that will receive this request must match the parameters you will add so the model binding can work and the method to actually get called by the framework.

If you want to fill in other widgets or plain HTML elements, you can use plain jQuery and make the asynchronous data request yourself, then in its success callback/promise, use the data accordingly (for example, to fill in inputs or add <option> elements to <select> lists).

Lastly, if you want to fill in other combo boxes, we offer such cascading through a simple property: https://demos.telerik.com/aspnet-core/combobox/cascadingcombobox. Of course, point the actions to the correct handler for the Razor Page. You can find an example of implementing data source operations in a Razor Page in the following example: https://github.com/telerik/ui-for-aspnet-core-examples/tree/master/grid/razor-pages-crud.

Regards,
Marin Bratanov
Progress Telerik

[Alper]

Thank you for detailed info... That's the difference of Telerik ;)