Click here to Skip to main content
15,886,362 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi All,

I'm developing site using html5 and kendo ui in asp.net with MVC3 i have got a problem that how to send value when combobox selected value should pass to model and the data from Database should bind to the grid in the view

here is the code in the view
@{
    ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>

    <div id="options">*@
    <h3>
        Employee Name
    </h3>
    <input id="comboBox1" />
    
    <h3>
        Employee Details using remote
    </h3>
    <div id="empgrid">
    
    
</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 type="text/javascript">

    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 customDataListId = $("#comboBox1").data("kendoComboBox");
                $.getJSON('<%= Url.Action("PutData", "Grid")%>', { eid: ""+customDataListId.text()+"" }, function (result) {
                    var customDataList = $('#empgrid');
                    customDataList.empty();
                    customDataList.append(result.PutData);
                });
                alert(customDataListId.text());
            });
  });


</script>


In the Controller the following code

HTML
public ActionResult Index()
        {
            var products = new Movie().GetData();

            ViewData["products"] = products;

            return View();

        }

        [AcceptVerbs(HttpVerbs.Get)]
        public JsonResult GetData()
        {
            var emp = new Movie().GetData();
            return Json(emp, JsonRequestBehavior.AllowGet);
        }

        [HttpPost]
        public ActionResult PutData(string ename)
        {
            var emp = new Movie().PutData(ename);
            return Json(emp, JsonRequestBehavior.AllowGet);
        }



In the Model the following code

HTML
DataTable Datatable = new DataTable();
        DataSet Dataset = new DataSet();

        public List<EmpPro> PutData(string ename)
        {
            string str = "Data Source=HARAVEER-PC\\SQLEXPRESS;Initial Catalog=Examples;Integrated Security=true";
            SqlConnection connection = new SqlConnection(str);
            SqlCommand command = connection.CreateCommand();
            command.CommandText = "select * from Emp where eid="+ename;
            SqlDataAdapter sda = new SqlDataAdapter();
            sda.SelectCommand = command;
            DataSet ds = new DataSet();
            try
            {
                connection.Open();
                sda.Fill(ds);

                List<EmpPro> objlist = new List<EmpPro>();

                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    EmpPro objemp = new EmpPro();
                    objemp.eid = Convert.ToInt32(ds.Tables[0].Rows[i]["eid"]);
                    objemp.ename = ds.Tables[0].Rows[i]["ename"].ToString();
                    objemp.age = Convert.ToInt32(ds.Tables[0].Rows[i]["age"]);
                    objemp.salary = Convert.ToInt64(ds.Tables[0].Rows[i]["salary"]);
                    objlist.Add(objemp);
                }

                //return ds.Tables[0];
                return objlist;
            }
            catch
            {
                return null;
            }
            finally
            {
                if (connection.State != ConnectionState.Closed)
                    connection.Close();
            }
        }

        public List<EmpPro> GetData()
        {
            //string str = "Data Source=(local);Initial Catalog=Student;Persist Security Info=True;Integrated Security=SSPI";
            string str = "Data Source=HARAVEER-PC\\SQLEXPRESS;Initial Catalog=Examples;Integrated Security=true";
            SqlConnection connection = new SqlConnection(str);
            SqlCommand command = connection.CreateCommand();
            command.CommandText = "select * from Emp";
            SqlDataAdapter sda = new SqlDataAdapter();
            sda.SelectCommand = command;
            DataSet ds = new DataSet();
            try
            {
                connection.Open();
                sda.Fill(ds);

                List<EmpPro> objlist = new List<EmpPro>();

                for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
                {
                    EmpPro objemp = new EmpPro();
                    objemp.eid = Convert.ToInt32(ds.Tables[0].Rows[i]["eid"]);
                    objemp.ename = ds.Tables[0].Rows[i]["ename"].ToString();
                    objemp.age = Convert.ToInt32(ds.Tables[0].Rows[i]["age"]);
                    objemp.salary = Convert.ToInt64(ds.Tables[0].Rows[i]["salary"]);
                    objlist.Add(objemp);
                }

                    //return ds.Tables[0];
                return objlist;
            }
            catch
            {
                return null;
            }
            finally
            {
                if (connection.State != ConnectionState.Closed)
                    connection.Close();
            }
        }
    }

    public class EmpPro
    {
        public int eid { get; set; }
        public string ename{get;set;}
        public int age{set;get;}
        public long salary { set; get; }
    }


please can anyone help me out

thanks and regards
Posted
Updated 19-Nov-12 18:43pm
v3

1 solution

Dinesh

if both your operations require to deal with different sets of data then you should consider having a separate partial view for displaying data. That way you will have a main view which will be bound to the input model and also have a partial view that will be included in main view. The partial view will bind to the model class that will be used to display data (output).

Regards
Pawan
 
Share this answer
 
Comments
shankar.parsanamoni 23-Nov-12 6:23am    
Hi,
here i can able to pass selected combo values to control as well as model and again retrieving row information up to controller But the problem is values are not binding in grid(view).so let me know whats the code i have to write for binding values to grid (i mean datasource and url)....please provide .cshtml code.

thanks,
parsanamoni.
Dinesh1207 27-Nov-12 6:30am    
Hi Pawan,

Can you provide me any sample code regarding the problem.

Thanks and Regards
Dinesh

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900