Pass And Get Query String Value Using JQuery In Kendo UI

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>

From the above code you can observe the following things,

1. We are fetching the ComposerId Value from query string while page loads

2. Reading the Url -"/api/Musics/"+ urlParams["ComposerID"]+ "/details" to bound the Kendo grid with Composer details based on ComposerID

Result in Browser

Figure 3

When AR Rahman is clicked.

Figure 4

Figure 5

When Yuvan is clicked.

Figure 6

Figure 7

I have attached the source code for your reference, hope you have enjoyed the article.

4 Comments

Join the conversation! Your thoughts help the community grow.

Arul R10y ago
Nice Share
Lohith GN10y ago
hi. the title is little misleading...Kendo UI has got nothing with what you are trying to do. And you dont need to refresh the whole page when you select a composer. Since you have an API endpoints ready - you can always issue an ajax call to your api and bind the grid at runtime. I wouldnt recommend the example you have given here. There is no need to refresh the whole page.
- Gowtham K10y ago
  Yes, I agree with you Lohith, I have used the Kendo Grid that’s why I mentioned it as Kendo UI in title, I know for this example there is no need of Kendo Grid, the main core of this example is on query string, Thank you for your feedback.
Santhakumar Munuswamy10y ago
Thank for nice article.