Grid DataSource Data function call

4 posts, 1 answers
  1. Joel
    Joel avatar
    207 posts
    Member since:
    Jun 2018

    Posted 14 Feb 2020 Link to this post

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

    ...

     

  2.
  3. Answer
    Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1082 posts

    Posted 19 Feb 2020 Link to this post

    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.
  5. Joel
    Joel avatar
    207 posts
    Member since:
    Jun 2018

    Posted 19 Feb 2020 in reply to Alex Hajigeorgieva Link to this post

    Interesting... I'll give these a try.
  7. Joel
    Joel avatar
    207 posts
    Member since:
    Jun 2018

    Posted 20 Feb 2020 Link to this post

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

                function getData() {

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

     

  8.
Back to Top