Passing data from column to controller

[Bradley]

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

[Georgi]

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:

• https://docs.telerik.com/aspnet-core/html-helpers/data-management/grid/binding/ajax-binding

Regards,
Georgi
Progress Telerik

[Bradley]

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

[Georgi]

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

[VAN]

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

[Georgi]

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

[VAN]

It worked! Thanks you.