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

3 posts, 0 answers
  1. Marion
    Marion avatar
    22 posts
    Member since:
    Nov 2016

    Posted 17 May Link to this post

    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?

     

     

  2. Georgi
    Admin
    Georgi avatar
    179 posts

    Posted 19 May Link to this post

    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.
  3. Marion
    Marion avatar
    22 posts
    Member since:
    Nov 2016

    Posted 19 May Link to this post

    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.

     

Back to Top