HI,
While loading the page grid is loading,
in my sample code i'm showing userId, username, address,... and
there is one html textbox, one html button also
once after clickingon the html button i need to filter the data based on the textbox value i.e. if the user enters 'ABC' means i need to show only the items that contains ABC in their name or city or address
Below is the sample code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery.min.js" type="text/javascript" />
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css" rel="stylesheet">
</head>
<body>
<div id="example" class="k-content">
<input id="myTextField" type="text" />
<input id="btnGo" type="button" value="Go" onclick='LoadGrid()' />
<div id="grid" style="height: 380px">
</div>
<style scoped>
#clientsDb
{
width: 692px;
height: 413px;
margin: 30px auto;
padding: 51px 4px 0 4px;
background: url('../../content/web/grid/clientsDb.png') no-repeat 0 0;
}
</style>
<script>
function LoadGrid()
{
debugger;
alert('executed');
// $(document).ready(function () {
//var txtUser = document.getElementById('myTextField').value;
$("#grid").kendoGrid({
scrollable: true,
sortable: true,
filterable: true,
pageable: true,
columns: [
{field: "Id", title: "User ID" ,filterable:false , width: "60px"},
{field: "ContactName", title: "User Name",filterable:true , width: "125px" },
{field: "Name", title: "Name",filterable:false , width: "150px"},
{field: "Address", title: "Address",filterable:false , width: "140px"},
{field: "City", title: "City" ,filterable:false , width: "60px"},
{field: "State", title: "State" ,filterable:false , width: "60px"},
{field: "Country", title: "Country" , filterable:false , width: "60px"},
{field: "ZipCode", title: "ZipCode" , filterable:false , width: "60px"},
],
dataSource: {
pageSize: 20,
type: "json",
serverPaging: true,
serverSorting: false,
serverFiltering: false,
transport: {
read: {
//url: "MyGrid.aspx/GetAccounts",
url: "MyGrid.aspx/GetData",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST"
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
schema: {
data: "d.data",
total: "d.total"
}
},
});
//});
//Concatenate drop down variable to file name
//var dynamicUrl = "MyGrid.aspx?Name="+myTextField.value+"/GetData";
var dynamicUrl = "MyGrid.aspx?Name="+myTextField.value+"/GetData";
//Assign grid to variable
var grid = $("#grid").data("kendoGrid");
//Set url property of the grid data source
grid.dataSource.transport.options.read.url =dynamicUrl;
//Read data source to update
grid.dataSource.read();
grid.dataSource.refresh();
}
</script>
</div>
</body>
</html>
Previously at the time of loading (with out considering the filter) i kept uri as
url: "MyGrid.aspx/GetAccounts",
the grid was loading perfectly, now after keeping the textbox and button and inbutton click event i added all the code
and changed the uri to
url: "MyGrid.aspx/GetData",
now the textbox value is not coming to the methos, i tried uri like this also
url: = "MyGrid.aspx?Name="+myTextField.value+"/GetData";
but still it is not coming
please help me..
its urgent and try to understand my situation
thanks in advance
While loading the page grid is loading,
in my sample code i'm showing userId, username, address,... and
there is one html textbox, one html button also
once after clickingon the html button i need to filter the data based on the textbox value i.e. if the user enters 'ABC' means i need to show only the items that contains ABC in their name or city or address
Below is the sample code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery.min.js" type="text/javascript" />
<script type="text/javascript" src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<link href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css" rel="stylesheet">
<link href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css" rel="stylesheet">
</head>
<body>
<div id="example" class="k-content">
<input id="myTextField" type="text" />
<input id="btnGo" type="button" value="Go" onclick='LoadGrid()' />
<div id="grid" style="height: 380px">
</div>
<style scoped>
#clientsDb
{
width: 692px;
height: 413px;
margin: 30px auto;
padding: 51px 4px 0 4px;
background: url('../../content/web/grid/clientsDb.png') no-repeat 0 0;
}
</style>
<script>
function LoadGrid()
{
debugger;
alert('executed');
// $(document).ready(function () {
//var txtUser = document.getElementById('myTextField').value;
$("#grid").kendoGrid({
scrollable: true,
sortable: true,
filterable: true,
pageable: true,
columns: [
{field: "Id", title: "User ID" ,filterable:false , width: "60px"},
{field: "ContactName", title: "User Name",filterable:true , width: "125px" },
{field: "Name", title: "Name",filterable:false , width: "150px"},
{field: "Address", title: "Address",filterable:false , width: "140px"},
{field: "City", title: "City" ,filterable:false , width: "60px"},
{field: "State", title: "State" ,filterable:false , width: "60px"},
{field: "Country", title: "Country" , filterable:false , width: "60px"},
{field: "ZipCode", title: "ZipCode" , filterable:false , width: "60px"},
],
dataSource: {
pageSize: 20,
type: "json",
serverPaging: true,
serverSorting: false,
serverFiltering: false,
transport: {
read: {
//url: "MyGrid.aspx/GetAccounts",
url: "MyGrid.aspx/GetData",
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST"
},
parameterMap: function (options) {
return JSON.stringify(options);
}
},
schema: {
data: "d.data",
total: "d.total"
}
},
});
//});
//Concatenate drop down variable to file name
//var dynamicUrl = "MyGrid.aspx?Name="+myTextField.value+"/GetData";
var dynamicUrl = "MyGrid.aspx?Name="+myTextField.value+"/GetData";
//Assign grid to variable
var grid = $("#grid").data("kendoGrid");
//Set url property of the grid data source
grid.dataSource.transport.options.read.url =dynamicUrl;
//Read data source to update
grid.dataSource.read();
grid.dataSource.refresh();
}
</script>
</div>
</body>
</html>
Previously at the time of loading (with out considering the filter) i kept uri as
url: "MyGrid.aspx/GetAccounts",
the grid was loading perfectly, now after keeping the textbox and button and inbutton click event i added all the code
and changed the uri to
url: "MyGrid.aspx/GetData",
now the textbox value is not coming to the methos, i tried uri like this also
url: = "MyGrid.aspx?Name="+myTextField.value+"/GetData";
but still it is not coming
please help me..
its urgent and try to understand my situation
thanks in advance
3 Answers, 1 is accepted
0
Just
Top achievements
Rank 1
Rank 1
answered on 16 Nov 2012, 03:19 PM
You can filter the grid based on what's entered in the search box using the kendo data source filter option.
Take a look:
http://docs.kendoui.com/api/framework/datasource#filter array objectdefault
Take a look:
http://docs.kendoui.com/api/framework/datasource#filter array objectdefault
0
Phani
Top achievements
Rank 1
Rank 1
answered on 18 Nov 2012, 12:19 PM
Dude i want to enter run time data, not static data
and it should goto the server again and need to fetch the records.. like if the page size is 20 means.. it should bring first 20 (if exist) records
not the items in the already existed first 20
and it should goto the server again and need to fetch the records.. like if the page size is 20 means.. it should bring first 20 (if exist) records
not the items in the already existed first 20
0
Just
Top achievements
Rank 1
Rank 1
answered on 20 Nov 2012, 09:58 PM
Dude then check your grid configuration first. You may want to reset the following property
serverFiltering: false,
and then look at http://docs.kendoui.com/api/framework/datasource#serverfiltering and send the filter criteria back to your controller.
serverFiltering: false,
and then look at http://docs.kendoui.com/api/framework/datasource#serverfiltering and send the filter criteria back to your controller.