Grid DataSource Data function call

[Joel]

In my current grid definition (below) below the <script type="text/javascript"> line, I go through and define some variables in the JavaScript that are populated from Properties in my Model.  This works for me but I would like to refactor the code to be more simple.  

Refactor 1:

I would like to pull the values directly from my model so it is just a single call.  What kind of object do I return from my @Model.GetDataValues() method that would satisfy the Grid.DataSource.Data call?

            function getData() {
                return @Model.GetDataValues();
            }

Refactor 2:

What would even be cleaner is to not call the JavaScript function at all.  What kind of object do I return from my @Model.GetDataValues() method that would satisfy the Grid.DataSource.Data parameter directly?

                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Read(read => read.Action("IndexJson", "Users")
                        .Data(@Model.GetDataValues()))

My Grid Definition:

        @(Html.Kendo().Grid<Person>()
                    .Name("grid")
                    .Columns(columns =>
                    {
                        columns.Command(command => command
                          .Custom("Detail")
                          .Click("goDetail"))
                          .Width(Glossary.Portal.ButtonWidth);
                        columns.Bound(p => p.FirstName)
                          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                              .ShowOperators(false)
                              .SuggestionOperator(FilterType.Contains)));
                        columns.Bound(p => p.LastName)
                          .Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")
                              .ShowOperators(false)
                              .SuggestionOperator(FilterType.Contains)));
                    })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
                    .HtmlAttributes(new { style = "height:550px;" })
                    .DataSource(dataSource => dataSource
                        .Ajax()
                        .PageSize(20)
                        .Read(read => read.Action("IndexJson", "Users")
                        .Data("getData"))
              ))

        <script type="text/javascript">

            var customerId = Number(@Model.GetValue(Glossary.Models.Customer.Keys.Id));
            var customerUniqueId = '@Model.CustomerUniqueId';
            var groupId = Number(@Model.GetValue(Glossary.Models.Group.Keys.Id));
            var sessionId = Number(@Model.GetValue(Glossary.Models.Session.Keys.Id));
            var personId = Number(@Model.GetValue(Glossary.Models.Person.Keys.Id));

            function getData() {
                return {
                    customerId: customerId,
                    customerUniqueId: customerUniqueId,
                    groupId: groupId,
                    sessionId: sessionId,
                    personId: personId
                };
            }

...

 

[Alex Hajigeorgieva]

Hello, Joel,

If you would like to send the model as an additional data, the Data() method is the way to go.

If you prefer to intercept the full entity, let us imaging that this is the model:

public IActionResult Index()
		{
            var customer = new Customer() 
            {
                Id = 12,
                Address = "Sofia",
                FirstName = "John",
                LastName = "Doe",
                PhoneNumber = "08824547788"            
            };
           // grid is in this view
	    return View(customer);
}

The, you can send the model as follows:

.Read(r => r.Action("Orders_Read", "Grid").Data("additionalData"))
<script>
   function additionalData(e) {
      return @Html.Raw(Json.Serialize(Model));
    }      
</script>

The other overload that the Data() method accepts is (System.Func<System.Object,System.Object> handler) which means this inline syntax

.Read(r => r.Action("Orders_Read", "Grid").Data(@<text>@Html.Raw(Json.Serialize(Model))</text>))

This would serialize the additional data as an object as opposed to a function:

"transport": {
                "read": {
                    "url": "/Grid/Orders_Read",
                    "data": {
                        "Id": 12,
                        "Address": "Sofia",
                        "PhoneNumber": "08824547788",
                        "FirstName": "John",
                        "LastName": "Doe"
                    }
                },
                "prefix": ""
            },

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Joel]

Interesting... I'll give these a try.

[Joel]

This is much cleaner.  My GetIndexData creates name/value pair Json:

            function getData() {

                return @Html.Raw(Model.GetIndexData());
            }