How to Update Jquery Data Table - ajax

I am using Jquery data table plugin. I was able to display it properly with filtering, sorting and Paging.
But, now the problem is i need to filter the data table rows based on dropdown selection made.
but, i do not have any idea how to do this..I am very new to MVC. So, here i need to send that dropdown selected item as parameter to a server side method and call a method and rebind data to the data table.
I am initially binding data to the data table using for loop and iterating over a datatable
Do i need to use Ajax here..if so how to get the new datatable/data to this view and bind to data table?
Please suggest the way to do..

you use the jquery datatable for this
create function and paste jquery datatable code in there
then call this function on dropdown selection change using jquery.
Tips :jquery datatable code available on net find and use it

Related

How to load datatable on change of dropdown

I have a view where there is a dropdown and datatable.
At initial load, I am loading the values to be loaded in the datatable based on the first select of dropdown and on change of dropdown, I want to fetch data based on that condition and populate those data on the datatable.
Please anyone suggest a way to do this!
I am trying a way using get request but it is reloading the page and hence I am unable to make the data persist in the datatable.
I followed exactly this https://laracasts.com/discuss/channels/laravel/filtering-data-using-drop-down-onchange-event
Data is coming and populates to the datatable but just after a second, it reloads and comes to old data in datatable.
Please either correct my or suggest some new way to do it!
After debugging, I found that in one of the js file included, there were a code
$(document).ajaxStop(function() {
window.location.reload();
});
Since, this code was making it to reload on every ajax call completes, I faced this issue.

Display multiple new rows in Kendo Grid

I am doing an inline add using Kendo Grid, but on the server side I am actually creating multiple records. The DataSourceRequest sends back all the newly created rows, but only one is added to the grid. The other added records may not show up in the grid at all until the grid is forced to query for the data again.
Is there a way for me to add multiple rows at once?
If not, is there a way to re-query the data and put all newly added models at the top?
In my controller function that creates the new records, I am returning the following. "models" contains all of the newly created records:
return this.Json(models.ToDataSourceResult(request, this.ModelState), JsonRequestBehavior.AllowGet);
I also have a similar issue when updating a row since the server may actually update multiple rows. Since "models" contains multiple models, the first one in the list may or may not be the actual model selected to be updated, so sometimes a different edited model will replace the model that was selected to be updated in the grid.
Thanks,
Rob
I ended up using the kendo grid datasource insert method to add any records returned by my controller that were not already in the grid. I did this in the RequestEnd event for the datasource.
In order for this to work for inline adds, I needed to make sure the first model in the list returned by the controller was always the model being added by the grid. For some reason the initial model being added does not have an ID until the dataBinding event is reached which occurs after the RequestEnd event. So on adds, I simply ignore the first model in the results because it is already in the grid.
Also, when editing rows that are manually inserted into the datasource and then cancelling the edit, the grid removes them from the datasource. I had to block this using the preventDefault() function in the DataBinding event when a "remove" action was encountered directly after editing a row that I manually inserted into the datasource.

Telerik MVC grid data binding using Stored Procedure

Am using a telerik mvc grid to populate a data by passing the text that the user enters in a HTML textbox. Once the text is entered, I have a button which once we click, it should populate a telerik mvc grid with data (data should come by passing in the text into the stored procedure).
I have the stored proc, I have the controls in place and I want to use ajax binding to get the data from the controller using a view model. Am new to Razor, please help.
Check this demo, I think it is really close to the case you explained.
http://demos.telerik.com/aspnet-mvc/Grid/Filtering?theme=vista

Dynamic editable table/grid generation with postback in MVC

I need to generate a table in MVC that can have a variable set of horizontal columns (years). I need to render a textbox in each cell and I need to postback the values to a action method. I have seen examples where the editable cells are generated but the columns are fixed (using partials). I have also seen examples where the table can be rendered with dynamic columns but without the editable cells/textboxes. Can anyone suggest an approach?
I would recommend creating the dynamic table with a textbox in each cell with an onchange action to send the data via ajax to the controller for the update.
You will probably need to pass a multidimensional array within the model and use it to create and load your table.
The question is though how are you expecting to handle this on the server side?
If you name them all sequentially and know the # of columns ahead of time the model binder CAN bind to a list for you if they are all named in the appropriate format. Do you want to generate the list from a model or some other method?
Phil Haack covers how the naming format is, although the EditorFor will handle this automatically in some cases. If it doesnt work in yours, simply naming them in this scheme should work.
http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx

JQGrid edit form dropdown populated from database

My edit form requires a dropdown to be populated by a database call. I realize I must set the dataurl parm in the colModel. Does anyone have an example using a linq to sql call which returns the data in the format the jqgrid is looking for. Thanks.
You may want to look into jqGrid for ASP.NET.

Resources