[Solved] onRowSelect(e) data rebinding

[Gerard Eikelboom]

Hi,
We use the telerik Grid: databinding Ajax()

.DataBinding(dataBinding => dataBinding.Ajax().Select(

 

"_AjaxDataBinding", "Voorraad"))

 

 I use also

.ClientEvents(events => events.OnLoad(

 

"onRowSelect"))

 

here I figure out wich cell I select (press).
eg. cell 1 I have a textbox where I can fill out a number
when user press button in cell 2 I will do:

$.ajax({

type:

 

"POST",

 

url:

 

"/Koop/KoopPlaatsen",

 

data: ({

 

'lstregId': BestelKoopVelden[3], 'prijs': BestelKoopVelden[2], 'koopAantal': BestelKoopVelden[0]

 

}),

dataType:

 

"json",

 

success:

 

function (notification) {

 

setNotification(notification);

},

error:

 

function (req, status, error) {}

 

Numbers wich you see in the grid will change at the backend after the button click (database).
 So when I do a rebind in method
setNotification(notification);
 

 

 

var grid = $('#VoorraadGrid').data('tGrid');

 

grid.rebind();

nothing happens because in the front there are no changes yet.

So I need to do a totally new Ajax bind in method  onRowSelect(e)
Am I correct and you have an idea how to achive this?

Regards,
Gerard

 

[Atanas Korchev]

Hello Gerard Eikelboom,

 Calling the rebind method is supposed to rebind the grid. It should cause a new Ajax request which will retrieve the new data. I am really not sure why this does not work in your case. Could you please provide a sample project demonstrating the case?

Regards,
Atanas Korchev
the Telerik team

[Gerard Eikelboom]

Hi Atanas,
What I can do is give you pieces how we build the grid in the view and controller. So hopefully you get an idea what we are doing.
first the Grid (view):

 

<%= Html.Telerik().Grid<Fleura.Feelflorist.Models.ViewModels.ActueleVoorraadViewModel>()

.Name("VoorraadGrid")

.ClientEvents(events => events.OnRowSelected("onRowSelected"))

.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))

.ClientEvents(events => events.OnLoad("onRowSelect"))

.Columns(columns =>

{

columns.Bound(v => v.BesteldAantal).Width(70)

.ClientTemplate(Html.TextBox("BesteldAantal",string.Empty, new { @class = "besteldaantal"}).ToString());

columns.Bound(v => v.Koop).Width(45)

.ClientTemplate("<input type='button' value=' ' text='BesteldAantal' class='koopbutton'/>");

columns.Bound(v => v.Bestel).Width(30)

.ClientTemplate("<input type='button' value=' ' text='BesteldAantal' class='bestelbutton'/>");

columns.Bound(v => v.LstregID).Hidden(true)

.HeaderHtmlAttributes(new { @style = "display: none" });

columns.Bound(v => v.AanregID).Hidden(true)

.HeaderHtmlAttributes(new { @style = "display: none" });

})

.DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxDataBinding", "Voorraad"))

.Sortable(sorting => sorting

%>

I left out some columns and other things.

 

My controller for _AjaxBinding is standard:

 

[GridAction]
        public ActionResult _AjaxDataBinding()
        {

            ActueleVoorraadViewModel myVoorraad = new ActueleVoorraadViewModel();
            IEnumerable<ActueleVoorraadViewModel> VoorraadCollection = new List<ActueleVoorraadViewModel>();
            try
            {
                                    VoorraadCollection = myVoorraad.getActueleVoorraad(UserID,WebshopID,true);

            }
            catch (Exception ex)
            {             }

            return View(new GridModel(VoorraadCollection));

        }

In the onRowSelected:

function onRowSelect(e) {

            //get row info

            $('tr', this).live('click', function (e) {

                var row = this;

                //get cell info

                $('td', this).live('click', function (e) {

                    var cell = this;

                    var BestelKoopVelden = getBestelVelden(row);

                    //We do an order

                    if (cell.cellIndex == 11) {

                        if (!isNaN(BestelKoopVelden[0]) && BestelKoopVelden[4] != 0) {

                            var bestelrij = document.getElementById(row.rowIndex);

                            var offset = getPosition(bestelrij);

  

                            $("#BestelAantal").val(BestelKoopVelden[0]);

                            leftVal = offset[0] + 20 + "px";

                            topVal = offset[1] + "px";

                            $("#popupbestelbox").css({ 'left': leftVal, 'top': topVal, 'position': 'fixed' }).show();

                            return false;

                        }

                    }

                    else {

                        //We buy directly                        
                        if (cell.cellIndex == 10) {

                            if (!isNaN(BestelKoopVelden[0]) && BestelKoopVelden[1] > 0 && BestelKoopVelden[0] <= BestelKoopVelden[1] && BestelKoopVelden[3] != 0) {

                                $.ajax({

                                    type: "POST",

                                    url: "/Koop/KoopPlaatsen",

                                    data: ({ 'lstregId': BestelKoopVelden[3], 'prijs': BestelKoopVelden[2], 'koopAantal': BestelKoopVelden[0]

                                    }),

                                    dataType: "json",

                                    success: function (notification) {

                                        setNotification(notification);

                                    },

                                    error: function (req, status, error) {

                                        alert("something went wrong with the bought, please try again or contact your administrator");

                                    }

                                });

                                return false;

                            }

                        }

                    }

                });

            });

        }

When cell.cellIndex == 10
I go to the koop controller class.
 

public JsonResult KoopPlaatsen(string lstregId, string prijs, string koopAantal)
        {
            try
            {
                BestelKoop.KoopProduct(Convert.ToInt32(lstregId), Convert.ToInt32(koopAantal), Convert.ToDecimal(prijs), webshopId, userId, false);
            }
            catch (Exception ex)
            {
                if (log.IsErrorEnabled) { log.ErrorFormat("An error occured @t KoopPlaatsen for user:{0}, id:{1}, error:{2}", User.Identity.Name, Session["UserID"], ex); }
            }
            return Json(string.Empty);
        }

In the end I have the notificatio class:

 

 

 

function setNotification(notification) {


    var grid = $('#VoorraadGrid').data('tGrid');

    grid.rebind();

    }

I hope it's usefull to u.
Thanks in advance.
Gerard

 

[Atanas Korchev]

Hello Gerard Eikelboom,

 Unfortunately this code does not indicate what the problem may be. I suggest you check with the debugger if the _AjaxDataBinding method is being invoked after calling rebind(); If it is invoked you can check what the data is and if it is already updated or not. 

Regards,
Atanas Korchev
the Telerik team

[Gerard Eikelboom]

Thank you Atanas,
Your last part tricked me.
i checked after the rebind() the _Ajaxbinding.
It was hit so that's good.
What we use is a sinck for our database. So data I get directly again is not in our database yet (takes a vew sec to get the updated data).
So everything works as it should be.
Thank you.

Regards,
Gerard