Pass And Get Query String Value Using JQuery In Kendo UI

Gowtham K
9y
9.8k
0
1

Article

To explain how to pass and get query string value using JQuery in Kendo UI with ASP.NET WEB API, I am going to use the following REST service.

api/Musics/Composer

The Response in POSTMAN as in the following figure 1,

Figure 1

/api/Musics/{ComposerID}/details

The Response in POSTMAN as in the following figure 2,

Figure 2

Pass the Query String Value

Create an HTML Page, in my case I named it Composer.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<script type="text/x-kendo-template" id="logintxt-template">
<a href='' style="color:blue" data-bind="click: Member_Details">#=Name#</a>
</script>
<div class="container" id="example">
<div class="row">
<div id="test-grid" data-role="grid"
data-scrollable="true"
data-editable="false"
data-selectable="true"
data-columns="[
{ 'field': 'ComposerID','width':'100px'},
{ 'title': 'Composer Name', template: kendo.template($('#logintxt-template').html()), 'width': '40px' },
]"
data-pageable='true'
data-bind="source:Music"
style="height: 300px"></div>
</div>
</div>
<script>
$(document).ready(function(){
var viewModel = kendo.observable({
Member_Details: function (e) {
e.preventDefault();
var grid = $("#test-grid").data("kendoGrid");
var selectedItem = grid.dataItem($(e.currentTarget).closest("tr"));
var ret = true;
if (selectedItem) {
var data = selectedItem.ComposerID;
window.location.href = "ComposerDetails.html" + "?ComposerID=" + escape(selectedItem.ComposerID);
}
},
isVisible: true,
Music: new kendo.data.DataSource({
schema: {
model: {
id: "ComposerID",
fields: {
ComposerID: { type: "string" },
Name: { type: "string" }
}
}
},
batch: true,
pageSize: 5,
transport: {
read: {
url: "api/Musics/Composer",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
}
})
});
kendo.bind($("#example"), viewModel);
})
</script>
</body>
</html>

From the above code you can observe the following things,

1. We have kendo grid which is bounded with api/Musics/Composer service response.

2. The template is placed in Composer field of grid with a click event.

3. In the click event function we are fetching ComposerID value from grid and passing it as query string.

Get the Query string value

Create an HTML Page, in my case I named it ComposerDetails.html

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
<script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>
<title></title>
<meta charset="utf-8" />
</head>
<body>
<div class="container" id="example">
<div class="row">
<div id="test-grid" data-role="grid"
data-scrollable="true"
data-editable="false"
data-selectable="true"
data-columns="[
{ 'field': 'MusicID','width':'40px'},
{ 'title': 'Music Title', 'field':'Title', 'width': '40px' },
{ 'title': 'Composer Name', 'field':'Composer', 'width': '40px' },
]"
data-pageable='true'
data-bind="source:Music"
style="height: 300px"></div>
</div>
</div>
<script>
$(document).ready(function () {
var urlParams;
(window.onpopstate = function () {
var match,
pl = /\+/g, // Regex for replacing addition symbol with a space
search = /([^&=]+)=?([^&]*)/g,
decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },
query = window.location.search.substring(1);
urlParams = {};
while (match = search.exec(query))
urlParams[decode(match[1])] = decode(match[2]);
})();
var viewModel = kendo.observable({
Music: new kendo.data.DataSource({
schema: {
model: {
id: "ComposerID",
fields: {
ComposerID: { type: "string" },
Name: { type: "string" }
}
}
},
batch: true,
pageSize: 5,
transport: {
read: {
url: "/api/Musics/"+ urlParams["ComposerID"]+ "/details",
dataType: "json"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
}
})
});
kendo.bind($("#example"), viewModel);
});
</script>
</body>
</html>