Hello all,
I am new to both Telerik and MVC and need help desperately.
I have built a grid that is populated by data query upon load. I added a custom column with a button (Create Affidavit) to my grid with a .Click command pointing to jquery function sendVisibleRows.
Upon clicking the row’s “Create Affidavit” button, I wish to capture all the data in the “clicked” row and pass each column value and format them separately to local variables that I use to dynamically populate a form.
I’ve tried numerous methods but I cannot seem to be able to capture the data in the clicked row. No matter what I do, I seem to only be able to capture the columns in the very first row.
I also tried without success:
var row =
this.select();
var id =
row.data("id");
Any help is extremely welcome. Thank you!
<div class=
"container"
>
<div class=
"col-lg-6"
>
@(Html.Kendo().Grid<IntranetPolice.Models.AffDataTbl>()
.Name(
"Grid"
)
.Columns(columns =>
{
columns.Bound(p => p.inci_id).Title(
"Svc Number"
).Width(80);
columns.Bound(p => p.arr_chrg).Title(
"Charge"
).Width(80);
columns.Bound(p => p.lastname).Title(
"Last Name"
).Width(80);
columns.Bound(p => p.firstname).Title(
"First Name"
).Width(80);
columns.Bound(p => p.street).Title(
"Street"
).Width(80);
columns.Command(command => command.Custom(
"Create Affidavit"
).Click(
"sendVisibleRows"
)).Width(80);
})
.HtmlAttributes(
new
{ style =
"height: 550px;"
})
//.Pageable(pageable => pageable
// .Input(true)
// .Numeric(false)
// )
.Sortable()
.Scrollable(scr => scr.Height(430))
//.Filterable()
.DataSource(dataSource => dataSource
// Configure the grid data source
.Ajax()
// Specify that ajax binding is used
.Read(read => read.Action(
"Affidavit_Read"
,
"Home"
).Data(
"sendAddtionalData"
))
)
)
</div>
<div class=
"col-lg-6"
>
<div class=
"panel"
align=
"center"
>
@using (Html.BeginForm(
"Affidavit_PDF"
,
"Home"
, FormMethod.Post,
new
{ target =
"_blank"
}))
{
@Html.AntiForgeryToken()
<form id=
"arraignmentForm"
>
<ul id=
"fieldlist"
>
<li><center><h4>Arraignment Form</h4></center></li>
<li>
<p>
@Html.TextBoxFor(m => m.inci_id,
new
{ id =
"inci_id"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
@Html.TextBoxFor(m => m.lastname,
new
{ id =
"lastname"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
@Html.TextBoxFor(m => m.firstname,
new
{ id =
"firstname"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
@Html.TextBoxFor(m => m.chrgdesc,
new
{ id =
"chrgdesc"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
@Html.TextBoxFor(m => m.statute,
new
{ id =
"statute"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
@Html.TextAreaFor(m => m.supplement,
new
{ id =
"supplement"
, @class =
"TextBoxFor_txtcolor"
, @onclick =
""
})
</p>
@Html.HiddenFor(m => m.date_occu,
new
{ id =
"date_occu"
})
@Html.HiddenFor(m => m.armainid,
new
{ id =
"armainid"
})
@Html.HiddenFor(m => m.archrgArmainid,
new
{ id =
"archrgArmainid"
})
@Html.HiddenFor(m => m.archrgid,
new
{ id =
"archrgid"
})
@Html.HiddenFor(m => m.chargetype,
new
{ id =
"chargetype"
})
@Html.HiddenFor(m => m.arr_chrg,
new
{ id =
"arr_chrg"
})
@Html.HiddenFor(m => m.bondamt,
new
{ id =
"bondamt"
})
@Html.HiddenFor(m => m.fel_misd,
new
{ id =
"fel_misd"
})
@Html.HiddenFor(m => m.race,
new
{ id =
"race"
})
@Html.HiddenFor(m => m.sex,
new
{ id =
"sex"
})
@Html.HiddenFor(m => m.dob,
new
{ id =
"dob"
})
@Html.HiddenFor(m => m.height,
new
{ id =
"height"
})
@Html.HiddenFor(m => m.weight,
new
{ id =
"weight"
})
@Html.HiddenFor(m => m.hair,
new
{ id =
"hair"
})
@Html.HiddenFor(m => m.eye,
new
{ id =
"eye"
})
@Html.HiddenFor(m => m.streetnbr,
new
{ id =
"streetnbr"
})
@Html.HiddenFor(m => m.street,
new
{ id =
"street"
})
@Html.HiddenFor(m => m.city,
new
{ id =
"city"
})
@Html.HiddenFor(m => m.state,
new
{ id =
"state"
})
@Html.HiddenFor(m => m.zip,
new
{ id =
"zip"
})
@Html.HiddenFor(m => m.dr_lic,
new
{ id =
"dr_lic"
})
@Html.HiddenFor(m => m.dl_state,
new
{ id =
"dl_state"
})
@Html.HiddenFor(m => m.name_id,
new
{ id =
"name_id"
})
@Html.HiddenFor(m => m.ofcName,
new
{ id =
"ofcName"
})
@Html.HiddenFor(m => m.selectCounty,
new
{ id =
"selectCounty"
})
</li>
<li class=
"confirm"
>
<button class=
"k-button k-primary"
type=
"submit"
>Arraignment Form</button>
</li>
</ul>
</form>
}
</div>
</div>
</div>
<script>
function
sendAddtionalData() {
var
caseNum =
'@(ViewBag.caseNum)'
;
return
{
caseNum: caseNum,
};
}
function
sendVisibleRows(e) {
var
grid = $(
"#Grid"
).data(
"kendoGrid"
).dataSource.get();
//pulling data from selected grid column
//var t = grid.dataItem(grid.select());
var
jgrid = JSON.stringify(grid);
//converting the data received into JSON format
var
jgrid_obj = eval(
"("
+ jgrid +
")"
)
//creating object with JSON datafields
$.ajax({
type:
"POST"
,
dataType:
"json"
,
contentType:
"application/json; charset=utf-8"
,
url:
'@Url.Action("Affidavit_Create", "Home")'
,
async:
true
,
processData:
false
,
data: jgrid,
//JSON.stringify(grid),
success:
function
(json) {
if
(json.pass) {
var
ofcName =
'@(ViewBag.ofcname)'
;
var
selectCounty =
'@(ViewBag.selectCounty)'
;
var
inci_id = jgrid_obj.inci_id;
var
date_occu = jgrid_obj.date_occu;
var
armainid = jgrid_obj.armainid;
var
archrgArmainid = jgrid_obj.archrgArmainid;
var
chrgdesc = jgrid_obj.chrgdesc;
var
archrgid = jgrid_obj.archrgid;
var
chargetype = jgrid_obj.chargetype;
var
arr_chrg = jgrid_obj.arr_chrg;
var
bondamt = jgrid_obj.bondamt;
var
fel_misd = jgrid_obj.fel_misd;
var
statute = jgrid_obj.statute;
var
lastname = jgrid_obj.lastname;
var
firstname = jgrid_obj.firstname;
var
race = jgrid_obj.race;
var
sex = jgrid_obj.sex;
var
dob = jgrid_obj.dob;
var
height = jgrid_obj.height;
var
weight = jgrid_obj.weight;
var
hair = jgrid_obj.hair;
var
eye = jgrid_obj.eye;
var
streetnbr = jgrid_obj.streetnbr;
var
street = jgrid_obj.street;
var
city = jgrid_obj.city;
var
state = jgrid_obj.state;
var
zip = jgrid_obj.zip;
var
dr_lic = jgrid_obj.dr_lic;
var
dl_state = jgrid_obj.dl_state;
var
name_id = jgrid_obj.name_id;
var
supplement = jgrid_obj.supplement;
/////sending variables to Form
$(
"#ofcName"
).val(ofcName);
$(
"#selectCounty"
).val(selectCounty);
$(
"#inci_id"
).val(inci_id);
$(
"#lastname"
).val(lastname);
$(
"#firstname"
).val(firstname);
$(
"#supplement"
).val(supplement);
$(
"#chrgdesc"
).val(chrgdesc);
$(
"#statute"
).val(statute);
$(
"#date_occu"
).val(date_occu);
$(
"#armainid"
).val(armainid);
$(
"#archrgArmainid"
).val(archrgArmainid);
$(
"#archrgid"
).val(archrgid);
$(
"#chargetype"
).val(chargetype);
$(
"#arr_chrg"
).val(arr_chrg);
$(
"#bondamt"
).val(bondamt);
$(
"#fel_misd"
).val(fel_misd);
$(
"#race"
).val(race);
$(
"#sex"
).val(sex);
$(
"#dob"
).val(dob);
$(
"#height"
).val(height);
$(
"#weight"
).val(weight);
$(
"#hair"
).val(hair);
$(
"#eye"
).val(eye);
$(
"#streetnbr"
).val(streetnbr);
$(
"#street"
).val(street);
$(
"#city"
).val(city);
$(
"#state"
).val(state);
$(
"#zip"
).val(zip);
$(
"#dr_lic"
).val(dr_lic);
$(
"#dl_state"
).val(dl_state);
$(
"#name_id"
).val(name_id);
}
},
error:
function
(XMLHttpRequest, textStatus, errorThrown) {
alert(
"Error"
);
}
});
}
</script>