how to bind selected dropdown value information from db to kendoGrid

[shankar parshimoni]

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. 

[Jayesh Goyani]

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