Grid: Client Side vs Server Side

[Sam]

Hello,

So I have spent a bit of time working with this grid, and for the most part it is OK, but it seems that a lot of the functionality does not mingle between server vs client.

Can anybody please explain a few things to me:

1) What functions work when using client side binding vs what works when server side binding?
2) Customizing a cell color based on a business rule?
3) API docs seem to be pretty slim, is there a good reference out there that covers all aspects of the grid?

One other thing, how do I access the dataItem? Do you have to use client binding mode?

Seems like not all features are available in both modes.

Thanks,
Sam

[Henry]

Hi Sam,

I suggest to use server mode, because it's flexible, easy control, better performance, client independent... 

Henry

[Sam]

So can I use the Ajax features with the Server Mode?

What about conditional formatting?

Sam

[Dadv]

Hi,

Simplifying to the extreme :

In server side, you can give a first Model (on load Html.Telerik().Grid(Model)) and use the databinding for the other calls :

Server side you could have access to All but the client api (some part are usable but very few) :

- Full access to the Model
- Full access to the helpers
- You can use Template with conditional inside
- You can use all the helpers (html and ajax)
- You can give a first Model (on load Html.Telerik().Grid(Model)) and use the databinding for the other calls :  dataBinding.Server().Select("FirstLook", "Grid") 

- Not access to the client side dataItem

A lot of other thing, server side is the more flexible but not the most efficient (sorry Henry i'm in contradiction with your point of view for this) because it reload all the page each time.

Server side is recommend for really complex scenario with few client visual effect (multi-detailview with grouping and a lot of custom aggregate)

Client Side is divide in 2 part for me :

- Only the binding
- A lot of client side interaction (events)

If you only want some simple and speed binding, using ajax binding is a great an easy way :
Html.Telerik().Grid<Order>().DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxBinding", "Grid"))
The page is load without the data, then when all the page is load, ajax request is send to fill the grid. in the point of view of the user, the page load more quickly, data transmit from and to the server are really few (json only).

Other side if you want to have more client side interactivity, using client events give you a lot of choices :

OnColumnReorder - raised when a colum of the grid is reordered by the user
OnColumnResize - raised when a colum of the grid is resized by the user
OnDetailViewCollapse - raised when the user collapses a detail row
OnDetailViewExpand - raised when the user expands a detail row
OnDelete (cancellable) - raised when the user deletes a row
OnDataBinding (cancellable) - raised when the grid is requesting data
OnDataBound - raised when the grid is databound
OnEdit - raised when the user edits or inserts a row
OnError - raised when an error occurs during databinding
OnLoad - raised when the component is initialized
OnRowDataBound - raised when a row of the grid is databound
OnRowSelect - raised when a row is selected by the user
OnSave (cancellable) - raised when user saves a row

in addition of the external client side api you can do every sorts of things.

But this have a price to pay... 
Client template is only a "transfer" of a string to the client and then replace the <#= XX #> by the client dataitem
So you don't have access of the helpers dynamically, you need to execute them before the send to the client and transpose them in string , loosing lot of stuff in the transfer...
The most inconvenient one is the conditional part :
.ClientTemplate("<img alt=
<%if(<#=CustomerID#> == 5){%>'<#= CustomerID #>'<%}      <= This will not work
 src='"          + Url.Content("~/Content/Grid/Customers/") 
                    + "<#= CustomerID #>.jpg' />")
                .Title("Picture");
Like i told before, all the client template will be transmit to all conditionals and helpers 'as is' so the If statement will compare "<#= CustomerID#>" as a string not the value...

You can do some conditionals client part but you need to use events and modify the value on the fly after bound.

An other thing to do in difference between Server side and Client side (the event part not the binding part), security is a consideration too.

client side you don't have access to the user, roles etc.. and if you want to make some conditions client side on the roles for example, you need to transfer some important data causing security issue.

All of this is my point of view, and it is only my opinion.

In my case i use Ajax binding (no or really few events) and make my adaptation in the model (it's a bit his role ultimately) so i have a few client side part (only dynamic functionality like highlight, popup, etc)

Regards,

[Dadv]

"So can I use the Ajax features with the Server Mode? "

Indeed, you can, and in several ways.

The more common is this :
Html.Telerik().Grid(Model).DataBinding(dataBinding => dataBinding.Ajax().Select("_AjaxBinding", "Grid"))

The first load is done by server side (Model) and all other by Ajax.
Be careful if you have templates , you need to implement the 2, server template AND ClientTemplate ...

In theory you can alternate in the binding too:
Html.Telerik().Grid(Model)
        .Name("Grid")
        .ToolBar(commands => commands.Insert())
        .DataKeys(keys => keys.Add(c => c.CustomerID))
        .DataBinding(dataBinding =>{ dataBinding
            .Ajax()
                .Select("EditingServerSide", "Grid");
 dataBinding
            .Server()
                .Insert("Insert", "Grid")
                .Update("Save", "Grid")
                .Delete("Delete", "Grid");
}
)
        .Columns(columns =>
        {
            //omitted for brevity
        })

Didn't test, but should work.

"What about conditional formatting?"
Read my previous answer, if the conditional are only aesthetic consider the css/jquery part otherwise if the conditional are functional, it should be done server side (functional conditions in client side could be a security issue) often, this could be done directly in the model.