How to read datasource of a Kendo DropDownList only once? - drop-down-menu

(MVC Razor) So on my page I have a Kendo grid which contains a DropDownList within a certain column. Now I don't want to fill data of my dropdownlist from controller (With Viewbag/ViewData) before the page loads because it would slow it down, but instead I'd like to fill the DropDownList data on user click with a call to a controller function, and call the read method only once(on first click). How would I be able to achieve this goal?

Set autoBind property to false. It will cause that dropdown will not be filled by data before user click on it.
After component is initialized dataBound event is started so you can set readonly in it.
Demo here

Related

Kendo UI for MVC combobox autoclearing user entered text

I am working on a page that has a Telerik UI for MVC ComboBox. Currently the ComboBox does not keep user input once the datasource has returned any value from the database. Even if you reload the page, the ComboBox will remember the value from the Datasource and delete any user input once the focus is changed to another input field.
I need the ComboBox to keep user input if they do not select a value from the Datasource populated drop-down. Any help would be appreciated.
So I found the answer on the Kendo UI API reference. If you set the .SyncValueAndText(boolean) to false it will allow custom text to stay in the ComboBox. By default this value is set to true which binds the text and value together.
Here is a link to the API Documentation:
https://docs.telerik.com/kendo-ui/api/javascript/ui/combobox/configuration/syncvalueandtext

Kendo UI grid client template dropdown - update after controller constructor init?

http://demos.telerik.com/aspnet-mvc/grid/editing-custom
Hope this is clear.
I have a view that includes a grid with an existing application. The grid needs to load only after selecting some other inputs in the view. Using one of the "template" approaches like the above example works if you know what the list will contain ahead of time. The grid databinds when the view is rendered, and any ClientTemplate is rendered then. So, rebinding the grid doesnt seem to affect the dropdownlist since it has already been rendered.
However, the contents of the dropdownlist cant be known until the user starts adding items to the grid, so its only then that I to need define whats going to be in the dropdownlist, not from the very beginning when the grid is initially displayed.
How do I define or populate the dropdownlist when the grid is binding or as a result of the read action?
[update]
This is the grid column in question, where now Ive setup the column to have its own datasource, but the action GetSystemItemCodes never gets invoked. There is a read action on the grid itself (not shown), but since the template has already rendered when the grid is displayed the first time, it doesnt matter what I do to update the viewdata, its already been rendered.
columns.Bound(rdetail => rdetail.ItemCode).Title("Item Code").ClientTemplate((#Html.Kendo().DropDownList()
.DataSource(datasrc => datasrc.Read(read => read.Action("GetSystemItemCodes", "SalesVoucher")))
.HtmlAttributes(new { id = "itemCodeDropDown" })
.OptionLabel("- Select Item Code - ")
.DataValueField("ItemCodeID")
.DataTextField("ItemCodeValue")
.Name("itemCodeDropDown")
.Events(e => e.Change("OnItemCodeChange"))
.ToClientTemplate()).ToHtmlString()).Width(230);
I think my next approach will be to filter the dropdown with items being returned when adding a new row.
So suppose my question is at this point is: when defining a datasource for an individual column this way, when does its read action get called? Right after the read action on the grid ? How manually cause the column datasource to refresh or rebind?

Kendo UI MVC bind Grid to DataSource from MultiSelect widgets

We are using Kendo UI MVC and need to filter a large number of records and display them in a read-only DataGrid. The page has MultiSelect widgets that each let the user select from a list of distinct values for a specific database column. After the user has entered his selections in the MultiSelect widgets he will click a 'refresh' button to update the grid. The Grid's DataSource.Ajax.Read method should pass the user's selections to the server and display the results in the Grid.
I know how to populate the MultiSelect widgets and how to return data from the server via Ajax but I'm unclear on how to pass the user's selections to Grid.DataSource.Read().
What is the best way for the button to pass the user's selections to the DataSource, fire the Read method, and display the results in the Grid?
EDIT: Putting the widgets inside the Grid's ToolBar will meet our needs.
Embed the widgets in Grid.Toolbar.Template

how to avoid calling page_load method when binding grid with different data

i want to change the data in the gridview on a button click by binding it with a different List<> object on server side, It binds the data successfully but since its a post back on button click the grid view gets loaded with the old data which was initialized to it in the page_load method.
how can i avoid calling the page load method after binding the grid with fresh data in the onclick event of my button.
i tried using (!isPostBack) but it dose not help.
Have your button event set a grid parameter that posts back to your server control that indicates that you are changing which datasource feeds the grid, then reload the grid. It should only be now showing the new dataset.
Example:
$('#gridName').jqGrid('setGridParam', { postData: { ChangeGridDataSet: true} }).trigger('reloadGrid', [{ page: 1}]);

Create a Web Grid using Javascript

Can we create a WEB GRID dynamically using JAVASCRIPT ?
I am using MVC 3 and Razor as my view.
On one of my Razor view I have a drop down box what I want is to create a web grid dynamically on selection of a drop down I get the data depending on the value selected from the drop down box.
Please help me on this.
I had to use ajax for this, where I had called a method using ajax and my method (present in the controller) returned a partial view.
My partial view had the grid I needed to show. and in the method (present in the controller) I had passed value from the dropdown box using ajax, and using this value I had queried my database and sent that model to the partial view.

Resources