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

Grid DataSource additional parameters not calling specified function.

12 Answers 145 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Lane
Top achievements
Rank 1
Lane asked on 07 May 2018, 01:34 PM

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.

12 Answers, 1 is accepted

Sort by
0
Lane
Top achievements
Rank 1
answered on 07 May 2018, 05:38 PM
Nevermind, I figured it out. I was calling the read parameters "type" and "data" as parameters to the overall transport object, not read specifically. 
0
Dimitar
Telerik team
answered on 09 May 2018, 04:33 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Gx-Vision
Top achievements
Rank 1
answered on 09 Jan 2020, 11:00 AM

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

 

0
Dimitar
Telerik team
answered on 10 Jan 2020, 05:46 AM

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

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.
0
Gx-Vision
Top achievements
Rank 1
answered on 10 Jan 2020, 08:25 AM

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.

 

 

0
Dimitar
Telerik team
answered on 10 Jan 2020, 09:34 AM

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

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.
0
Gx-Vision
Top achievements
Rank 1
answered on 10 Jan 2020, 10:25 AM

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.

 

0
Dimitar
Telerik team
answered on 13 Jan 2020, 08:53 AM

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

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.
0
Gx-Vision
Top achievements
Rank 1
answered on 13 Jan 2020, 10:21 AM
Can you give me the link to the separate support thread?
0
Dimitar
Telerik team
answered on 14 Jan 2020, 06:29 AM

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

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.
0
Gx-Vision
Top achievements
Rank 1
answered on 14 Jan 2020, 07:21 AM

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.

0
Dimitar
Telerik team
answered on 14 Jan 2020, 11:12 AM

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

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.
Tags
Data Source
Asked by
Lane
Top achievements
Rank 1
Answers by
Lane
Top achievements
Rank 1
Dimitar
Telerik team
Gx-Vision
Top achievements
Rank 1
Share this question
or