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

MultiSelect dataSource Read before Grid Edit Event

2 Answers 386 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
John
Top achievements
Rank 1
John asked on 01 Jun 2017, 06:03 PM

I have a grid and a popup editor.  One column of the grid is a list of objects and it is handled by a multiselect in the editor window.  The multiselect list of values depends on the grid row selected for edit, so I cannot bind a list to the multiselect until the grid Edit button click. I am setting the value I need in the grid Edit event and the muitlselect dataSource Read().Data() calls a function to get the value from the edited row.  The issue I am having is the multiselect is being bound BEFORE the grid edit event fires, so the Read().Data() call returns a null value and the controller action fails. Can anyone suggest how to fix this or suggest an alternative? Thanks!

To restate the problem with reference to the code below: the Data function of the multiselect "farmIdForSelectedGrouping" which returns the value of "farmId" is called BEFORE the "farmId is set in the Grid Edit event handler "onWipGroupingGridEdit"

View with Grid:

<script type="text/kendo" id="bmpListTemplate">
    <ul class="horizontalList">
        #for(var i = 0; i< data.length; i++){#
        <li class="horizontalList">#:data[i].BmpNumber#</li>
        #}#
    </ul>
</script>
<script type="text/javascript">
    var farmId;
    var bmpTemplate = kendo.template($("#bmpListTemplate").html(), { useWithBlock: false })
    function groupingBmpListChange(e) {
        var row = this.element.closest("tr"),
            model = $("#WipGroupingGrid").data("kendoGrid").dataItem(row);
        model.set("MiniBmpList", this.dataItems());
    }
// function called from multiselect dataSource.Read().Data()
    function farmIdForSelectedGrouping() {
        return farmId;
    }
    function onWipGroupingGridEdit(e) {
        debugger;
        grouping = e.model;
        farmId = e.model.FarmId;
         
    }
    

</script>

@(Html.Kendo().Grid<WipGroupingViewModel>()
    .Name("WipGroupingGrid")
     (the rest of the Grid definition)
    .Events(e =>
    {
        e.Edit("onWipGroupingGridEdit");
    })
)

 

View for popup:

@model WapTool.UIModel.ViewModel.Wip.WipGroupingViewModel
<div class="pad-left">
    <table id="wipGroupingTable">
        <tbody >
             (other rows left out for brevity)
            <tr>
                <td colspan="3">
                    <div style="font-size: .8rem">
                        @(Html.Kendo().MultiSelectFor(m => m.MiniBmpList)
                            .Name("GroupingBmpListMultiSelect")
                            .DataValueField("Id")
                            .DataTextField("BmpNumber")
                            .Events(e => e.Change("groupingBmpListChange"))
                            .DataSource(d =>
                            {
                                d.Custom()
                                 .Type("aspnetmvc-ajax")
                                 .Transport(t =>
                                 {
                                     t.Read(r =>
                                     {
                                         r.Action("FarmBmps", "WipGrouping");
                                         r.Data("farmIdForSelectedGrouping");
                                         r.DataType("json");
                                     });
                                 })
                                .ServerFiltering(true);
                            })
                            .Value(Model.MiniBmpList)
                        )
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

2 Answers, 1 is accepted

Sort by
0
John
Top achievements
Rank 1
answered on 01 Jun 2017, 06:19 PM
I should also mention that I have tried setting AutoBind(false) in the multiselect and calling dataSource.Read() from within the Grid Edit event. This does set "farmId" before the dataSource.Read() is called but it still passes null to the controller??
0
John
Top achievements
Rank 1
answered on 02 Jun 2017, 01:25 AM
In case anyone else has a similar problem, the issue was not in the order events were firing as I had thought. The problem was the return value from the Read().Data() function. I was returning just the variable I was interested in but the correct format is:

return { parameter: value } . the fix to my code is below.

 
function farmIdForSelectedGrouping() {
       return { farmId: farmId };
   }
Tags
MultiSelect
Asked by
John
Top achievements
Rank 1
Answers by
John
Top achievements
Rank 1
Share this question
or