Programatically select Row based on QueryString parameter

4 posts, 1 answers
  1. Chris
    Chris avatar
    5 posts
    Member since:
    Aug 2013

    Posted 30 Jan 2015 Link to this post

    Hey guys, I've found a couple threads here that were helpful, but there must be some difference in my situation as I am unable to get them to work properly. I have a page with a JavaScript kendoGrid using an ODATA service as its dataSource. The dataSource primary key is "id" and on document.ready I want to page to, and select, the matching Row based on the data field "Id" and the QueryString parameter.

    The below code all functions correctly as far as the alert(caseId) in the document.ready function. After that nothing happens. Can anyone see what I'm doing wrong?

    Also, I have tried replacing caseId in the dataSource.get(caseId) with a hard coded Id but it did not work...

    001.<!DOCTYPE html>
    002.<html>
    003.    <head>
    004.        <title></title>
    005.        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" />
    006.        <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.bootstrap.min.css" />
    007. 
    008.        <!-- Latest compiled and minified CSS -->
    009.        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
    010.        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
    011. 
    012.        <script src="http://cdn.kendostatic.com/2014.1.318/js/jquery.min.js"></script>
    013.        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
    014.        <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
    015.    </head>
    016.    <body>
    017.        <div class="container">
    018.            <div class="jumbotron">
    019.                <h1>Environmental Affairs <small>Document Manager</small></h1>
    020.                <p>Upload concern related documents and images</p>
    021.            </div>
    022.            <script>
    023.                function getParameterByName(name) {
    024.                    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    025.                    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
    026.                        results = regex.exec(location.search);
    027.                    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
    028.                }
    029.                function isFormValid() {
    030.                    var x = document.getElementById("field1").value;
    031.                    if (x == null || x == "") {
    032.                        alert("Select a case");
    033.                        return false;
    034.                    }
    035.                }
    036.                function getSelectedCase() {
    037.                    //Selecting Grid
    038.                    var gview = $("#grid").data("kendoGrid");
    039.                    //Getting selected item
    040.                    var selectedItem = gview.dataItem(gview.select());
    041.                    //accessing selected rows data
    042.                    document.getElementById("field1").value = selectedItem.EnforcementNumber;
    043.                }
    044.            </script>
    045.            <!-- Kendo will automatically set the form enctype attribute to "multi-part/form-data" -->
    046.            <form action="upload.php" onsubmit="return isFormValid()" method="post" enctype="multipart/form-data">
    047.                <div class="form-group">
    048.                    <label for="field2">Choose a document or image...</label>
    049.                    <input name="fileToUpload" id="fileToUpload" type="file" class="form-control input-lg"/>
    050.                    <input id="field1" name="field1" type="hidden"/>
    051.                </div>
    052.                <label for="grid">Select a case to attach your document to...</label>
    053.                <div id="grid"></div>
    054.                <script>
    055.                    // document ready fires when the whole page is ready
    056.                    // and all elements, scripts, styles have been loaded
    057.                    $(function () {
    058.                        // regex for some date parsing
    059.                        // select the div and create the grid element
    060.                        $("#grid").kendoGrid({
    061.                            dataSource: {
    062.                                type: "odata",
    063.                                transport: {
    064.                                    read: "http://envaffairs/complaints/ApplicationData.svc/Complaints"
    065.                                },
    066.                                sort: {
    067.                                    field: "EnforcementNumber",
    068.                                    dir: "desc"
    069.                                },
    070.                                schema: {
    071.                                    data: "value",
    072.                                    total: "['odata.count']",
    073.                                    model: {   
    074.                                        fields: {
    075.                                            Id: {type: "number" },
    076.                                            EnforcementNumber: {type: "string" },
    077.                                            ParcelNumber: {type: "string" },
    078.                                            Street: {type: "string" },
    079.                                            DateAndTimeOfComplaint: {type: "datetime" },
    080.                                            TypeOfComplaint: {type: "string" }
    081.                                        }
    082.                                    }
    083.                                },
    084.                                pageSize: 5,
    085.                                serverPaging: false,
    086.                                serverFiltering: true,
    087.                                serverSorting: true
    088.                            },
    089.                            filterable: true,
    090.                            selectable: "row",
    091.                            sortable: true,
    092.                            pageable: true,
    093.                            columns: [
    094.                                {
    095.                                    field: "Id",
    096.                                    width: 75,
    097.                                    filterable: false
    098.                                },
    099.                                {
    100.                                    field: "EnforcementNumber",
    101.                                    title: "Case"
    102.                                },
    103.                                {
    104.                                    field: "ParcelNumber",
    105.                                    title: "Parcel"
    106.                                },
    107.                                {
    108.                                    field: "Street",
    109.                                    title: "Address"
    110.                                },
    111.                                {
    112.                                    field: "DateAndTimeOfComplaint",
    113.                                    title: "Complaint Date",
    114.                                    format: "{0:MM/dd/yyyy}",
    115.                                    width: 200
    116.                                },
    117.                                {
    118.                                    field: "TypeOfComplaint",
    119.                                    title: "Complaint Type"
    120.                                }
    121.                            ]
    122.                             
    123.                        });
    124.                     
    125.                    });
    126. 
    127.                    $(document).ready(function () {
    128.                        $("#fileToUpload").kendoUpload({
    129.                            multiple: false
    130.                        });
    131.                        var caseId = getParameterByName('id');
    132.                        alert(caseId);
    133.                            var el = $("#grid"),
    134.                                grid = el.data("kendoGrid"),
    135.                                dataSource = grid.dataSource,
    136.                                model = dataSource.get(caseId),
    137.                                index = dataSource.indexOf(model);
    138.                            dataSource.page(index/dataSource.pageSize() + 1);
    139.                            var row = el.find("tbody>tr[data-id=" + model.id + "]");
    140.                            grid.select(row);
    141.                    });
    142.                </script>
    143.                <br>
    144.                <label>Enter a file description and click Submit...</label>
    145.                <div class="input-group">
    146.                    <input id="field2" name="field2" type="text" class="form-control" placeholder="File Description"/>
    147.                    <span class="input-group-btn">
    148.                        <input type="submit" onclick="return getSelectedCase();" class="btn btn-default" value="Submit"/>
    149.                    </span>
    150.                </div>
    151.            </form>
    152.        </div>
    153.    </body>
    154.</html>
  2. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 03 Feb 2015 Link to this post

    Hi Chris,

    As the data is loaded from remote service, you will not be able to access it before it is loaded, which is what is happening in the code you have pasted. Here, I have prepared a small test page which demonstrates how to handle the scenario in question. Basically the code should look similar to the following:

    $(document).ready(function () {                   
      var el = $("#grid"),         
          grid = el.data("kendoGrid"),
          dataSource = grid.dataSource;
     
      // we should wait till the data is fetch in order to find the model by its id
      $.when(dataSource.fetch()).done(function() {
        var caseId = getParameterByName('id');           
         
        if (caseId === "") {
          return;
        }           
         
        var model = dataSource.get(parseInt(caseId, 10)),
            index = dataSource.indexOf(model);
     
        // use the dataBound event to select the row           
        grid.one("dataBound", function() {
          // the row has an uid attribute set
          var row = this.items().filter("[data-uid=" + model.uid + "]");           
          grid.select(row); 
        });
        dataSource.page(Math.floor(index/dataSource.pageSize()) + 1);
      });
    });
     

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Chris
    Chris avatar
    5 posts
    Member since:
    Aug 2013

    Posted 03 Feb 2015 in reply to Rosen Link to this post

    Thank you, Rosen. This is very similar to what I ended up going with, and it works well. For some reason (I suppose due to the fact that my dataSource Id's do not match up with the Row ID necessarily) I cannot get it to page to the correct page, although paging does work. Being that it DOES in fact go to a page, and it DOES select the proper row, I am marking this as Answered :)

    If you have any suggestions as to why I am getting the wrong page, that would be superb :) Thanks again!
  5. Chris
    Chris avatar
    5 posts
    Member since:
    Aug 2013

    Posted 03 Feb 2015 in reply to Rosen Link to this post

    I have resolved my Page confusion. It was a result of my dataSource sorting. Thanks again for your assistance.
Back to Top
Kendo UI is VS 2017 Ready