I have two kendo grid in one page and the results of the first grid should be reflected to the second grid. For instance, Grid1 = list of subjects, Grid2 = list of students, if I have to add new subject, it should be right away available on the students dropdown column for subjects without the need of refreshing the whole page.
Hopefully someone could help. Thanks.
I was able to do it by having an ajax call inside complete: function(e){ // ajax call to update } to update the dropdownlist. Thank you guys.
Related
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?
I want to get sorted list items from bind object using kendo ui sortable listview. please refer the sample code from below.
http://dojo.telerik.com/#lilan123/eWofa/2
One way would be to use the Kendo event that is fired on the move or change of the sortable list to set the new index value of the item in the ng-repeat that was moved.
You set the event in the "k-on-change".
<ol id="sortable" kendo-sortable k-options="sortableOptions" k-on-change="change(kendoEvent)">
Then you add the event to the scope.
$scope.change = function(e) {
console.log(e);
alert("The e object has stuff like the old index:" + e.oldIndex);
//Get the correct item from the bound list based on index and change the index values in the list to match.
}
It seems like a hack, but then again, it always felt like a hack when using Telerik controls.
Here is a good blog post on using the events with angular, and what they claim are best practices. Hope it helps!
I am having a grid with checkboxes for each item in the grid. I need to delete the multiple checked items in the grid. How can i do that in kendo ui.
Regards,
Sri
When the button is clicked use jQuery to find all TR elements which contain the checked checkboxes and then use the removeRow method. Something like:
$.each($('#GridName :checkbox:checked').closest('tr'),function(){
$('#GridName').data().kendoGrid.removeRow($(this));
})
I have a grid like this:
To edit a line, the user chooses one from the grid an click the "pen" icon. Then, the record is displayed in the form.
To save the form, choose the save button link. Ok.
Now I need to update the line in the grid.
I get this working, doing the follow in javascript:
$.post(this.href,
sf,
function (response) {
$("#form-edicao").html(response);
var $grid = $("#Grid").data("tGrid");
$grid.rebind(); //==this line update the grid
});
But this approach updates all the grid, return to the first page...
I need to update just one line.
In common table grids, I replace some html elements. How to do this in this mysterious grid?
Taking a look at the Client-side API of the Grid component I think that using .ajaxRequest() instead might be what you're looking for. .rebind() resets the state (page number, filter/sort expressions etc.) while .ajaxRequest() shouldn't.
I use two grids at one PHP page.
Is there any way to get data from the first grid (i.e. after click row) and pre-fill it into the add new row form in the second grid?
thank you for any suggestion Petr
I am not sure that I correct understand what you mean under the "pre-filling". But how I understand you question you can do following:
With respect of onSelectRow event which you define on the first grid you will receive the id of selected row as the parameter. Inside of the onSelectRow event handle you can call getRowData to get full information about the data of selected row. Then using addRowData for example you can add new row in the second grid.