This is a migrated thread and some comments may be shown as answers.

Grid DataSource Data function call

3 Answers 26 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Joel asked on 14 Feb 2020, 07:36 PM

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
                };
            }

...

 

3 Answers, 1 is accepted

Sort by
0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 19 Feb 2020, 02:11 PM

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

Get quickly onboarded and successful with Telerik UI for ASP.NET Core with the dedicated Virtual Classroom technical training, available to all active customers.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 19 Feb 2020, 02:57 PM
Interesting... I'll give these a try.
0
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
answered on 20 Feb 2020, 06:50 PM

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

            function getData() {

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

 

Tags
Grid
Asked by
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Answers by
Alex Hajigeorgieva
Telerik team
Joel
Top achievements
Rank 1
Veteran
Iron
Iron
Share this question
or