Grid with toolbar and dropdownlist in it.

4 posts, 0 answers
  1. vitaliy
    vitaliy avatar
    10 posts
    Member since:
    Mar 2015

    Posted 27 Mar 2015 Link to this post

    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?
  2.
  3. vitaliy
    vitaliy avatar
    10 posts
    Member since:
    Mar 2015

    Posted 27 Mar 2015 in reply to vitaliy Link to this post

    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?

     

  5. vitaliy
    vitaliy avatar
    10 posts
    Member since:
    Mar 2015

    Posted 27 Mar 2015 in reply to vitaliy Link to this post

    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?

     

  7. vitaliy
    vitaliy avatar
    10 posts
    Member since:
    Mar 2015

    Posted 30 Mar 2015 in reply to vitaliy Link to this post

    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)
  8.
Back to Top