How to pass parameters to the dataSource.read() method
1 Answer 997 Views
Marion
Top achievements
Rank 1
Marion asked on 17 May 2017, 07:30 PM

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?

 

 

1 Answer, 1 is accepted

Sort by
0
Georgi
Telerik team
answered on 19 May 2017, 12:31 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.

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.

 

- by
Marion
Top achievements
Rank 1
on 19 May 2017, 01:48 PM
Asked by
Marion
Top achievements
Rank 1
Answers by
Georgi
Telerik team
Share this question
or