Angular UI Grid - reload data not working - angular-ui-grid

I am using ui-grid. The left panel has search filters and a search button which populates data into grid in right panel (initially grid renders without data). Application has two separate controller one for search panel and another for grid.
Now i am using shared service to pass data from searchController to gridController but data in grid is not displaying. I can see gridOptions.data is set by that function.
console.log( $scope.gridOptions.data)//length is 2 here.
If i tried to call http.get directly from grid controller and bind data in success object, grid populates properly.
I tried different methods to refresh/reload (see below) the grid but no results.
$scope.gridApi.core.refresh();
Any suggestion.

You have to assign data to $scope.gridOptions.data in your grid controller.
I assume, you are getting that data from your shared service.
Also ensure, search button generates an event which fetches data from shared service, and assigns it.

Related

Recommended way to do the search and populating the grid in ASP.NET Core MVC 6

I am creating a project where I need to create a view with search textboxes and a dropdown which would be populated from the server. Same view also have a grid which would be populated based on the search criteria enter/selected by user.
I want to know what would be the design of the page in terms of showing both on same page. Should I create a partial view for the grid or Search panel or add both in the single view?
Note that dropdown list would need to be populated from the ViewModel. So what is the common practice in the situation. I am new to this I have done few pages but with lot of code, session and ViewBags and I think I am not following recommended practice.
Actually, the design for your web application is according to your requirement.
For example, if you want grid to work with other datasource or view, you could build it as a component, then if you want to use it, you could directly use this component to avoid write the same codes for multiple time.
If you want to use same grid to show in some other page, you could build it a partial view, then you could directly call this view to show something.

Kendo UI Grid data bind to two table DB

I am trying to figure out two things. First, is it even possible. Second, am I on the correct path?
I am making an ASP.net Kendo UI Grid that just needs a very simple two table, inner join from an Entity Framework model. The issue is that one of the fields is incredibly large. It requires me to set the value to the json object size to max int value just to be able to return a single table result.
Because the resulting set is so large, I do not seem to be able to use a view model. It just returns a size limit error on that as well. Is there a way to return a very large dataset from two tables to a single Kendo UI grid? I have tried every suggestion from every existing answer on Stack Overflow and the Telerik forums.
I don't really think that some user need information which cannot be handled by default json object size.
May be should load first 50-100 characters from that field to grid and if user click on cell load rest of the data.
Another way is using virtual scroll or paging.
If kendo model cant handle your field size, you can add columnt to each row with view large data button and open window with text field loaded from db on click.

Ui-grid: how can I create multiple ui grids dynamically

I need to display multiple ui grids in my screen. The number of grids are dynamic.
Scenario: I am adding some people in a list and proceeds to next screen where I need to display their details in a separate ui grid. How can I create grid options dynamically?
Wrap up the code and html inside a directive, pass the table data to the directive.See the answer from user CMR here...I hope this helps.
Custom directive for Ui Grid

UI MVC Grid with custom command

I have a grid which displays a list of branches. I also have a ContactDetails button on each row which is a custom command popping a Kendo window displaying the details. It all works fine. However, I want these details to be editable. How should I approach this? I cannot seem to be able to access the model through the window.
I am using the code from their custom command demo: http://demos.telerik.com/aspnet-mvc/grid/custom-command
Ultimately, what I want is the grid to pass in the model representing the relevant row into the window so that the model can be modified and then persisted on the database.

Create Child View based on selection in Drop Down List

I am using MVC 5 and I have the following situation:
I have a drop down list on a view that changes the child view that is displayed based on the selection in the list. This needs to change on the onchange or similar event. The selections in the list are populated from a database and has the following properties:
Link ID - Int (to be used as a value for the selection (must be saved on the main view)
Link Text - What is to be displayed in the drop down list.
LinK URL - The address of the child view action (made up of different areas, controllers, and actions)
In essence, when the list changes, it must call the URL (passing the model) and return the content to a targeted placeholder div on the page
Any Ideas on where to get started on this one?
We were able to get this working using ajax to call the child view. Thanks for the pointers.

Resources