Getting data by search.

[ProgrammersweParticipant]

Okey, so, ive got this code:

var FillDataGrid2 = function () {
            var source = {
                datatype: "json",
                datafields: [
                      {name: 'FirstName', type: 'string'},
                      {name: 'Id', type: 'string'},
                      {name: 'LastName', type: 'string'},
                      {name: 'UserName', type: 'string'},
					  {name: 'Type', type: 'string'}
                      
                ],
                
                url: subPath + 'SearchUsers?username=mail@mail.com&firstname=Name&lastname=lastname'  		
            };
			
			
			var strings = new Array();
				strings["username"] = [['Användarnamn'], ['Käyttäjänimi']];
				strings["name"] = [['Namn'], ['Nimi']];
				strings["surname"] = [['Efternamn'], ['Sukunimi']];
				strings["groupsheaderstring"] = [['Dra en kolumn och släpp den här; gruppen skapas efter den kolumnen'], ['Vedä kolumnia ja vapauta: ryhmä luodaan kolumnin jälkeen']];
				strings["pagergotopagestring"] = [['Gå till sida'], ['Mene sivulle']];
				strings["pagershowrowsstring"] = [['Visa rader'], ['Näytä rivit']];
				strings["sortascendingstring"] = [['Stigande Sortering'], ['Nouseva lajittelu']];
				strings["sortdescendingstring"] = [['Fallande Sortering'], ['Laskeva lajittelu']];
				strings["sortremovestring"] = [['Ingen Sortering'], ['Ei lajittelua']];
				strings["groupbystring"] = [['Grupp efter denna kolumn'], ['Ryhmä tämän kolumnin jälkeen']];
				strings["groupremovestring"] = [['Ta bort från grupper'], ['Ota pois ryhmistä']];
				strings["pagerrangestring"] = [[' Av '], [' / ']];
				
			
			
			
			var setColumnName = function(value){
				var ContentLocale = document.getElementById("ContentLocale").innerHTML;var id = 0;
				if(ContentLocale == "sv-SE")
					id = 0;
				if(ContentLocale == "fi-FI")
					id = 1;
				return strings[value][id];
			};
			
			
            var FindMe = function (toolbar) {
            };

            var dataAdapterall = new $.jqx.dataAdapter(source, {
                formatData: function (data) {
                    var filter = $("#searchField").val();
                    $('#refresh-button2').data('tag', 'Refreshing');
                    $('#refresh-button2').css('background-image', 'url(' + subPath + '/themes/images/Icons/RefreshMe.png)');
                    data.name_startsWith = filter;
                    return data;
                },
                loadComplete: function (data)
                {
                    // data is loaded. 
                    $('#refresh-button2').data('tag', 'RefreshDone');
                    $('#refresh-button2').css('background-image', 'url(' + subPath + '/themes/images/Icons/Refresh.png)');
                    var records = dataAdapterall.records;
                    var length = records.length;

                    $('#rows_info').text(length);
					
					
					var localizationobj = {};
					localizationobj.pagergotopagestring =  setColumnName('pagergotopagestring');
					localizationobj.pagershowrowsstring = setColumnName('pagershowrowsstring');
					localizationobj.pagerrangestring = setColumnName('pagerrangestring');
					localizationobj.pagernextbuttonstring = "Text2";
					localizationobj.pagerpreviousbuttonstring = "Text3";
					localizationobj.sortascendingstring = setColumnName('sortascendingstring');
					localizationobj.sortdescendingstring = setColumnName('sortdescendingstring');
					localizationobj.sortremovestring = setColumnName('sortremovestring');
					
					$("#jqxGrid2").jqxGrid('localizestrings', localizationobj);
					
                },
                loadError: function (xhr, status, error)
                {
                    // data is not loaded.
                    $('#refresh-button2').data('tag', 'RefreshDone');
                    $('#refresh-button2').css('background-image', 'url(' + subPath + '/themes/images/Icons/RefreshMe.png)');
                }
            });
           
            // create nested grid.
            var initrowdetails2 = function (index, parentElement, gridElement, record) {

			};
           
            var initRowDetails2 = function(index, parentElement, gridElement, row){
            parentElement.firstChild.setAttribute("id","yourIframe2_"+row.Id);
            
			};

            $("#jqxGrid2").jqxGrid({
                theme: 'energyblue',
                autoheight: true,
                width: 1280,
                source: dataAdapterall,
                columnsresize: true,
                sortable: true,
				//showfilterrow: true,
                //groupable: true,
				enablebrowserselection: true,
                altrows: true,
                filterable: true,
				 autoshowfiltericon: true,
                selectionmode: 'none', //multiplerows',
                keyboardnavigation: false,
                rowDetails: true,
                pageable: true,
                pagesize: 100,
                pagesizeoptions: ['100','200','300'],
                initRowDetails:initRowDetails2,
                
				
				
				showtoolbar: true,
				autoheight: true,
				rendertoolbar: function (toolbar)
				{
					var me = this;
					var container = $("<div style='margin: 5px; height:50px;'></div>");
					var input = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField' type='text' style='height: 23px; float: left; width: 405px; margin-left:30px;' />");
					var input2 = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField2' type='text' style='height: 23px; float: left; width: 390px; margin-left:25px;' />");
					var input3 = $("<input class='jqx-input jqx-widget-content jqx-rc-all' id='searchField3' type='text' style='height: 23px; float: left; width: 385px; margin-left:8px;' />");
					toolbar.append(container);
					container.append(input);
					container.append(input2);
					container.append(input3);
					//todo add loggedInUser to the request for filtering right result.
					var oldVal = "";
					input.on('keyup', function (event)
					{
						var username = document.getElementById("searchField").value;
						var name = document.getElementById("searchField2").value;
						var lastname = document.getElementById("searchField3").value;
						console.log("Användarnamn: "+username+" Namn: "+name+" Efternamn: "+lastname);
						if (emptySource === false && input.val().length === 0)
						{
							$("#jqxGrid2").jqxGrid({ source: [] });
						}
						if (input.val().length >= 2)
						{
							if (emptySource === true)
							{
								$("#jqxGrid").jqxGrid({ source: dataAdapter });
								emptySource = false;
							}
							if (me.timer)
							{
								clearTimeout(me.timer);
							}
							if (oldVal != input.val())
							{
								me.timer = setTimeout(function ()
								{
									$("#jqxGrid2").jqxGrid('updatebounddata');
								}, 1000);
								oldVal = input.val();
							}
						}
						else
						{
							$("#jqxGrid2").jqxGrid('updatebounddata');
						}
					});
					input2.on('keyup', function (event)
					{
						var username = document.getElementById("searchField").value;
						var name = document.getElementById("searchField2").value;
						var lastname = document.getElementById("searchField3").value;
						console.log("Användarnamn: "+username+" Namn: "+name+" Efternamn: "+lastname);
					});
					input3.on('keyup', function (event)
					{
						var username = document.getElementById("searchField").value;
						var name = document.getElementById("searchField2").value;
						var lastname = document.getElementById("searchField3").value;
						console.log("Användarnamn: "+username+" Namn: "+name+" Efternamn: "+lastname);
					});
				},
				
				
				
				
				
                rowdetailstemplate: {     
                    rowdetails: "<iframe style='height:750px; overflow-y:scroll; width:99%;' scrolling='yes'></iframe>",
                    rowdetailsheight: 760, 
                    rowdetailshidden: true
                },
//                                
                columns: [
                    {text: setColumnName('username'), datafield: 'UserName', width: 425},
                    {text: setColumnName('name'), datafield: 'FirstName', width: 410},
                    {text: setColumnName('surname'), datafield: 'LastName', width: 415},
                ],
                
                
                localization: {
                    sortascendingstring: setColumnName('sortascendingstring'),
                    sortdescendingstring: setColumnName('sortdescendingstring'),
                    sortremovestring: 'Ingen sortering',
                    groupsheaderstring: setColumnName('groupsheaderstring'),
                    groupbystring: setColumnName('groupbystring'),
                    groupremovestring: setColumnName('groupremovestring'),
                    filterclearstring: "Rensa",
                    filterstring: "Filter",
                    filtershowrowstring: "Visa rader där:",
                    filtershowrowdatestring: "Visa rader där datum:",
                    filterorconditionstring: "Eller",
                    filterandconditionstring: "Och",
                    filterselectallstring: "(Markera allt)",
                    filterchoosestring: "Vänligen välj:",
                    filterstringcomparisonoperators: ['ingenting', 'någonting', 'innehåller', 'innehåller(match case)',
                        'innehåller inte', 'innehåller inte(match case)', 'börjar med', 'börjar med(match case)',
                        'slutar med', 'slutar med(match case)', 'lika', 'lika(match case)', 'null', 'inte null'],
                    filternumericcomparisonoperators: ['lika', 'inte lika', 'mindre än', 'mindre än eller lika', 'större än', 'större än eller lika', 'null', 'inte null'],
                    filterdatecomparisonoperators: ['lika', 'inte lika', 'mindre än', 'mindre än eller lika', 'större än', 'större än eller lika', 'null', 'inte null'],
                    filterbooleancomparisonoperators: ['lika', 'inte lika'],
                    validationstring: "Angivet värde är inte giltigt",
                    emptydatastring: "Inga uppgifter att visa",
                    filterselectstring: "Välj filter",
                    loadtext: "Loading...",
                    clearstring: "Rensa",
                    todaystring: "Idag"
                }
				
				
            });
		};

What this does now when it loads: it populate the grid with the results returned from the service, but HARDCODED as you can see.
I would like to take the input from the user in the fields, put them where the hardcoded firstname, lastname and username is. and then reload the grid with the returned data on search.
And ideas?

It should reload the data whenever the user change the searchfield as well te get the new values from the service.

Cheers!

[ProgrammersweParticipant]

So, basically, can you take the input fields, send them to get URL that gets the data and then reload the grid with the data returned?

[ProgrammersweParticipant]

Or maybe: Ol search, change the url, reload the grid data. Getting the input from the searchfield.

[ProgrammersweParticipant]

Nvm, fixed it.

[Author]

Posts