How to refresh a grid when clicking a checkbox

[Nicklas]

Hi,

I have a grid that is populated from my Controller. My controller gets its data from an external webservice, and then populates a list in my controller, and then the view is fed with this list.

This is my controller:

public ActionResult Index()
{
    var client = new UnitServiceClient();
    var listOfUnitsFromService = client.GetListOfUnits(true);

    var model = new UnitModel
                    {
                        UnitTypes = listOfUnitsFromService.ToList()
                    };
        return View(model);
}

And this is my grid (cshtml):

<div class="row-fluid">
    <div class="span12">
        <div class="k-block">
            <div class="k-header">Unit List</div>
            @(Html.Kendo().Grid(Model.UnitTypes)
            .Name("Grid")
            .Columns(columns =>
                {
                    columns.Bound(p => p.Id).Groupable(false);
                    columns.Bound(p => p.Name);
                    columns.Command(command => { command.Custom("Edit Unit"); }).Width(160);
                })
                .Groupable()
                .Pageable()
                .Sortable()
                .Scrollable()
                .Filterable()
                )
        </div>
    </div>

Populating the grid when the page is loaded is no problem, but I'd like to update my grid with a new list of units whenever the user clicks the checkbox. Any help would be appreciated :)

[Dimiter Madjarov]

Hi Nicklas,


To refresh the Grid, when a checkbox is checked you could bind to it's change event and call the read method of the Grid's dataSource.
E.g.

<input type="checkbox" name="refresh" id="refresh" />
<script>
    $("#refresh").change(function () {
        if ($(this).is(':checked')) {
            var grid = $("#Grid").data("kendoGrid");
            grid.dataSource.read();
        }
    });
</script>

Please let me know if this was the information that you were looking for.

 

Regards,
Dimiter Madjarov
the Telerik team

[Nicklas]

Thanks for getting back to me! I should mention that there's a need to pass along the true / false value provided by the checkbox as well, in order to make a decision in the controller based on the current selection. Will try this tomorrow, when I get back in to work :)

[Nicklas]

Actually, I'm not able to make this work :(

Allthough, I'm more interested in trying a different approach when checking the box. Is it possible to "dim" certain rows (make them light gray-ish or similar, but still clickable) based on a property in my model? It returns list of units, which holds a property called bool Disabled { get; set; }.

So far, I've not been able to get this to work, but ended up styling the individual row using the row.HtmlAttributes. My code looks like this now;

<div class="span12">
    <div class="k-block">
        <div class="k-header">Unit List</div>

        @(Html.Kendo().Grid(Model.UnitTypes)
              .Name("Grid")
                      .RowAction(row =>
                          {
                              if (row.DataItem.Disabled)
                              {
                                  // row.HtmlAttributes setting here
                              }
                          })
              .Columns(columns =>
                  {
                      columns.Bound(p => p.Id).Groupable(false);
                      columns.Bound(p => p.Name);
                      columns.Bound(p => p.Disabled);
                      columns.Command(command => { command.Custom("Edit Unit"); }).Width(160);

                  })
              .Groupable()
              .Pageable()
              .Sortable()
              .Scrollable()
              .Filterable())
    </div>

Is there no other way of connecting the data, and rendering a custom row based on a condition (In this case: if (p.Disabled == true) { render all items and make the disabled items in a different color }
?

[Dimiter Madjarov]

Hello Nicklas,


Indeed the correct way to apply custom styles in a Grid with a server binding based on some property value is via the RowAction method.
E.g.

.RowAction(row =>
{
    if (<condition>)
    {
        row.HtmlAttributes["class"] = "dim";
    }
})

Please let me know if this approach is applicable in the current scenario. If that is not the case, please provide some additional information so I could assist you further.

 

Kind regards,
Dimiter Madjarov
the Telerik team

[Nicklas]

Hi,

Thank you for your reply. Can this 'issue' not be solved by using templates? Or is templates something one would use when wanting user defined rows with more content, like in your grid examples found here: http://demos.kendoui.com/web/grid/rowtemplate.html ?

[Dimiter Madjarov]

Hello Nicklas,


If in the current scenario the rows will differ from each other only in the CSS class, I would suggest you to stick with the current approach. If you want to customize the look of the rows even further, for example with tables or images, you could use the Row Template.You could find a demo about server row templates in the examples solution included in your Kendo UI distribution.

 

Regards,
Dimiter Madjarov
the Telerik team

[Nicklas]

Thank you for your help, Dimiter!