columns.Template(@<checked>@Html.CheckBox("selected", new { id = @item.ID })</checked>).Title("Select");
the problem is when the update button is clicked I do not know how to iterate through the rows in the kendo grid from the controller and grab those records that will be updated .
I tried something like this but cant get it to work "Cannot convert type char....
foreach (GridRow<Bin_BudgetView> row in fc["kendoGrid"])
Can someone please give me a simple solution to iterate through a kendo grid from the controller and update those records that are checked?
Also If I wanted to check or uncheck all of the records in the grid how would I go about that?
thanks for your help
Paul
15 Answers, 1 is accepted
In order to achieve this you may use the DataSource API to update the selected records and then to push the changes to the server. I have attached a small sample which demonstrates a possible implementation.
All the best,
Rosen
the Telerik team
Rank 1
Thank you for the reply. First of all I cannot open the soultion. Apparently it was created in a newer version of VS. I am working in 2010. No worries, all I needed was the code.
Looking at the code was helpful but it is clear that I must provide more informatiion. The data source that the Kendo grid is displaying is from a view and not a table. Therefore any updates that I do to the records within that view are done via stored procedure and not the standard update record call. In addition some validation MUST be done before the stored procedure can be called and therefore I need to be able to retrieve the checked records upon submit and this code does not acheive that.
I am working now on putting a select all checkbox at the top of the grid. I hope to have the javascript I need figured out before long but a hint from you would surely be appreciated. I do not know if this will help but the code to declare my kendo grid looks as such right now. I had to modify the line of code you used to create checkbox because it did not work
so I changed
column.Bound(p => p.ID).ClientTemplate("<input type=\"checkbox\" />"); to
columns.Bound(p => p.ID).Title("Select").Template(@<input type="checkbox" />);
Now here is the code for my kendo grid
<
input type = "checkbox" id = "selectAll" onclick= "javascript:SelectAll(this)" />
@Html.Label("Select ALL")
<div>
if (Model != null)
{
@(Html.Kendo().Grid<BuyItNow.Models.
Bin_BudgetView>().HtmlAttributes(htmlAttributes)
.Name("kendoGrid")
.EnableCustomBinding(true)
.BindTo(Model.Data)
.Columns(columns =>
{
columns.Bound(p => p.ID).Title("Select").Template(@<input type="checkbox" />);
columns.Bound(p => p.CID).Title("CID").Width(100);
columns.Bound(p => p.Engineer).Title("Engineer").Width(175);
columns.Bound(p => p.userID).Title("User ID").Width(100);
columns.Bound(p => p.DateCreated).Title("Date Created");
columns.Bound(p => p.DateModified).Title("Date Modified");
columns.Bound(p => p.POC).Title("Point of Contact").Width(175);
columns.Bound(p => p.AltPOC).Title("Alternate Point of Contact").Width(175);
columns.Template(@<text>@Html.ActionLink("Edit", "Edit",
})
.Pageable()
.Sortable()
.DataSource(source => source.Server()
.Total(Model.Total))
)
}
div>
To sum it up in a nutshell. All I want is a way to select all and deselect all checkboxes in the kendo grid and pass the ID's of the selected records TO the controller. Again this grid is displaying a view of three joined tables so the javascript you provided for update is of no use. In addition some validation MUST be done before I can update anyway so again the javascript provided on the Client side does not solve my problem.
Regards,
Paul
Rank 1
In my javascript I cannot seem to get anything I need, like record count or length from declarations like this
var
grid = $("#Grid").data("kendoGrid");
here is one variation just a partial --doesnt recognize tbody. Understand this is the latest example. I have tried a hundred different ways to no avail. Please advise...
var grid = $("#Grid").data("kendoGrid");
var selectAll = document.getElementById("selectAll");
if (selectAll.checked == true) {
grid.tbody
.find("selected")
.each(function () {
grid.dataItem(this).checked = true;
});
You can find a runnable sample on how to build a header template checkbox to select multiple records when bound via server binding in the sample application supplied with the KendoUI distribution. The sample application is located within \wrappers\aspnetmvc\Examples folder and the demo is named "Column header template". More information on running the sample project can be find here.
Regarding your second question. The code will not work as you are using server binding. As you may know most of the client-side API features will work only when AJAX binding is used.
Rosen
the Telerik team
Rank 1
I changed the grid to use Ajax binding and I am still getting null value from what is passed to the controller. See attached file.
In my controller just for testing I have this and pocEdits is ALWAYS null.
public ActionResult FilterPOCEdit([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<Bin_BudgetView> pocEdits, FormCollection fc, string btnSubmit)
{
int temp = 0;
if(pocEdits != null)
temp = pocEdits.Count();
}
I am still trying to figure out how to get select all checkbox to work...I could not find what you were speaking of but if it is for Server binding I cannot use it anyway since I have to use AJAX binding....
thank you for your help
Paul
Rank 1
$(document).ready(
function () {
var grid = $('#Grid').data('kendoGrid');
grid.thead.find("th:first")
.append($('<input class="selectAll" type="checkbox"/>'))
.delegate(".selectAll", "click", function () {
var checkbox = $(this);
grid.table.find("tr")
.find("td:first input")
.attr("checked", checkbox.is(":checked"))
.trigger("change");
});
Now what I need to do is pass the seleced ID's of these records to the Controller so that I can do something with them. As stated before I cannot just do an update from javascript to this grid because the grid is not a table, it is a view. What I need is a way to get these ID's to the controller. Can anyone please help me out here...
Regards,
Paul
I have attached another project which demonstrates how to implement the described scenario.
All the best,Rosen
the Telerik team
Rank 1
That worked out pretty well. Thank you very much. One question though. How do I get paging and sorting to work now. Works fine with
.DataSource(source => source.Server().Total(Model.Total)) but not with
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Read("_Read", "Budget")
.Update("FilterPOCEdit", "Budget")
.Model(model => model.Id(p => p.ID))
.Total(Model.Total))
.Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Multiple))
I have tried everything I can think of...and of course the obvious
*@using (Ajax.BeginForm("Index", "Budget", new AjaxOptions { UpdateTargetId = "BudgetList", HttpMethod = "POST", InsertionMode = InsertionMode.Replace }))
{
but to no avail...
Please advise.
Paul
You will need just add the Sortable and Pageable options to the Grid configuration from the project I have provided as it is already configured for AJAX binding.
All the best,Rosen
the Telerik team
Rank 1
Sortable and Pagable ARE THERE! What I was trying to point out is that they work with
.DataSource(source => source.Server().Total(Model.Total)) but not with
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Read("_Read", "Budget")
.Update("FilterPOCEdit", "Budget")
.Model(model => model.Id(p => p.ID))
.Total(Model.Total))
.Selectable(s => s.Mode(Kendo.Mvc.UI.GridSelectionMode.Multiple))
I should know better than to not provide enough info.
I have a datagrid that is based upon a View of three joined tables. I want to filter those records and then click an edit button which is going to show the same view but with fewer fields because we don't need to see all the fields to edit the records we want to edit. On that view there will also be a checkbox column which I want to select all desect all or check the ones I want to check. After 3 days I finally got what I needed for the javascript to pass those ids to the controller and do what i am going to do with them. Thank you. I would have never been able to figure it out. Documentation on this sort of thing sure would be helpful.
The problem now is that this new view does not page or sort. On my development machine when you click on the headers of those columns it does nothing (it does not fall thru any code, I put break points everywhere and tried everything. What you see is my latest and best working iteration) but when I publish it and click on those columns from the server it falls through some code because it returns no records (screen shot atttached.)
I have looked at the Index view where the paging and sorting work perfectly. No difference other than what I stated at the beginning of this post.
The index does have a partial view for the budgets and so did the other view at first. I have tried Ajax.BeginForm and everything I can think of (iincluding partial view wrapped in ajax.beginform)but it doesnot work.
I am new to Kendo and have a lot to learn but trying to do what I believe are very simple things that every application does should not be this difficult to figure out should it? Not one demo comes close and documentation seems sparse at best. Searching through the forums takes hours and I still would not of been able to do the checkboxes without the help from the forum combined with the answer you provided.
The Zipped file has all of the code for the budget controller, but you should be able to see which methods are associated with the two views I provided along with the partial view for the Index view.
Oh one more issue. On the view that paging and sorting work all I get at bottom of view is page numbers. No first and last arrow or next and previous like in the demos and examples. I could not find any attributes that were different from my code to those provided so I am at a loss on that one too.
Thank you for you help,
Paul
Looking at the files you have provided, I noticed that the grid is configured to read data from a _Read action method located in the BudgetController. However, it seems that the BudgetController does not have such action method. Implementing the method should resolve the issue. Information on how to configure AJAX bound grid can be found in the documentation, also is demonstrated in the project I have sent previously.
I have noticed that you have enabled the custom binding. Information on how to setup this using AJAX can be found here.
Also as I have already mentioned, you can find large array of samples in the demo application available with KendoUI distribution.
Rosen
the Telerik team
Rank 1
That did it...and it was right there in front of me. Thank you so much. I had the _Read in there at one time but it wasn't firing and I thought it had something to do with updating and returning the results to the grid (which it does obviously). Was already handling the updating of the records and that part worked so I deleted the _Read. I am learning.
Again thank you!.
Paul
Rank 1
Rank 1
Being a client-side widget, it is expected that major part of the built-in Grid widget functionality will require binding on the client - either via AJAX or by serializing the data on page's initial load. The server binding is provided mostly for historical reasons, as well as SEO and in scenarios where JavaScript is not enabled.
Regards,
Rosen
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.