Post
Ask Question

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  8.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  11.     <title></title>  
  12.     <meta charset="utf-8" />  
  13. </head>  
  14. <body>  
  15.   
  16.     <script type="text/x-kendo-template" id="logintxt-template">  
  17.         <a href='' style="color:blue" data-bind="click: Member_Details">#=Name#</a>  
  18.     </script>  
  19.     <div class="container" id="example">  
  20.         <div class="row">  
  21.   
  22.             <div id="test-grid" data-role="grid"  
  23.                  data-scrollable="true"  
  24.                  data-editable="false"  
  25.                  data-selectable="true"  
  26.                  data-columns="[  
  27.                  { 'field': 'ComposerID','width':'100px'},  
  28.                       { 'title': 'Composer Name', template: kendo.template($('#logintxt-template').html()), 'width': '40px' },  
  29.                       
  30.                  ]"  
  31.                  data-pageable='true'  
  32.                  data-bind="source:Music"  
  33.                  style="height: 300px"></div>  
  34.   
  35.         </div>  
  36. </div>  
  37.     <script>  
  38.     $(document).ready(function(){  
  39.         var viewModel = kendo.observable({  
  40.             Member_Details: function (e) {  
  41.                 e.preventDefault();  
  42.   
  43.                 var grid = $("#test-grid").data("kendoGrid");  
  44.                 var selectedItem = grid.dataItem($(e.currentTarget).closest("tr"));  
  45.                 var ret = true;  
  46.                  
  47.                 if (selectedItem) {  
  48.                     var data = selectedItem.ComposerID;  
  49.                     window.location.href = "ComposerDetails.html" + "?ComposerID=" + escape(selectedItem.ComposerID);  
  50.                 }  
  51.             },  
  52.   
  53.   
  54.     isVisible: true,  
  55.   
  56.     Music: new kendo.data.DataSource({  
  57.     schema: {  
  58.     model: {  
  59.     id: "ComposerID",  
  60.     fields: {  
  61.     ComposerID: { type: "string" },  
  62.     Name: { type: "string" }  
  63.     }  
  64.     }  
  65.     },  
  66.     batch: true,  
  67.     pageSize: 5,  
  68.   
  69.     transport: {  
  70.     read: {  
  71.         url: "api/Musics/Composer",  
  72.     dataType: "json"  
  73.     },  
  74.     parameterMap: function (options, operation) {  
  75.     if (operation !== "read" && options.models) {  
  76.     return { models: kendo.stringify(options.models) };  
  77.     }  
  78.     }  
  79.     }  
  80.     })  
  81.   
  82.     });  
  83.     kendo.bind($("#example"), viewModel);  
  84.   
  85.   
  86.     })  
  87.     </script>  
  88.   
  89. </body>  
  90. </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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />  
  5.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />  
  6.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />  
  7.     <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />  
  8.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>  
  9.     <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>  
  10.     <script src="http://cdn.kendostatic.com/2014.3.1029/js/jszip.min.js"></script>  
  11.     <title></title>  
  12.     <meta charset="utf-8" />  
  13. </head>  
  14. <body>  
  15.     <div class="container" id="example">  
  16.         <div class="row">  
  17.   
  18.             <div id="test-grid" data-role="grid"  
  19.                  data-scrollable="true"  
  20.                  data-editable="false"  
  21.                  data-selectable="true"  
  22.                  data-columns="[  
  23.                  { 'field': 'MusicID','width':'40px'},  
  24.                       { 'title': 'Music Title', 'field':'Title', 'width': '40px' },  
  25.                  { 'title': 'Composer Name', 'field':'Composer', 'width': '40px' },  
  26.   
  27.                  ]"  
  28.                  data-pageable='true'  
  29.                  data-bind="source:Music"  
  30.                  style="height: 300px"></div>  
  31.   
  32.         </div>  
  33.     </div>  
  34.     <script>  
  35.   
  36.         $(document).ready(function () {  
  37.   
  38.             var urlParams;  
  39.             (window.onpopstate = function () {  
  40.                 var match,  
  41.                     pl = /\+/g,  // Regex for replacing addition symbol with a space  
  42.                     search = /([^&=]+)=?([^&]*)/g,  
  43.                     decode = function (s) { return decodeURIComponent(s.replace(pl, " ")); },  
  44.                     query = window.location.search.substring(1);  
  45.   
  46.                 urlParams = {};  
  47.                 while (match = search.exec(query))  
  48.                     urlParams[decode(match[1])] = decode(match[2]);  
  49.             })();  
  50.            
  51.   
  52.             var viewModel = kendo.observable({  
  53.   
  54.                 Music: new kendo.data.DataSource({  
  55.                     schema: {  
  56.                         model: {  
  57.                             id: "ComposerID",  
  58.                             fields: {  
  59.                                 ComposerID: { type: "string" },  
  60.                                 Name: { type: "string" }  
  61.                             }  
  62.                         }  
  63.                     },  
  64.                     batch: true,  
  65.                     pageSize: 5,  
  66.   
  67.                     transport: {  
  68.                         read: {  
  69.                             url: "/api/Musics/"+ urlParams["ComposerID"]+ "/details",  
  70.                             dataType: "json"  
  71.                         },  
  72.                         parameterMap: function (options, operation) {  
  73.                             if (operation !== "read" && options.models) {  
  74.                                 return { models: kendo.stringify(options.models) };  
  75.                             }  
  76.                         }  
  77.                     }  
  78.                 })  
  79.   
  80.             });  
  81.             kendo.bind($("#example"), viewModel);  
  82.   
  83.             });  
  84.          
  85.   
  86.     </script>  
  87. </body>  
  88. </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.


Similar Articles