Grid DataSource additional parameters not calling specified function.

[Lane]

Hi,

I have a grid with transport.read.data specified to a javascript function to call. This isn't working as it doesn't ever call the function in javascript. Any help here would be great.

            $("#mailingListGrid").kendoGrid({
                dataSource: {
                    autoBind: false,
                    transport: {
                        read: "@Url.Action("GetCustomersJson", "MailingList")",
                        type: "jsonp",
                        data: additionalData
                    },
                    pageSize: 40,
                    schema: {
                        id: "KeyCustomer",
                        model: {
                            fields: {
                                CustomerName: { field: "CustomerName", type: "string" },
                                CustomerContact: { field: "CustomerContact",type: "string" },
                                ShipAddress1: { field: "ShipAddress1",type: "string" },
                                ShipCity: { field: "ShipCity",type: "string" },
                                ShipState: { field: "ShipState",type: "string" },
                                ShipZipCode: { field: "ShipZipCode",type: "number" },
                                IsShipTo: { field: "IsShipTo",type: "number" },
                                IsBillTo: { field: "IsBillTo",type: "number" },
                                KeySalesOrg: { field: "KeySalesOrg",type: "number" },
                                KeySendBillsTo: { field: "KeySendBillsTo",type: "number" },
                                DoubleUnitsBooked: { field: "DoubleUnitsBooked",type: "number" },
                                SingleUnitsbooked: { field: "SingleUnitsBooked",type: "number" }
                            }
                        }
                    }
                },
                height: 550,
                sortable: true,
                noRecords: {
                    template: "Please Select a Name to continue"
                },
                pageable: true,
                selectable: false,
                columns: [{
                    template: "<div" +
                    "style='');'><input class='checkboxSelector' type=\"checkbox\"/></div>",
                    field: 'field', headerTemplate: "<input id='checkboxHeader' onclick='checkAll()' type='Checkbox'/>",
                    width: 50,
                    sortable: false,
                }, {
                    field: "CustomerName",
                    title: "Customer Name",
                    width: 240
                }, {
                    field: "ShipAddress1",
                    title: "Address"
                }, {
                    field: "ShipCity",
                    title: "City"
                }, {
                    field: "ShipState",
                    title: "State",
                    width: 150
                }, {
                    field: "ShipZipCode",
                    title: "Zip Code"
                }],
                change: function (e, args) {
                    var grid = e.sender;
                    var items = grid.items();
                    items.each(function (idx, row) {
                        var idValue = grid.dataItem(row).get(idField);
                        if (row.className.indexOf("k-state-selected") >= 0) {
                            selectedOrders[idValue] = true;
                        } else if (selectedOrders[idValue]) {
                            delete selectedOrders[idValue];
                        }
                    });
                },
                dataBound: function (e) {
                    var grid = e.sender;
                    var items = grid.items();
                    var itemsToSelect = [];
                    items.each(function (idx, row) {
                        var dataItem = grid.dataItem(row);
                        if (selectedOrders[dataItem[idField]]) {
                            var currentRow = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']");
                            currentRow.toggleClass('k-state-selected');
                            currentRow.find('input:checkbox').prop('checked', 'checked');

                            itemsToSelect.push(row);
                        };
                    });

                    //e.sender.select(itemsToSelect);
                },
            });

 

        function additionalData() {
            var value = $("#dsmList").data("kendoDropDownList").value();
            return { dsm: value };
        };

 

Not sure what exactly is going wrong here. Any help is appreciated.

[Lane]

Nevermind, I figured it out. I was calling the read parameters "type" and "data" as parameters to the overall transport object, not read specifically. 

[Dimitar]

Hello Lane,

Glad to hear that the issue faced is now resolved. Please refer to the DataSource's transport.read API Reference for additional information and examples on configuring remote data binding.

Regards,
Dimitar
Progress Telerik

[Gx-Vision]

Hi,

would someone of you mind to post the code to the solution. I am facing the same problem.

First i made the mistake to call "data" to the overall transport object, too. I understand now that i have to call "data" inside the read object. But i simply can't get it to work. Please help if possible.

Code (not working)

function eventFilter(element) {
        element.kendoDropDownList({
            dataSource: {
                transport: {
                    read: {

                        "@Url.Action("FilterMenuCustomization_Events", "Meldung")" ,

                         data: additionalParameter

                 }
                }
            },                    
                    optionLabel: "--Eventart wählen--"
    });
    }

 

[Dimitar]

Hello,

From the provided code snippet I can see that the url option is missing from the transport.read configuration:

read: {
  url: "https://demos.telerik.com/kendo-ui/service/products",
  data: additionalData      
}

In addition to the above, in order for the DropDownList to be bound correctly to the remote data, the dataTextField and dataValueFiled also have to be specified.

Regards,
Dimitar
Progress Telerik

[Gx-Vision]

Hi,

thank you for the reply. I don't understand this. In the API it says the URL is the site to which the request is sent. But i have a single site application.

The function "additionalParameter" is specified in the file ../Views/Home/Index.cshtml, so what is the url string in this case?

I have tried:

url:"~/Home/Index",

url: "http://~/Home/Index" and "https://~/Home/Index" none of them is working.

 

 

[Dimitar]

Hello,

The read url specified a remote end-point to which the DropDownList triggers an ajax request in order to retrieve the data that will be bound to the widget. That being said, the url that is set in the option should correspond to a service that returns JSON data. Check this Dojo example for reference. 

In terms of the additionalParameters function - this is a callback that allows additional parameters to be sent to the remote service when the DropDownList initiates the read request to the service. The related documentation can be found here.

In terms of the url that should be passed - from the provided information I assume that you are working on an ASP.NET MVC/Core project. If that is the case, then the url option should point to a controller end point that returns a list of records as JSON:

public JsonResult GetProducts()
{
  var northwind = new SampleEntities();

  var products = northwind.Products.Select(product => new ProductViewModel
  {
    ProductID = product.ProductID,
    ProductName = product.ProductName,               
  });
            
  return Json(products, JsonRequestBehavior.AllowGet);
}

If the above method is available in the HomeController, then the url could be passed as follows:

read: {
  url: "/Home/GetProducts",
}

Regards,
Dimitar
Progress Telerik

[Gx-Vision]

Well,

if I use:

read: url: "/Home/GetProducts"

instead of:

read: "@url.Action("GetProducts", Home)"

nothing happens at all.

I am getting a Json object returned from GetProducts() in the Home controller with the "@url.Action" - command. My Dropdownlist is working and it is filled with data, allready. But it is too much data and i need to call GetProducts() with additional parameters e.g. GetProducts(DateTime from, DateTime to). It simply will not pass the additional parameters to the function.

My code is like the first post in this thread. He didn't replace "@url.Action" with "url:", I think.

 

[Dimitar]

Hello,

I will need additional information regarding the exact implementation in order to troubleshoot the issue further. That being said, I have opened a separate support thread on your behalf where you could send me an isolated solution that demonstrates the issue and continue our communication.

Regards,
Dimitar
Progress Telerik

[Gx-Vision]

Can you give me the link to the separate support thread?

[Dimitar]

Hello,

I have created the thread on your behalf, thus you should be able to access it from your Telerik Profile or here.

Regards,
Dimitar
Progress Telerik

[Gx-Vision]

Hi,

I couldn't find it anywhere in my profile. And I can't reach the link you have posted (see screenshot). I will try to open a support thread myself and post the files there.

[Dimitar]

Hi,

I apologize for providing an incorrect link to the thread in my previous reply.

I have verified that the thread is in the correct category and you should be able to access it from your Telerik Profile. Alternatively, open the following link to the correct thread. In addition to this, a message is sent in the thread, therefore an email should already be sent to the specified account email.

Regards,
Dimitar
Progress Telerik