1

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.

PilotBob
  • 3,107
  • 7
  • 35
  • 52

1 Answers1

1

The Data Source can be used by multiple widgets, so it can't reliably tell which widgets are using it. There is a bit of a hack to get this with a dataSource event though.

Try binding to one of the dataSource events and follow the updated answer in this post. Get a reference to Kendo Grid from inside the error handler


It seems I have miss understood your question.

Why can't you just bind to the data bound event of each grid? The data bound event is called when you read via the dataSource or you manually bind data to the dataSource. http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

The this keyword in the event handler for any Grid events should be set to the widget instance.

Events for the dataSource will contain only a reference to the dataSource. As I stated before there is no real way to get the widget from the dataSource. The previous listed method requires unique dataSources.

Community
  • 1
  • 1
  • I only show the datasource config of a grid. Does that still apply? – PilotBob Nov 12 '14 at 17:18
  • I need to pass addition data when the grid is refreshed. With MVC this is done by providing a functionName. But, with the razor helpers that function has to be in the global namespace. Is there a way to attach to the additional data after the grid is initialized? It seems like the data config item of the datasource isn't actually an event. – PilotBob Nov 14 '14 at 16:43
  • databound it too late to add additional data. Is there a way in the dataBinding event to set the data value of the dataSource? – PilotBob Nov 14 '14 at 16:45
  • Sounds like that would a be a recursive call. If you are needing to manipulate/add data to your data calls between renderings then the best course of action is to handle all the ajax calls yourself. Kendo is not really set up to get data, then do something with it, then render it. Every time you set the data in the dataSource (whether with a read or manually) it should re-render the data. Instead of the normal tactic of letting Kendo handle your data, remove your dataSource entirely. Kendo will make a default dataSource with your model. You can add your own data with the manual data() function – Jonathan Buchanan Nov 17 '14 at 17:33
  • It's not recursive at all. I guess I'm not giving enough info in my question. – PilotBob Nov 17 '14 at 21:03
  • Oh I see. Your trying to append extra data to your request and to have that data change based on the param in the JS function. I the documentation does not show how to do that with the MVC binding and all my own experiments have failed. http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/ajax-binding – Jonathan Buchanan Nov 17 '14 at 22:25
  • Yes exactly. I found a way to work around this, because you can pass an object to the read() method that is passed with the post. Not as convenient, but it works. – PilotBob Nov 18 '14 at 17:39