Grid with toolbar and dropdownlist in it.

[vitaliy]

Hi.
Model:

public class Family{
   public int Id {get;set;}
   public string FamilyName {get;set;}
   public int StreetId {get;set;}
}
public class Street {
   public int Id {get;set;}
   public string StreetName {get;set;}
}

There is a Grid with a toolbar in which a dropdownwlist with the streets. Its role is to filter  the Family data in the Grid by Street - it is work fine.
But...
I want when I adding a new family the StreetId value was taken from the  Dropdownlist (Id of street). How can I do that?

[vitaliy]

The only one thing comes to mind is to pass a value from the dropdownlist to the server via event and js  when you click on the save button and on the server side to add that value to Family.It is good idea or not?

 

[vitaliy]

Grid:

@(Html.Kendo().Grid<MVC.Models.Family>()

    .Name("Grid")

    .Columns(c =>

    {

        c.Bound(p => p.StreetId).Title("Street").ClientTemplate("#=GetStreet(data)#" + "<input type='hidden' name='StreetId' value='#=GetStreet(data)#'/>").Width(150);

        c.Bound(p => p.FamilyName).Width(150).Title("Family");

        c.Command(command => command.Destroy());

 

    })

      

    

    .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))

    .ToolBar(toolbar =>

    {

 

        

        toolbar.Template(

            @<div>

                <div class="c-tools"><label>Street: </label>

                    @(Html.Kendo().DropDownList()

                        .Name("streets")

                       


                        .HtmlAttributes(new { style = "width:150px" })

                        .DataTextField("StreetName")

                        .DataValueField("Id")

                        .BindTo(Model.Streets)

                    )

                </div>

                 

                <div class="c-tools">

                 <a class='k-button k-button-icontext k-grid-add'

                    href='#'><span class='k-icon k-update'></span>Add</a>

                 <a class='k-button k-button-icontext k-grid-save-changes'

                    href='#'><span class='k-icon k-add'></span>Save</a>

                 <a class='k-button k-button-icontext k-grid-cancel-changes'

                    href='#'><span class='k-icon k-cancel'></span>Cancel</a>

                </div>

            </div>

        );

 

    })

     

    .DataSource(dataSource => dataSource

        .Ajax()

        .ServerOperation(false)

         

        .Model(model => {

            model.Id(p => p.Id);

            model.Field(p => p.Id).Editable(false);

        })

        .Read(read => read.Action("Family_Read", "Home"))

        .Update("Family_Update", "Home")

        .Create("Family_Create", "Home")

    )

)

js:

function GetStreet(data) {
        return $("#streets").data("kendoDropDownList").value();
    }

When I click on the add button then the StreetId is taken from the DropDonwlist, but if I start to edit it, then it becomes 0. Why?

 

[vitaliy]

resolved:
1. remove ClientTemplate from StreetId
2. add edit Event
3. js:

function onEdit(editEvent) {
        var e = editEvent;
        var v = $('#streets').data('kendoDropDownList').value();
       //console.log(v);
        if (e.model.isNew() && !e.model.dirty)
        {
            e.container
                .find('input[name=StreetId]')
                .val(v)
                .change();
        }
    }

Its work)