Passing data from column to controller

7 posts, 0 answers
  1. Bradley
    Bradley avatar
    10 posts
    Member since:
    Feb 2019

    Posted 01 May 2019 Link to this post

    Hello,

     

    I'm trying to utilize some server side filtering as we have a lot of records to filter through and it doesn't make too much sense to do it on the client side.

    @(Html.Kendo().Grid<SM.Domain.Med.Explant>()
            .Name("grid").Scrollable(c => c.Enabled(true).Height(1000))
            .DataSource(dataSource => dataSource
                .Ajax()
                .Read(read => read.Action("ExplantKendoInitializer", "MedDevice", new { status = Model.Status }).Data("explantsReadData"))
                )
            .Columns(columns =>
            {
                columns.Bound(c => c.Device.DeviceType.Name)
                    .Width(180)
                    .Title("Type")
                    .HtmlAttributes(new { id = "typeDropdown" })
                    .Filterable(filterable => filterable
                            .Cell(cell => cell
                                .DataTextField("Name")
                                .ShowOperators(false)
                                .InputWidth(170)
                                .Operator("contains")
                                .SuggestionOperator(FilterType.Contains)
                                .Template("deviceTypeFilter")
                            )
                        );
     
    .Filterable(filterable => filterable
                .Extra(false)
                .Messages(m => m.Info("Items equal to:"))
                .Operators(operators => operators
                .ForString(str => str.Clear()
                    .IsEqualTo("Is Equal To")
                    .Contains("Contains")
                )

    This is the bulk of what most of the grid looks like.

    Below is the explantsReadData function that I am referencing in the .Read portion of the DataSource

    function explantsReadData() {
                return {
                    type: $('#typeDropdown')
                };
            }

     

    And the filterable function that we are using if that is of any help.

    function deviceTypeFilter(element) {
                element.element.kendoDropDownList({
                    dataSource: @(Html.Raw(Json.Serialize(Model.Filters.DeviceTypes))),
                    optionLabel: "--Select Device Type--",
                });
            }

    I'm trying to pass the parameter into the ExplantKendoInitializer where I am making a DataSourceRequest. However type always returns as null. I'm not sure of the best way to set an Id or Name to the drop down list which has all of what I need to filter against.

     

    If there is something I'm missing, or a better way to approach this, please let me know.

     

    Be well,

    Bradley

  2. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 06 May 2019 Link to this post

    Hi Bradley,

    I believe the value is always null because you return a jQuery object - not a string and therefore the mvc binder fails to parse the value.

    e.g.

    function explantsReadData() {
                return {
                    type: $('#typeDropdown')
                };
            }

    I assume that you are trying to return the value of the element.

    e.g.

    function explantsReadData() {
                return {
                    type: $('#typeDropdown').val()
                };
            }

    It's worth mentioning that by default when the dataSource of the grid is configured for ajax binding as in your case, the grid will use server operations. Please refer to the following article for further information:



    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Bradley
    Bradley avatar
    10 posts
    Member since:
    Feb 2019

    Posted 06 May 2019 in reply to Georgi Link to this post

    Thank you for the reply. I'm still receiving null when I have .val() attached.

     

    But I guess that is irrelevant if I there is always serverside filtering. So is the only good reason to pass any parameters to the method with DataSourceRequest to prefilter the grid upon load?

     

    Be well,

    Bradley

  4. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 09 May 2019 Link to this post

    Hi Bradley,

    Are you sure that the name of the parameter in the action matches the name of the sent from the client parameter (`type`)? Furthermore, the binder might fail to bind when the name of the parameter is a reserved word. As there is a class in .Net called `Type` this name might not be allowed. Could you please test to change the name?

    Regarding the additional parameter - yes, the main idea is to prefilter the data or send any data that the server requires to send a response (for example a forgery token).


    Regards,
    Georgi
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  5. VAN
    VAN avatar
    2 posts
    Member since:
    May 2018

    Posted 04 Mar 2020 Link to this post

    Hi Georgi,

    I have a similar but a bit different issue: I am using ASP.NET MVC Grid and want to pass 2 DateTimePicker values to controller using Ajax on starting up the cshtml page, or click Refresh button to refresh the grid. The DateTimePicker values always return null.

    Pleas help. Thanks

     

    1. Grid:

    .DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("ReadAllOrdersAsync", "Order",
        new {  fromDate= "#=getFromDate()#", toDate= "#=getToDate#" }

     

    2. Controller:

    public async Task<ActionResult> ReadAllOrdersAsync([DataSourceRequest]DataSourceRequest request,
    string fromDate, string toDate)
    {

    // fromDate and toDate always null when passing in from the grid

    }

     

    3. Functions to get dates from DateTimePicker 

    function getFromDate() {
    var start = $("#dtpFrom").data("kendoDateTimePicker");
    var fromDate = kendo.toString(start.value(), 'g');
    return fromDate;
    }

     

    function getToDate() {
    var start = $("#dtpTo").data("kendoDateTimePicker");
    var toDate = kendo.toString(start.value(), 'g');

    return toDate ;
    }

  6. Georgi
    Admin
    Georgi avatar
    695 posts

    Posted 09 Mar 2020 Link to this post

    Hi VAN,

    Please note that with the current configuration only the getFromDate function will be executed once during the initialization of the grid.

    Instead I would suggest you to switch to the Data handler instead.

    e.g.

    .DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read.Action("ReadAllOrdersAsync", "Order").Data("additionalData")
    
    // handler
    
    function additionalData(){
        return {
            fromDate: getFromDate(),
            toDate: getToDate()
         }
    }

    Regards,
    Georgi
    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.
  7. VAN
    VAN avatar
    2 posts
    Member since:
    May 2018

    Posted 11 Mar 2020 in reply to Georgi Link to this post

    It worked! Thanks you.
Back to Top