I am creating a portal/dashboard page that allows the user to put the same "widget" on the screen more than once. The widgets may contain a kendoUI grid. Also, the widget may contain additional controls such as a check box that is needed when the grid is refreshed. However, since there are multiple instances of the same widget on the page the same function is called for additional data.
I am using MVC helper to create the grid such as:
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Batch(true)
.ServerOperation(false) //client side sort
.Read(read => read.Action("AjaxGridRead", "TodaysTransferSnapin").Data("IncludeFutureTransfer("+ViewBag.snapinId+")"))
.Sort(sort => sort.Add(m => m.Bldg).Ascending())
)
However, it seems like no argument is passed to TodaysTrasnferSnapin to identify which grid/datasource made that call.
I have attempted to pass the gridname (which is unique on the page even with multiple instances) however, the causes the function to run and now the return value is just a static object.
I also attempted to have the TodaysTransforSnapin return a function using a closure to store the passed value, like this:
function IncludeFutureTransfer(snapinid) {
return function() {
var snapin$ = $(".widget[data-snapin-id='" + snapinid + "']");
//this function is called/used by the "read" action of the kendo grid for todays Transfers.
return {
IncludeFuture: $("#cbFutureTransfer", snapin$).is(":checked"),
snapinId: snapinid
}
};
That seems to work on initial grid bind, but after that, it errors out once again. It doesn't call the function but seems to try to evaluate the jQuery expression in the return rather than the full function on later syncs().
I was thinking I could maybe add the data() function in javascript somehow using a razor created function that just hard codes the jQuery scope for the query controls (checkbox,etc) but I don't see a way to do that.
How do I know what grid is calling the additional data function? Any ideas or suggestions appreciated.