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

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?

Related

Kendo grid. Update only current row in popup, even if other was changed

For example I have many many rows which contains 2 columns: checkbox and input, and popup window with editing. In DataSource I have 'Update' event, which call method for updating from controller.
Question: Is it possible to make such situation: User check checkbox on first row -> open popup for second row -> submit changes. Only second row should be updated, not all.
I want pass to server item only from current row. Actual result is that all changed rows passed to method 'Update'
This situation appears because in my application combined "incell" and "popup" editing for Kendo Grid.

How to read datasource of a Kendo DropDownList only once?

(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

Display multiple new rows in Kendo Grid

I am doing an inline add using Kendo Grid, but on the server side I am actually creating multiple records. The DataSourceRequest sends back all the newly created rows, but only one is added to the grid. The other added records may not show up in the grid at all until the grid is forced to query for the data again.
Is there a way for me to add multiple rows at once?
If not, is there a way to re-query the data and put all newly added models at the top?
In my controller function that creates the new records, I am returning the following. "models" contains all of the newly created records:
return this.Json(models.ToDataSourceResult(request, this.ModelState), JsonRequestBehavior.AllowGet);
I also have a similar issue when updating a row since the server may actually update multiple rows. Since "models" contains multiple models, the first one in the list may or may not be the actual model selected to be updated, so sometimes a different edited model will replace the model that was selected to be updated in the grid.
Thanks,
Rob
I ended up using the kendo grid datasource insert method to add any records returned by my controller that were not already in the grid. I did this in the RequestEnd event for the datasource.
In order for this to work for inline adds, I needed to make sure the first model in the list returned by the controller was always the model being added by the grid. For some reason the initial model being added does not have an ID until the dataBinding event is reached which occurs after the RequestEnd event. So on adds, I simply ignore the first model in the results because it is already in the grid.
Also, when editing rows that are manually inserted into the datasource and then cancelling the edit, the grid removes them from the datasource. I had to block this using the preventDefault() function in the DataBinding event when a "remove" action was encountered directly after editing a row that I manually inserted into the datasource.

Kendo UI Grid - Columns in GroupHeader

I'm working with a grid that has a lot of boolean data on it's model, so I've got a lot of checkboxes (through a client template) on my grid. At the top of the grid, I have also (in the column's headerTemplate) got checkboxes that basically set/clear all the checkboxes for the same column throughout the grid - and all is just peachy...
However, what I would really like to do is to also have checkboxes in Group Headers (groupings), allowing the user to set/clear all the values for that column within that group.
Whilst I can do this as just a sequence of checkboxes in a group header template, one after the other, it just looks bad. What I really need is to be able to position the checkboxes in the Group Header so as they appear "in line" with the checkboxes from the actual model items.
Any ideas anyone?
Martin.

Kendo UI Batch Grid Edit Cell when not in Editor Template

I turn to you stackoverflow!
I'm using a kendo ui batch grid with InCell editing set and am wanting to know a way to set a particular column into edit mode.
I've tried using editCell, and so far it hasn't caused any of the cells to go into edit mode :(
In this particular case, we have a ClientTemplate column specified which has a button (really its a link...) in it. When the user clicks the button I would like a particular cell in that row to switch to edit mode. For reference here's what the specific column template looks like:
columns.Template(t => { }).HeaderTemplate("")
.ClientTemplate(#"
<a href='javascript: void(0)' class='abutton SecondaryActiveBtn' onclick='editVariableRate(this)' title='Edit'>Edit</a>")
.Width(100).Title("");
Here is the particular javascript method that gets called on the button click:
function editVariableRate(element) {
grid = $("#variableFee").data("kendoGrid");
var cell = $(element).closest("tr").find("td:eq(2)");
grid.editCell(cell);
}
Am I doing something wrong here because the particular column never goes into edit mode?
For reference, I can do the following successfully using the same "cell" variable:
var cellIndex = grid.cellIndex(cell);
and cellIndex gets assigned correctly, so I don't think its a problem of selecting the particular cell...
Anybody have any ideas?
Figured it out! It was the link that was the cause of the problem :( Swapping that to be an input button was the only thing that was needed. bangs head into desk.

Resources