How to pass parameters to the dataSource.read() method

[Marion]

I have a dialog that has two linked listboxes:

@(Html.Kendo().Dialog()
        .Name("dlgEdit")
        .Title("Edit Batch")
        .Content("<div style='display: flex; flex-direction:row; align-content:flex-start; align-items:stretch;' style='width:100%;'>" +
            "<div style='display: flex; flex-direction: column; align-content:flex-start; width:48%; margin-right: 8px;'>" +
            "<h3>Department Keys</h3>" +
            "<div><input id='editSearch' type='text' placeholder='Search department keys' style='height: 28px; margin: 0; padding: 0;' onkeyup='filterDepts()'/>" +
            "<img src='" + @Url.Content("~/Images/x-mark.png") + "' style='width: 12px; margin-left: 4px; cursor: pointer;' onclick='filterClear()' /></div>" +
            Html.Kendo().ListBox()
                .Name("optional")
                .DataValueField("Value")
                .DataTextField("Text")
                .DataSource(source => source
                    .Custom()
                    .Transport(transport => transport
                        .Read(read => read
                            .Action("GetDepartments", "CouncilReport")
                        )
                    )
                )
                .DropSources("selected")
                .BindTo(new List<SelectListItem>())
                .Draggable(true)
                .Selectable(ListBoxSelectable.Single)
                .HtmlAttributes(new { title = "Department Keys", style = "flex: 1; width: 100%; margin-top: 8px;" })
                .ConnectWith("selected") + "</div>" +
            "<div style='flex: 1; display: flex; flex-direction: column; align-content:flex-start; padding: 0;'>" +
            "<h3>Batch Details</h3>" +
            "<form id='editForm'>" +
            "<input id='editDesc' type='text' placeholder='Batch name' style='height: 28px; margin: 0; padding: 0;' />" +
            "<input id='editId' type='hidden' />" +
            Html.Kendo().ListBox()
                .Name("selected")
                .DataValueField("Value")
                .DataTextField("Text")
                .Draggable(true)
                .DataSource(source => source
                    .Custom()
                    .Transport(transport => transport
                        .Read(read => read
                            .Action("GetBatchDepts", "CouncilReport")
                    )
                )
            )
            .DropSources("optional")
            .ConnectWith("optional")
            .HtmlAttributes(new { title = "Selected Keys", style = "width: 100%; height: 500px; margin-top: 8px;" })
            .BindTo(new List<SelectListItem>())
            .Selectable(ListBoxSelectable.Single) +
        "</form></div></div></div>"
    )
    .Width(1000)
    .Modal(true)
    .Visible(false)
    .Actions(actions =>
    {
        actions.Add().Text("Cancel");
        actions.Add().Text("OK").Primary(true).Action("onOkEdit");
    })
)

When I open the dialog I call a read() to reset the listboxes for the selected batch:

        var treeview = $("#treeview").data("kendoTreeView");
        var selected = treeview.select();
        var data = treeview.dataItem(selected);

        $("#editSearch").val("");
        $("#editId").val(data.id);
        $("#editDesc").val(data.Description);
        var opt = $("#optional").data("kendoListBox");
        var sct = $("#selected").data("kendoListBox");
        sct.dataSource.read();
        opt.dataSource.read({ id: data.id });
        $("#dlgEdit").data("kendoDialog").open();

Notice that I am passing the id into the read() method at this line:

opt.dataSource.read({ id: data.id });

I must not have something right because the parameter is never used and I get an error 500 from the server because there was no parameter passed to the action "GetBatchDepts".

Can someone please help me see what I am doing wrong?

 

 

[Georgi]

Hello Marion,

Please make sure that data.id has a value. Furthermore configure the ListBox to not bind automatically, because when it binds automatically it does not send any parameter to the Action and it will cause NullReferenceExcetion on the server.

Also the .Data method can be used to pass additional data to Action methods. Check out the link bellow for detailed information about .Data method.

http://docs.telerik.com/aspnet-mvc/helpers/grid/binding/ajax-binding#pass-additional-data-to-action-methods

Another solution for the NullReferenceException is to define default value for the parameter either on the server or the client.

If the issue persists although data.id is not null and the AutoBind property is set to false or has a default value, please send me the project or a sample where the issue occurs so I can debug it locally and help you more efficiently.
 

Regards,
Georgi
Telerik by Progress

[Marion]

Thank you for your help. I was able to get it working the way I want by putting a function name in the .Data and then I wrote a JS function to fetch the data from a hidden field. It works great now.