GridOperationMode.Client and rebind()

[Michal]

Hi,
I have grid with Ajax binding and GridOperationMode.Client and a few telerik DropDownLists cascading binded via onChange events and ajax bindings. The last child in this cascade is grid. The last dropDownList call rebind on grid whith parameters. First databinding is correct, the next one not. Rebind is not working with GridOperationMode.Client. But with GridOperationMode.Server works everything well. Can you help me? my View:

Poisťovňa: 
    @(Html.Telerik().DropDownList()
    .Name("ddl_Poistovna")
    .DataBinding(binding => binding.Ajax().Select("_PoistovneLoad", "Home"))
    .ClientEvents(events => events.OnChange("onDDL_PoistovnaChange"))
)
Kampaň: 
    @(Html.Telerik().DropDownList()
.Name("ddl_Kampan")
.DataBinding(binding => binding.Ajax().Select("_KampaneLoad", "Home"))
.ClientEvents(events => events.OnDataBinding("onDDL_KampanDataBinding")
                              .OnChange("onDDL_KampanChange"))
)
Obdobie: 
    @(Html.Telerik().DropDownList()
.Name("ddl_Obdobie")
.DataBinding(binding => binding.Ajax().Select("_ObdobiaLoad", "Home"))
.ClientEvents(events => events.OnDataBinding("onDDL_ObdobieDataBinding")
                              .OnChange("onDDL_ObdobieChange"))
)
<br />
@(Html.Telerik().Grid<Poistne.Web.Models.KmenModel>()
.Name("grid_Kmen")
.NoRecordsTemplate("Neexistujú žiadne záznamy.")
    .DataBinding(binding => binding.Ajax().OperationMode(GridOperationMode.Client).Select("_GridKmenLoad", "Home"))
.Columns(columns =>
{
    columns.Bound(k => k.ID);
    columns.Bound(k => k.PlatnostOd).Title("Platnosť od");
    columns.Bound(k => k.PlatnostDo).Title("Platnosť do");
    columns.Bound(k => k.Klient);
    columns.Bound(k => k.Poistovna).Title("Poisťovňa");
    columns.Bound(k => k.KampanID).Title("Kampaň ID");
    columns.Bound(k => k.Obdobie).Format("{0:MM/yyyy}");
})
.Pageable(pageing => pageing.PageSize(20))
)
<script type="text/javascript">
    function onDDL_PoistovnaChange(e) {
        var ddl = $("#ddl_Kampan").data("tDropDownList");
        ddl.reload();
    }
 
    function onDDL_KampanChange(e) {
        var ddl = $("#ddl_Obdobie").data("tDropDownList");
        ddl.reload();
    }
 
    function onDDL_ObdobieChange(e) {
        var grid = $("#grid_Kmen").data("tGrid");
        var ddl_kampan = $("#ddl_Kampan").data("tDropDownList");
        grid.rebind({ obdobie: e.value, kampanID: ddl_kampan.value()});
    }
 
    function onDDL_KampanDataBinding(e) {
        var ddl = $("#ddl_Poistovna").data("tDropDownList");
        e.data = $.extend({}, e.data, { id: ddl.value() });
    }
 
    function onDDL_ObdobieDataBinding(e) {
        var ddl = $("#ddl_Kampan").data("tDropDownList");
        e.data = $.extend({}, e.data, { id: ddl.value() });
    }
</script>

and my controller:

[HttpPost]
        public ActionResult _PoistovneLoad()
        {
            using (var db = new CAC_POISTNEEntities())
            {
                var poistovne = db.Poistovne.AsQueryable().Where(p => p.Aktivna);
                return new JsonResult { Data = new SelectList(poistovne.ToList(), "PoistovnaID", "Nazov") };
            }
        }
 
        [HttpPost]
        public ActionResult _KampaneLoad(int? id)
        {
            using (var db = new CAC_POISTNEEntities())
            {
                int ID = id ?? 0;
                var kampane =
                    db.Kampane.AsQueryable().Where(
                        k => k.Aktivna && k.RamcoveZmluvy.Aktivna && k.RamcoveZmluvy.PoistovnaID == ID);
                return new JsonResult { Data = new SelectList(kampane.ToList(), "KampanID", "NazovKampane") };
            }
        }
 
        [HttpPost]
        public ActionResult _ObdobiaLoad(int? id)
        {
            using (var db = new CAC_POISTNEEntities())
            {
                int ID = id ?? 0;
                var obdobia = db.KmenUCL.AsQueryable().Where(k => k.KampanID == ID).OrderBy(k => k.Obdobie).ToList().Distinct(new ObdobieComparer()).Select(k => new Models.ObdobieModel { Value = k.Obdobie, Description = k.Obdobie.ToString("MM / yyyy")});
                return new JsonResult { Data = new SelectList(obdobia, "Value", "Description") };
            }
        }
 
        [GridAction]
        public ActionResult _GridKmenLoad(DateTime? obdobie, int? kampanID)
        {
            using (var db = new CAC_POISTNEEntities())
            {
                if (obdobie == null || kampanID == null || kampanID == 0)
                    return View(new GridModel<Models.KmenModel>(){Data = null, Total = 0});
                else
                {
                    var polozky =
                        db.KmenUCL.AsQueryable().Where(
                            p =>
                            p.KampanID == kampanID && p.Obdobie.Year == ((DateTime) obdobie).Year &&
                            p.Obdobie.Month == ((DateTime) obdobie).Month).Select(
                                k =>
                                new Models.KmenModel
                                    {
                                        ID = k.KmenUclID,
                                        Klient = k.Klient,
                                        Poistovna = k.Poistovna,
                                        KampanID = k.KampanID,
                                        Obdobie = k.Obdobie,
                                        PlatnostOd = k.PlatnostOd,
                                        PlatnostDo = k.PlatnostDo,
                                        Poznamka = k.Poznamka
                                    });
 
                    return View(new GridModel<Models.KmenModel> {Data = polozky.ToList()});
                }
            }
        }

[Rosen]

Hi Michal,

Indeed, this is a limitation of current implementation of client operation mode. However, we were able to address it and I'm attaching an internal build for you to try.

Regards,
Rosen
the Telerik team

[MGrassman]

I have applied the patch but I still can't get the rebind or ajaxRequest to fire.

The only difference I can see in my code would be I have a tab strip loading grids via LoadContentFrom.  

Do you see this as being an issue?

Thanks,

[Rosen]

Hi Mgrassman,

Could you please provide a bit more information about your exact scenario, a small sample application will be appreciated.

Regards,
Rosen
the Telerik team

[Phil]

Hi,

I too found that when the grid is in client operation mode then the ajaxRequest method does not work.
I also discovered a quirk that if the grid is empty then (in client operation mode) it will do an ajax request.
I use this quirk to my advantage to force a grid reload in client operation mode within a function.

// Get a reference to the grid
var grid = $("#MyGrid").data("tGrid");

// In client operation mode the grid's ajaxRequest only works if data is empty so
// first empty data
grid.dataSource._data = [];

// then reload
grid.ajaxRequest();

[Shawn]

Thanks Phil this tip worked for me!

[Michel Corbin]

Thank Phil, it also work for me. Wow, what a cryptic hack! :)

[Phil]

Hi Sam, Glad you found this useful. Obviously you may need to weigh up possible future proofing considerations if Telerik update changes in control behaviour but it worked for me in my scenario.