Question about Master-Detail Grid

[Michael Ziegler]

Hi there,

First I would like to thank you for the community license!

I am currently working on my first ASP.NET Web-Project and testing your controls. I went through the Master-Detail Examples and grid documentation, but I can't find any solution to my problem. Maybe you can help me on this topic:

- I have 2 grids (master and detail)
- both grids are populated with data (list of custum elements) with page_load()

Questions:
- How to reload the grids (which event or toolbar-button-click to use), no json available (for ej.query)?
- How to filter the lines of the second grid based on a string-field in the first grid (string contains or startswith needed)?

Further Topic:
- I am trying to implement a map control so if you select a row within the first grid it should filter the second grid and display the data in a map (when no row selected in first grid, no map visible), row selections in second grid would not effect the other controls.

Thank you very much,
Michael

[Michael Ziegler]

FYI: I have implemented a getdata function in the test.aspx as mentioned in the example for grid/set dynamic datasource, test1 & test2 are the 2 grids.

I think the error is somewhere in the javascript with ej.query when I call for the filtered data:

 $(function () {
            $('#<%= test1.ClientID %>').ejGrid({
                selectedRowIndex: 0,
                rowSelected: function (args) {
                    var uzid = args.data.someparam;
                    var query = new ej.Query().addParams("test", someparam);
                    var dm = ej.DataManager({ url: "test.aspx/GetData", adaptor: new ej.UrlAdaptor() });
                    var promise = dm.executeQuery(query);
                    promise.done(function (e) {
                        var gridObj = $('#<%= test2.ClientID %>').ejGrid("instance");
                       gridObj.dataSource(e.result);
                    });
                }
            });
        });

[Michael Ziegler]

I had an error with copy of code in one line:
var query = new ej.Query().addParams("test", uzid);

[Balaji Marimuthu]

Hi Michael,

Thanks for using Syncfusion Products..

Query:#1 How to reload the grids (which event or toolbar-button-click to use), no json available (for ej.query)?

You can reload the grid using the refreshContent method in ActionComplete event or toolbarclick event. Please refer the help document.

ActionComplete Event: Triggered for every grid success event
http://helpjs.syncfusion.com/js/api/ejgrid#events:actioncomplete

ToolBarClick Event: Triggered when toolbar item is clicked in grid.
http://helpjs.syncfusion.com/js/api/ejgrid#events:toolbarclick

refreshContent Method: Used to refresh the grid contents.
http://helpjs.syncfusion.com/js/api/ejgrid#methods:refreshcontent

Please refer the code example below:

<ej:Grid ID="EmployeesGrid" runat="server">

             <ClientSideEvents ToolbarClick="onToolBarClick" />

            <ToolbarSettings ShowToolbar="True">

                <CustomToolbarItem>

                    <ej:CustomToolbarItem TemplateID="#Refresh" />

                </CustomToolbarItem>

            </ToolbarSettings>

            <Columns>

                <ej:Column Field="EmployeeID" HeaderText="Employee ID" Width="80" />

                <ej:Column Field="FirstName" IsPrimaryKey="true" HeaderText="FirstName" Width="80" />

                <ej:Column Field="LastName" HeaderText="Freight" Width="100" EditType="Numeric" />

                <ej:Column Field="Country" HeaderText="ShipCity" Width="80" />

            </Columns>
        </ej:Grid>

<script type="text/javascript">

function onToolBarClick(sender, args) {

                this.refreshContent();  //reloads the grid in toolbarclick event
        }
</script>

Query:#2 How to filter the lines of the second grid based on a string-field in the first grid (string contains or startswith needed)?

The second Grid can be filtered based on the string field in first Grid by using the where filter LINQ operation in Grid. Please add the Syncfusion.Linq.Base dll assembly to reference.

  using Syncfusion.Linq;     

       [WebMethod]

        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]

        public static object Data(string test)

        {

            IEnumerable Data = new Order().OrderDetails.ToList();

            int count = Data.AsQueryable().Count();

            //Data = Data.AsQueryable().Where("CustomerID", "F", FilterType.StartsWith, true);

           Data = Data.AsQueryable().Where("FirstName", test, FilterType.Contains, true);  //Filtering the data

            return Data; // return data
        }

Query:#3  I have implemented a getdata function in the test.aspx as mentioned in the example for grid/set dynamic datasource, test1 & test2 are the 2 grids. I think the error is somewhere in the javascript with ej.query when I call for the filtered data: 

Based on your requirement we have created a sample. Please refer the below code example:

$(function () {

            var $data = $('#<%= OrdersGrid.ClientID %>').ejGrid("instance")._dataSource();

            $('#<%= EmployeesGrid.ClientID %>').ejGrid({

                selectedRowIndex: 0,

                rowSelected: function (args) {

                    

                    var query = new ej.Query().addParams("test", args.data.FirstName);

                    var dm = ej.DataManager({ url: "Default.aspx/Data", adaptor: new ej.UrlAdaptor() });

                    var promise = dm.executeQuery(query); 

                    promise.done(function (e) {

                        var gridObj = $('#<%= OrdersGrid.ClientID %>').ejGrid("instance");

                        gridObj.dataSource(e.result); // bind the data

                    });

                }

            });

           

        });

       

Please try using the above code and still if you face the issue means kindly share us the screen shot or full code.

Query:#4 I had an error with copy of code in one line: var query = new ej.Query().addParams("test", uzid);

We have prepared a sample and checked with the provided code. But we have not get any error in the mentioned line. Please refer the attached sample and share us the screenshot/ sample to reproduce the reported issue from our end.

Query:#5  I am trying to implement a map control so if you select a row within the first grid it should filter the second grid and display the data in a map (when no row selected in first grid, no map visible), row selections in second grid would not effect the other controls. 

Currently we are working with map sample and we will update you the sample by August 21, 2015.

Please get back to us if you need any further assistance.


Regards,
Balaji Marimuthu

[Balaji Marimuthu]

Hi Michael,

Sorry about the inconvenience caused.

We have missed to attach the sample in previous update. So Please find the sample in following link:
Sample: WebApplication17_(2)

Regards,
Balaji Marimuthu

[Michael Ziegler]

Hi Balaj,

Thank you very much vor your assistance in this case. The details you mentioned and the example provided helped me a lot to get my script running.

At the moment I am working on the solution with adding data to a (worldwide) map and display the results.

Thank you very much,
Michael

[Michael Ziegler]

Hi Balaji,

One problem you may know is: why do i have problems within the map with this part:
                    <colormappings>
                        <MappingCollection>
                            <ej:RangeColorMapping From = "0" To = "0" Color = "#9BC585"></ej:RangeColorMapping>
                            <ej:RangeColorMapping From = "1" To = "1" Color = "#D2DB9A"></ej:RangeColorMapping>
                            <ej:RangeColorMapping From = "2" To = "2" Color = "#A4D4BF"></ej:RangeColorMapping>
                            <ej:RangeColorMapping From = "3" To = "3" Color = "#E0C68F"></ej:RangeColorMapping>
                        </MappingCollection>
                    </colormappings>

Colormappings and MappingCollection don't get Validation and ej:RangeColorMapping shows up as an Unknown Element (web.conf error). But with namespace do I have to import?

Thank you,
Michael

[Mohana V]

Hi Michael,

Query: "if you select a row within the first grid it should filter the second grid and display the data in a map"

We have added map control along with grid sample and if we select any row in the first grid, map will display respective data without affecting other control.

Please find the below sample:
http://www.syncfusion.com/downloads/support/forum/119964/ze/WebApplication1389696470


Please let us know in case of any queries.

Regards,
Mohana V

[Mohana V]

Hi Michael,

Query: "Colormappings and MappingCollection don't get Validation"
 
We can apply colormappings to the map in code behind "Default.aspx.cs" instead of "Default.aspx" page and please refer the code snippet below.
 

protected void Page_Load(object sender, EventArgs e)

        {

            EmployeeDetails();

            (this.selectmap.Layers[0] as ShapeLayer).ShapeSettings.ColorMappings = new ColorMapping

            {

                MappingCollection = new List<object>()

                {

                    new RangeColorMapping() { From = 11, To = 40, Color = "#9BC585" },

                    new RangeColorMapping() { From = 41, To = 65, Color = "#D2DB9A" },

                    new RangeColorMapping() { From = 66, To = 100, Color = "#A4D4BF" },

                    new RangeColorMapping() { From = 101, To = 140, Color = "#E0C68F" }

                }

            };

            (this.selectmap.Layers[0] as ShapeLayer).ShapeData = GetUSA(); 

            
        }

We have modified the sample to achieve your requirement "RangeColormapping to the map data" and please find the modified sample in the below link:
http://www.syncfusion.com/downloads/support/forum/119964/ze/WebApplication_mapSample1996162576


Please let us know in case of any queries.

Regards,
Mohana V

[Michael Ziegler]

Hi Mohana,

Thank you very much for the provided example, it was very helpful for me.

But I still face a problem with changing the datasource in JS. The Codeline is:

$("#MainContent_selectmap").data("ejMap").model.layers[0].dataSource = selectedMapsData;

On the other side, this code is working:

var gridObj = $('#<%= OrdersGrid.ClientID %>').ejGrid("instance");
gridObj.dataSource(e.result);

Do you have any Idea?

Thank you,
Michael

[Michael Ziegler]

Hi,

I am playing around with my code and I got the Element with ClientID and it's running: 

var mapObjX = $('#<%= selectmap.ClientID %>').data("ejMap").model.layers[0];
                   
But I have another question: When you change the datasource of the map, it looks like I am loosing the .shapeSettings.colorMappings?

Thank you,
Michael

[Michael Ziegler]

Ah sorry, it was a problem within my code :)

[Jaganprabu D]

Hi Michael,

Thanks for your update.

Please let us know if you have any further queries.

Regards,
Jaganprabu.D