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

MVC Grid - capture selected row's data

2 Answers 2211 Views

Grid

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

Marcos asked on 18 Mar 2016, 12:10 AM

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>

<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>

2 Answers, 1 is accepted

Accepted

answered on 21 Mar 2016, 02:25 PM

Hi Marcos,

You can get the currently selected data item by handling the change event of the Kendo UI Grid. You can access the item in question via the select() and dataItem() methods of the Grid, and then process the item as necessary:

// Grid configuration

...

.Selectable()

.Events(e => e.Change("onChange"))

...



<script>

function onChange (e){

var grid = e.sender;

var selectedRow = grid.select();

var selectedItem = grid.dataItem(selectedRow);

// process the item

console.log(kendo.stringify(selectedItem));

}

</script>

Regards,
Dimiter Topalov
Telerik

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items