How to Load JqxGrid on button click using ajax call in javascript

[rajneeshParticipant]

Hi ,

I have a search criteria to view error log from database, i need to supply input’s to textbox’s once button click the Grid should load with data from database (i have used mvc application, which is return json data) below is my code in view page

Problem with this is it is loading only once.. but when i click button 2nd time with different search input , the grid is not loaded and it is also not firing the mvc controller method (i have kept debugger, first time it is firing but second time on button click debugger is not working).

<script>

$(document).ready(function () {

$(“#btnresult”).click(function () {

getresult();
});

}); //end of ready function

function getresult() {
var parm = $(“#txtval”).val();
var url = “/Home/check?testval=”+parm;
var source =
{
datatype: “json”,
datafields: [
{ name: ‘CorrelationId’ },
{ name: ‘Device’ },
{ name: ‘Type’ },
{ name: ‘DateReported’ },
{ name: ‘ErrorType’ }
],
id: ‘CorrelationId’,
url: url
};
var dataAdapter = new $.jqx.dataAdapter(source);

$(“#jqxgrid”).jqxGrid(
{
width: 850,
source: dataAdapter,
columnsresize: true,
columns: [
{ text: ‘CorrelationId’, datafield: ‘CorrelationId’, width: 250 },
{ text: ‘Device’, datafield: ‘Device’, width: 250 },
{ text: ‘Type’, datafield: ‘Type’, width: 180 },
{ text: ‘DateReported’, datafield: ‘DateReported’, width: 120 },
{ text: ‘ErrorType’, datafield: ‘ErrorType’, minwidth: 120 }
]
});
}

</script>

and Button is designed like below

<input type=”text” id=”txtval” style=”width:150px;” />
<div id=’jqxWidget’ style=”font-size: 13px; font-family: Verdana; float: left;”>
<div id=”jqxgrid”>
testing the div jqxwidget
</div>
</div>
<button id=”btnresult” type=”button” value=”Click”</button>

[Peter StoevKeymaster]

Hi rajneesh,

If you set the Grid’s source property, the Grid will rebind using the new source. You can do this dynamically using a code like $(“#grid”).jqxGrid({source: newAdapter}); where newAdapter is ned jqxDataAdapter instance.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts