Checkboxes in kendo grid

Thread is closed for posting
16 posts, 0 answers
  1. PAUL
    PAUL avatar
    36 posts
    Member since:
    Aug 2012

    Posted 10 Sep 2012 Link to this post

    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
  2. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 11 Sep 2012 Link to this post

    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!
  3. PAUL
    PAUL avatar
    36 posts
    Member since:
    Aug 2012

    Posted 11 Sep 2012 Link to this post

    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

  4. PAUL
    PAUL avatar
    36 posts
    Member since:
    Aug 2012

    Posted 11 Sep 2012 Link to this post

    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;

     

    });



  5. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 12 Sep 2012 Link to this post

    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!
  6. PAUL
    PAUL avatar
    36 posts
    Member since:
    Aug 2012

    Posted 12 Sep 2012 Link to this post

    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
  7. PAUL
    PAUL avatar
    36 posts
    Member since:
    Aug 2012

    Posted 12 Sep 2012 Link to this post

    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

     

  8. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 13 Sep 2012 Link to this post

    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!
  9. PAUL
    PAUL avatar
    36 posts
    Member since:
    Aug 2012

    Posted 17 Sep 2012 Link to this post

    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
  10. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 18 Sep 2012 Link to this post

    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!
  11. PAUL
    PAUL avatar
    36 posts
    Member since:
    Aug 2012

    Posted 18 Sep 2012 Link to this post

    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

  12. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 19 Sep 2012 Link to this post

    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!
  13. PAUL
    PAUL avatar
    36 posts
    Member since:
    Aug 2012

    Posted 19 Sep 2012 Link to this post

    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
  14. Neil
    Neil avatar
    14 posts
    Member since:
    Jul 2012

    Posted 01 Nov 2012 Link to this post

    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? :)
  15. thierry
    thierry avatar
    2 posts
    Member since:
    Jul 2010

    Posted 21 Oct 2014 in reply to Neil Link to this post

    Neil - we here have been wondering the same thing.
  16. Rosen
    Admin
    Rosen avatar
    3253 posts

    Posted 23 Oct 2014 Link to this post

    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.

     
Back to Top