MVC Grid - capture selected row's data

3 posts, 1 answers
  1. Marcos
    Marcos avatar
    2 posts
    Member since:
    Jan 2016

    Posted 17 Mar Link to this post

    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>

  2. Answer
    Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    349 posts

    Posted 21 Mar Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Marcos
    Marcos avatar
    2 posts
    Member since:
    Jan 2016

    Posted 21 Mar in reply to Dimiter Topalov Link to this post

    Thank you so much Dimiter! It worked.

    I appreciate your expertise and help.

    Marcos

Back to Top