
Prashanth CS
Top achievements
Rank 1
Prashanth CS
asked on 29 Jan 2013, 12:21 PM
Hi..
I have a MVC view.
I have a few textboxes and drop down lists and a kendo grid in it .
And I have a find button.
My controller code for reading records and edit and destroy are in place.
The problem is, when we configure the grid to read records,
It is displaying all the records in the grid at view load it self.
what I want is,
Initially when the view loads, the grid should not be visible. and it should not have any records.
When I click on the find button, it should fetch the records and display it in the grid.
In the grid, I should be able to edit/add/delete records.
How can I do this using Kendo Grid?
I have a MVC view.
I have a few textboxes and drop down lists and a kendo grid in it .
And I have a find button.
My controller code for reading records and edit and destroy are in place.
The problem is, when we configure the grid to read records,
It is displaying all the records in the grid at view load it self.
what I want is,
Initially when the view loads, the grid should not be visible. and it should not have any records.
When I click on the find button, it should fetch the records and display it in the grid.
In the grid, I should be able to edit/add/delete records.
How can I do this using Kendo Grid?
1 Answer, 1 is accepted
0
Accepted
Hello Prashanth,
When the button is clicked you should call the DataSource read method to load the data and change the display property:
I hope this will work in your scenario.
Regards,
Dimiter Madjarov
the Telerik team
If you want the grid not to be automatically bound on initial load, you could set the AutoBind() option to false. You can also hide it by using the display:none CSS property.
See the code below:
@(Html.Kendo().Grid<KendoMvcPractice.ViewModels.ProductViewModel>()
.Name(
"AjaxGrid"
)
.AutoBind(
false
)
...
)
<style>
#AjaxGrid{
display:none;
}
</style>
When the button is clicked you should call the DataSource read method to load the data and change the display property:
<button id=
"showGrid"
>ShowGrid</button>
<script>
$(
"#showGrid"
).click(
function
() {
$(
"#AjaxGrid"
).data(
"kendoGrid"
).dataSource.read();
$(
"#AjaxGrid"
).css(
"display"
,
"block"
);
});
</script>
I hope this will work in your scenario.
Regards,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Prashanth CS
commented on 01 Feb 2013, 10:10 AM
Top achievements
Rank 1
Hi Dimiter Madjarov ..
Thank you so much..
I will try this and if I can make it work., I will mark it as answer.,
Thank you so much..
I will try this and if I can make it work., I will mark it as answer.,
Prashanth CS
commented on 06 Feb 2013, 12:27 PM
Top achievements
Rank 1
Thank you so much Dimiter Madjarov ..
It works like magic.,
This is exactly what I was looking for.
Thanks a ton again.
Regards,
Prashanth.
It works like magic.,
This is exactly what I was looking for.
Thanks a ton again.
Regards,
Prashanth.
Robert
commented on 08 Feb 2013, 12:12 AM
Top achievements
Rank 1
Hi Dimiter,
Could you post the rest of the datasource configuration for the grid instead of '...'? I'm having the same issues as Prashanth and am unsure how to configure the grid's datasource to make an ajax call, passing the search parameters the user entered in the HTML inputs.
Regards,
Robert
Could you post the rest of the datasource configuration for the grid instead of '...'? I'm having the same issues as Prashanth and am unsure how to configure the grid's datasource to make an ajax call, passing the search parameters the user entered in the HTML inputs.
Regards,
Robert
Dimiter Madjarov
commented on 11 Feb 2013, 03:57 PM
Telerik team
Hello Robert,
You could pass additional parameters to the Action with the Data method of the Crud Operation Builder. For your convenience I am attaching the full source code of the solution.
Please let me know if it works in your scenario.
Dimiter Madjarov
the Telerik team
You could pass additional parameters to the Action with the Data method of the Crud Operation Builder. For your convenience I am attaching the full source code of the solution.
Please let me know if it works in your scenario.
Regards,
Dimiter Madjarov
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Narender
commented on 12 Feb 2013, 04:28 PM
Top achievements
Rank 1
Hi Dimiter,
The downloaded code works perfectly fine.
when applied the same on my application, for some reason the form is not getting posted to server on button click to call the controller method.when i click the grid for paging/sorting/interchanging columns, the same method on the controller gets hit.
Iam i missing something to be configured...and moreover i dont see the method datasource on the data method in the intellisense.
$("#AjaxGrid").data("kendoGrid").dataSource.read();
Thanks,
Naren
The downloaded code works perfectly fine.
when applied the same on my application, for some reason the form is not getting posted to server on button click to call the controller method.when i click the grid for paging/sorting/interchanging columns, the same method on the controller gets hit.
Iam i missing something to be configured...and moreover i dont see the method datasource on the data method in the intellisense.
$("#AjaxGrid").data("kendoGrid").dataSource.read();
Thanks,
Naren
Narender
commented on 12 Feb 2013, 05:53 PM
Top achievements
Rank 1
Dimiter, it was my mistake...its working fine
Thanks for the post
Thanks for the post
Robert
commented on 12 Feb 2013, 11:55 PM
Top achievements
Rank 1
Hi Dimiter,
Works perfectly. Thanks for your help. I was missing the .Data part for the datasource to get values to send to the server.
Robert
Works perfectly. Thanks for your help. I was missing the .Data part for the datasource to get values to send to the server.
Robert
Mithun Prasath
commented on 30 Nov 2013, 09:36 AM
Top achievements
Rank 1
Hai,
I need a example for kendo grid which data's are based on the value i given in a form, and the grid is loaded after submitting the values, i need an example in
java(jsp) pls i am waiting
I need a example for kendo grid which data's are based on the value i given in a form, and the grid is loaded after submitting the values, i need an example in
java(jsp) pls i am waiting
Dimiter Madjarov
commented on 02 Dec 2013, 09:54 AM
Telerik team
Hi Mithun,
Currently we don't have such example. Nevertheless as stated in the previous answers if the Grid should not be bound on page load, you should set it's autoBind option to false. In this case the developer is responsible to trigger the data load by calling the read method of the Grid's dataSource.
E.g.
This method accepts an optional object parameter, which contains an additional data, that will be send to the Read action. In the current case this could be the values entered in the form.
If you are still experiencing any specific issues, you could open a support ticket and send us a sample project, demonstrating the exact problem, so we could assist you further.
Have a great day!
Regards,
Dimiter Madjarov
Telerik
Currently we don't have such example. Nevertheless as stated in the previous answers if the Grid should not be bound on page load, you should set it's autoBind option to false. In this case the developer is responsible to trigger the data load by calling the read method of the Grid's dataSource.
E.g.
$(
"#AjaxGrid"
).data(
"kendoGrid"
).dataSource.read();
This method accepts an optional object parameter, which contains an additional data, that will be send to the Read action. In the current case this could be the values entered in the form.
If you are still experiencing any specific issues, you could open a support ticket and send us a sample project, demonstrating the exact problem, so we could assist you further.
Have a great day!
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Shashank
commented on 19 Aug 2014, 11:58 PM
Top achievements
Rank 1
Hi,
I am loading the data on page but when a user makes any changes then the on seperate button click I want the data and then I will post it to the server. Any help
I am loading the data on page but when a user makes any changes then the on seperate button click I want the data and then I will post it to the server. Any help
Dimiter Madjarov
commented on 21 Aug 2014, 06:23 AM
Telerik team
Hi Shashank,
It is not exactly clear what is the current case. Could you please elaborate further so we could provide assistance?
I am looking forward to hearing from you.
Regards,
Dimiter Madjarov
Telerik
It is not exactly clear what is the current case. Could you please elaborate further so we could provide assistance?
I am looking forward to hearing from you.
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
DavidOBrien
commented on 21 Aug 2014, 09:35 PM
Top achievements
Rank 2
How I do it .... For the button I want to actually load the grid I subscribe to the click event...
Then using the datasource -> transport -> data configuration I send the form fields content, in my case this is the value of some multiselects
which when clicked sends this to my ajax page
// subscribe to click on the governance button
$(
'#governance'
).on(
"click"
,
'#generate'
,
function
(e) {
readGrid();
});
Then using the datasource -> transport -> data configuration I send the form fields content, in my case this is the value of some multiselects
function
readGrid( e ) {
// If the grid exists empty it
if
( $(
"#grid"
).data(
"kendoGrid"
) != undefined ) {
$(
"#grid"
).empty();
}
var
data_source =
new
kendo.data.DataSource({
batch:
true
,
pageSize: 50,
serverFiltering:
true
,
serverPaging:
true
,
serverSorting:
true
,
transport: {
read: {
url:
"ajaxdata/grid_governance.php"
,
dataType:
"json"
,
type:
"POST"
,
data:
function
() {
// THESE ARE ALL MY FORMS FIELDS
var multiselect6 = $("#manager6").data("kendoMultiSelect");
var multiselect7 = $("#manager7").data("kendoMultiSelect");
var multiselect8 = $("#manager8").data("kendoMultiSelect");
var multiselect9 = $("#manager9").data("kendoMultiSelect");
var multiselect10 = $("#manager10").data("kendoMultiSelect");
var multiselect11 = $("#manager11").data("kendoMultiSelect");
var multiselect12 = $("#manager12").data("kendoMultiSelect");
var
value6 = multiselect6.value();
var
value7 = multiselect7.value();
var
value8 = multiselect8.value();
var
value9 = multiselect9.value();
var
value10 = multiselect10.value();
var
value11 = multiselect11.value();
var
value12 = multiselect12.value();
return
{
manager6: value6,
manager7: value7,
manager8: value8,
manager9: value9,
manager10: value10,
manager11: value11,
manager12: value12,
// I also send this to my single ajax page to tell it what action to perform
action:
"ReadGrid"
}
}
},
update: {
url:
"ajaxdata/grid_governance.php?action=UpdateGrid"
,
dataType:
"json"
,
type:
"POST"
},
},
schema: {
data:
function
(response) {
// I also return the actual sql used in my ajax call for debugging :)
$(
"#sql"
).html( response.sql );
return
response.data;
},
total:
"total"
,
model: {
id:
"HostID"
,
fields: {
...
},
},
}
});
var
grid = $(
"#grid"
).kendoGrid({
dataSource: data_source,
sortable:
true
,
filterable:
true
,
scrollable:
true
,
minheight: 600,
height: 600,
navigatable:
true
,
reorderable:
true
,
resizable:
true
,
pageable: { refresh:
true
, pageSizes: [25,50,100,250,500,1000], buttonCount: 10 },
editable:
true
,
columns: [
...
]
});
};
which when clicked sends this to my ajax page
manager5: 00467094
DavidOBrien
commented on 21 Aug 2014, 09:37 PM
Top achievements
Rank 2
I meant manager6 in the POST data :\ not manager5
Dimiter Madjarov
commented on 22 Aug 2014, 12:09 PM
Telerik team
Hello David,
It is not exactly clear what issue are you experiencing in the current case. Could you please elaborate further?
As a side note I would suggest to destroy the Grid before emptying and recreating it.
Regards,
Dimiter Madjarov
Telerik
It is not exactly clear what issue are you experiencing in the current case. Could you please elaborate further?
As a side note I would suggest to destroy the Grid before emptying and recreating it.
Regards,
Dimiter Madjarov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!