Tech
Forums
Jobs
Books
Events
Interviews
Live
More
Learn
Training
Career
Members
Videos
News
Blogs
Login
Sign Up
Ask Question
1
Reply
Insert Input Control,Grid Values on button click in Kendo UI
Rupesh Kahane
Dec 28 2016 6:48 AM
454
Reply
I have a small application created using
Kendo UI MVC
.
I have following UI as like
There are some fields on above UI. Some suppliers are supplying material.
Single supplier can supply n number of material.
When I click on Add to
Kendo Grid
then only product details are storing into a grid with foreign key reference of Supplier Master.
So how can I post whole data into two different tables on click event of Insert Into Database as like
Bellow is my code
@using Kendo.Mvc.UI
@using Kendo.Mvc.Extensions
@model KendoUIApp3.ViewModel.ProductViewModel
@{
ViewBag.Title
=
"Index"
;
Layout
=
"~/Views/Shared/_Layout.cshtml"
;
}
<
div
class
=
"row"
>
<
div
class
=
"col-md-12"
>
<
div
class
=
"input-group"
>
@Html.LabelFor(
model
=
>
model.Id)
@Html.EditorFor(
model
=
>
model.Id)
@Html.LabelFor(
model
=
>
model.Name)
@Html.EditorFor(
model
=
>
model.Name)
@Html.LabelFor(
model
=
>
model.Mobile)
@Html.EditorFor(
model
=
>
model.Mobile)
@Html.LabelFor(
model
=
>
model.City)
@Html.EditorFor(
model
=
>
model.City)
</
div
>
<
br
/>
<
div
class
=
"col-md-12"
>
<
div
class
=
"input-group"
>
@Html.LabelFor(
model
=
>
model.Product_Name)
@Html.EditorFor(
model
=
>
model.Product_Name)
@Html.LabelFor(
model
=
>
model.Price)
@Html.EditorFor(
model
=
>
model.Price)
@Html.LabelFor(
model
=
>
model.Quantity)
@Html.EditorFor(
model
=
>
model.Quantity)
@Html.LabelFor(
model
=
>
model.Total)
@Html.EditorFor(
model
=
>
model.Total)
</
div
>
</
div
>
<
br
/>
<
div
class
=
"col-md-6"
>
<
div
class
=
"input-group"
>
<
input
type
=
"button"
value
=
"submit"
id
=
"btnAddToGrid"
>
</
div
>
</
div
>
</
div
>
<
br
/>
<
button
name
=
"btnSaveGrid"
id
=
"btnSaveGrid"
>
Insert Into Database
</
button
>
<
br
/>
<
br
/>
<
div
>
@(Html.Kendo().Grid
<
KendoUIApp3.ViewModel.ProductViewModel
>
()
.Name("Grid")
.Columns(
columns
=
>
{
columns.Bound(
c
=
>
c.Id).Width(20);
columns.Bound(
c
=
>
c.Product_Name).Width(30);
columns.Bound(
c
=
>
c.Price).Width(20);
columns.Bound(
c
=
>
c.Quantity).Width(20);
columns.Bound(
c
=
>
c.Total).Width(20);
})
.HtmlAttributes(new {
style
=
"height: 350px;width: 800px;"
})
.Scrollable()
.Groupable()
.Sortable()
.Pageable(
pageable
=
>
pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(
dataSource
=
>
dataSource
.Ajax()
.PageSize(20)
)
)
</
div
>
</
div
>
<
script
>
$("#btnAddToGrid").click(function () {
var
id
= $('#Id').val();
var
name
= $('#Name').val();
var
pName
= $('#Product_Name').val();
var
price
= $('#Price').val();
var
qty
= $('#Quantity').val();
var
total
= $('#Total').val();
if (
name
== "" ||
pName
== "") {
alert("Please fill all input fields");
}
var
grid
= $("#Grid").data("kendoGrid");
var
datasource
=
grid
.dataSource;
datasource.insert({ Id:id,Name: name, Product_Name: pName, Price: price, Quantity: qty, Total: total });
});
</
script
>
My Model is
public
class
ProductViewModel
{
public
int
Id {
get
;
set
; }
public
string
Name {
get
;
set
; }
public
string
Mobile {
get
;
set
; }
public
string
City {
get
;
set
; }
[Display(Name=
"Product Name"
)]
public
string
Product_Name {
get
;
set
; }
public
string
Price {
get
;
set
; }
public
string
Quantity {
get
;
set
; }
public
string
Total {
get
;
set
; }
}
Please give me some suggestion
Upload Source Code
Select only zip and rar file.
Post
Reset
Cancel
Answers (
1
)
Next Recommended Forum
Service Layer in ASP.NET MVC
bootstrap datepicker not working after postback