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

Programatically select Row based on QueryString parameter

3 Answers 334 Views

Grid

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

Chris asked on 30 Jan 2015, 05:06 PM

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. 

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. 

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>

3 Answers, 1 is accepted

Accepted

answered on 03 Feb 2015, 03:01 PM

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!