We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Question about Master-Detail Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

119964 Aug 19,2015 06:50 AM UTC Aug 28,2015 04:05 AM UTC ASP.NET Web Forms 12
loading
Tags: Map
Michael Ziegler
Asked On August 19, 2015 06:50 AM UTC

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
Replied On August 19, 2015 09:15 AM UTC

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
Replied On August 19, 2015 10:08 AM UTC

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

Balaji Marimuthu [Syncfusion]
Replied On August 20, 2015 02:01 PM UTC

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 [Syncfusion]
Replied On August 20, 2015 02:19 PM UTC

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
Replied On August 21, 2015 11:50 AM UTC

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
Replied On August 21, 2015 12:04 PM UTC

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 [Syncfusion]
Replied On August 21, 2015 12:13 PM UTC

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 [Syncfusion]
Replied On August 24, 2015 06:27 AM UTC

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
Replied On August 26, 2015 07:50 AM UTC

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
Replied On August 27, 2015 12:54 PM UTC

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
Replied On August 27, 2015 01:15 PM UTC

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

Jaganprabu D [Syncfusion]
Replied On August 28, 2015 04:05 AM UTC

Hi Michael,

Thanks for your update.

Please let us know if you have any further queries.

Regards,
Jaganprabu.D

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;