This is a migrated thread and some comments may be shown as answers.

Checkboxes in kendo grid

15 Answers 1768 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
PAUL
Top achievements
Rank 1
PAUL asked on 10 Sep 2012, 06:16 PM
Hello, I am not sure if I have this right, but I have a grid with multiple records in it. I have added a checkbox to the grid so that the user can select the records they want to update.  What I want to happen is for selected records to be updated with a value selected in a combobox from the form. I have the checkboxes displaying fine on the grid with this line of code.

 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

Sort by
0
Rosen
Telerik team
answered on 11 Sep 2012, 11:07 AM
Hi Paul,

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
PAUL
Top achievements
Rank 1
answered on 11 Sep 2012, 11:51 AM

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

0
PAUL
Top achievements
Rank 1
answered on 11 Sep 2012, 02:31 PM
Ok I took the javascript you provided and looked all through the forums trying variations of js to select and deselect checkboxes in the kendo grid. NONE of them work. This is the most frustrating thing that could be because this should be so simple. PLEASE help me out here. I provided the code in previous post which shows how the datasource is set up along with the entire kendo grid.

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;

 

});



0
Rosen
Telerik team
answered on 12 Sep 2012, 11:10 AM
Hello PAUL,

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.

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
PAUL
Top achievements
Rank 1
answered on 12 Sep 2012, 11:36 AM
Thank you for the reply Rosen,

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
0
PAUL
Top achievements
Rank 1
answered on 12 Sep 2012, 04:36 PM
Ok an update here and a clarification. First the update. I figured out how to select and deselect all records in a grid with the following javascript that I found on one of the forums here...thank you very much.

$(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

 

0
Rosen
Telerik team
answered on 13 Sep 2012, 07:57 AM
Hello PAUL,

I have attached another project which demonstrates how to implement the described scenario. 

All the best,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
PAUL
Top achievements
Rank 1
answered on 17 Sep 2012, 07:07 PM
Rosen,

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
0
Rosen
Telerik team
answered on 18 Sep 2012, 06:24 AM
Hello 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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
PAUL
Top achievements
Rank 1
answered on 18 Sep 2012, 02:07 PM
Rosen,

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

0
Rosen
Telerik team
answered on 19 Sep 2012, 07:07 AM
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.

Regards,
Rosen
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
PAUL
Top achievements
Rank 1
answered on 19 Sep 2012, 11:37 AM
Rosen,

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
0
Neil
Top achievements
Rank 1
answered on 01 Nov 2012, 12:37 PM
I feel compelled to ask, why bother providing server side binding for the MVC wrappers if absolutely every bit of useful functionality for them has to be done via the client API and AJAX binding? :)
0
thierry
Top achievements
Rank 1
answered on 21 Oct 2014, 05:02 PM
Neil - we here have been wondering the same thing.
0
Rosen
Telerik team
answered on 23 Oct 2014, 04:11 PM
Hi thierry,

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.

 
Tags
Grid
Asked by
PAUL
Top achievements
Rank 1
Answers by
Rosen
Telerik team
PAUL
Top achievements
Rank 1
Neil
Top achievements
Rank 1
thierry
Top achievements
Rank 1
Share this question
or