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

how to bind selected dropdown value information from db to kendoGrid

1 Answer 453 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
shankar parshimoni
Top achievements
Rank 1
shankar parshimoni asked on 19 Nov 2012, 11:16 AM
Hi,
i am new to kendo-UI,i am using mvc3 architecture.i can able to bind values from database to ComboBox and as well as to grid. Right now i got one problem that when i'm selecting ComboBox, the selected value pass to database (which is from View to Model) get the data from database. would you please help me out ASAP. 

1 Answer, 1 is accepted

Sort by
0
Jayesh Goyani
Top achievements
Rank 2
answered on 12 Dec 2012, 12:28 PM
Hello,

Please try with below code snippet.
@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<div id="tshirt-view" class="k-header">
    @*<h2>Customize your Kendo T-shirt</h2>
    <img id="tshirt" src="@Url.Content("~/Image/tShirt.png")" />
    <div id="options">*@
    <h3>
        Employee Name
    </h3>
    <input id="comboBox1" />
    <button class="k-button" id="get">
        Submit</button>
    <h3>
        Employee Details using remote
    </h3>
    <div id="empgrid">
    </div>
    <h3>
        Emp Details
    </h3>
</div>
<style scoped>
    #example h2
    {
        font-weight: normal;
    }
    #tshirt-view
    {
        border-radius: 10px 10px 10px 10px;
        border-style: solid;
        border-width: 1px;
        overflow: hidden;
        width: 500px;
        margin: 30px auto;
        padding: 20px 20px 0 20px;
    }
    #tshirt
    {
        float: left;
        margin: 30px 40px 30px 20px;
    }
    #options
    {
        padding: 30px;
    }
    #options h3
    {
        font-size: 1em;
        font-weight: bold;
        margin: 25px 0 8px 0;
    }
    #get
    {
        margin-top: 25px;
    }
     
    .k-readonly
    {
        color: gray;
    }
</style>
@*<script>
 
    //    function getCurrentEmpid() {
    //        var grid = $("#Grid").data("kendoGrid"); // where "idGrid" is the id of your grid
 
    //        return {
    //            eid: Grid.dataItem(Grid.select()).eid
    //        }
    //    }
 
    //    $(document).ready(function () {
    //        var fabric = $("#fabric").data("kendoComboBox");
    //        var size = $("#size").data("kendoComboBox");
    //        var Countries = $("#Countries").data("kendoComboBox");
 
    //        $("#get").click(function () {
    //            alert('Thank you..! Your Choice is:\n\nFabric ID: ' + fabric.value() + ' and Size: ' + size.value());
    //        });
 
    //    });
</script>*@
<script>
 
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: "/Home/GetData",
            update: {
                url: "/Products/Update",
                type: "POST"
            },
            destroy: {
                url: "/Products/Destroy",
                type: "POST"
            },
            create: {
                url: "/Products/Create",
                type: "POST"
            }
        },
 
        schema: {
            model: {
                id: "eid",
                fields: {
                    eid: {
                        //this field will not be editable (default value is true)
                        editable: false,
                        // a defaultValue will not be assigned (default value is false)
                        nullable: true
                    },
                    ename: {
                        validation: { //set validation rules
                            required: true
                        }
                    },
                    age: {
                        //data type of the field {Number|String|Boolean} default is String
                        type: "number",
                        validation: {
                            required: true,
                            min: 25
                        }
                    },
                    salary: {
                        type: "long",
                        validation: {
                            min: 5000
                        }
                    }
                }
            }
        },
        // determines if changes will be send to the server individually or as batch
        batch: true
        //...
    });
 
    $(document).ready(function () {
 
        $("#comboBox1").kendoComboBox({
            index: 0,
            dataTextField: "ename",
            dataValueField: "eid",
            filter: "contains",
            dataSource: {
                type: "json",
                serverFiltering: true,
                serverPaging: true,
                pageSize: 5,
                transport: {
                    read: "Home/GetData"
                }
            }
        });
 
        $("#empgrid").kendoGrid({
            pageable: true,
            toolbar: ["create", "save", "cancel"],
            editable: true,
            dataSource: dataSource,
            columns: [
 
                      { title: 'Employee Id', field: 'eid', width: '35%', sortable: true },
                      { title: 'Employee Name', field: 'ename', width: '45%', flex: 1, sortable: true },
                      { title: 'Age', field: 'age', width: '25%', flex: 1, sortable: true },
                      { title: 'Salary', field: 'salary', width: '45%', flex: 1, sortable: true }
 
                      ],
            sortable: true
        });
 
        $("#get").click(function () {
 
            var id = $("#comboBox1").val();
            $("#empgrid").data("kendoGrid").dataSource.filter({ field: "eid", operator: "eq", value: parseInt(id) });
 
            // If you want to bind all data
            // $("#empgrid").data("kendoGrid").dataSource.filter({});
        });
    });
 
</script>


Thanks,
Jayesh Goyani
Tags
DropDownList
Asked by
shankar parshimoni
Top achievements
Rank 1
Answers by
Jayesh Goyani
Top achievements
Rank 2
Share this question
or