Circular Gauge

[Prasanth]

Hi there,

I am trying to use circular gauge with a grid.  Basically whenever I select a row in grid, I need refresh the Circular Gauge datasource (to fetch the child rows with value)

I have tried few things doesn't seems to work, a sample from your side would be appreciated

Regards

Prasanth

[Saravana Kumar Kanagavel]

Hi Prasanthan, 

 

Thanks for contacting Syncfusion Support. 

 

We have analyzed your query and prepared a sample based your requirement. In the sample, we have maintain grid and circular gauge in same view page and gauge will redrawing with grid value based on selecting the row in grid. 

 

Please find the code snippet below 

 

[CSHTML] 

@(Html.EJ().Grid<object>("LargeData") 

           .AllowPaging(true) 

           .ClientSideEvents(c=>c.RowSelected("rowSelect"))     

) 

function rowSelect(sender) { 

        // To get the gauge instance 

        var gauge = $("#circulargauge1").ejCircularGauge("instance"); 

        // To set the pointer value to the gauge 

        gauge.setPointerValue(0, 0, sender.data.Employee_ID); 

    } 

 

Kindly find the sample from the below location. 

Sample Link : https://www.syncfusion.com/downloads/support/forum/133390/ze/Sample737103102 

  

Find the output of the sample below 

 

 

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K. 

[Prasanth]

Hi Saravana, 

Thanks for the sample solution, I should have asked you bit more on this at the beginning.  I have two grids, parent and child which is easy to implement.  For example let's say first grid has individual invoice for total purchase.  Second grid has payments which can be multiple for one single invoice.  And databind is set up on first and second grid to refresh second grid records based on first grid record selection.

I need to have circular gauge maximum value set based on first parent record selection (total invoice value)

I need to have circular gauge current value set based on total of the payments made so far (that is total of second grid records).  If I could use the total sum value based on the second grid (which has paging by the way) related records of first grid.

Kind Regards

Prasanth

[Saravana Kumar Kanagavel]

Hi Prasanthan, 

 

Thanks for your update. 

 

We have analyzed your query and modified the sample based on your requirement. In the sample, we have initially loaded the two grids with circular gauge control. In the first grid, we have loaded the data source for total invoice of payment by customer and other grid, we have loaded the data source for multiple payments by customer. Then, when we selecting the row in first grid, the circular gauge control refreshed with total sum of payment values from second grid  and also second grid refreshed with its multiple payments for particular customer. 

 

And you can find the modified sample from the below location. 

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/133390/ze/Sample1593735027 

  

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K. 

[Prasanth]

Hi Saravana,

Thank you for the solution.  Seems to be working fine if I load the data at once.  But I am trying to get it working for grid which uses URL adaptor e..g

.Datasource(ds => ds.URL("BatchDataSource")

                            .BatchURL("BatchUpdate").Adaptor(AdaptorType.UrlAdaptor))

Which doesn't seems to work well in javascript.

If you could provide an updated working sample that would be greatly appreciated.  I am sorry for raising multiple questions on this issue.

Regards

Prasanth

[Saravana Kumar Kanagavel]

Hi Prasanthan, 

 

Thanks for your update. 

 

We have analyzed your query and modified the sample based on your requirement. In the sample, we have binding the data to the grid using UrlAdaptor. 

Please find the code snippet below 

 

[CSHTML] 

<div style="float:left;width:600px;height:250px;"> 

    @(Html.EJ().Grid<object>("Invoice") 

           .AllowPaging(true) 

           .Datasource(ds => ds.URL("Home/InvoiceDataSource").Offline(true).Adaptor(AdaptorType.UrlAdaptor)) 

           .ClientSideEvents(c=>c.RowSelected("rowSelect")) 

    ) 

</div> 

<div style="float:left;width:600px;height:450px;"> 

    @(Html.EJ().Grid<object>("Payment") 

           .AllowPaging(true) 

           .Datasource(ds => ds.URL("Home/PaymentDataSource").Offline(true).Adaptor(AdaptorType.UrlAdaptor)) 

    ) 

</div> 

 

And you can find the sample from the below location. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/133390/ze/Sample-1389891741 

  

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K. 

[Prasanth]

Hi Saravana,

Thank  you for the prompt reply, sample solutions is fine.  But when I try to port the solution to my solution, I just seems to get the waiting grid image (as it data loading) shown.  I have attached the chtml and controller.cs code to illustrate what I have got.

Apologies for asking multiple queries back on forth just bit tied down with the problem

Kind Regards

Prasanth

Attachment: Syncfusion_9c604b92.zip

[Saravana Kumar Kanagavel]

Hi Prasanthan,  

 

We have checked your query and we suspect that you are trying to retrieve the data from server side. At the time waiting popup is shown in view page instead of data in grid. The cause of the issue is due to exception thrown at the server side while date retrieving.   

 

We have also prepared a sample based on your requirement that can be download from the below link  

Link: http://www.syncfusion.com/downloads/support/forum/133390/ze/WebApplication2-488960493  

 

When using UrlAdaptor in grid please ensure the following  

 

1.       The data must be return as result and count pair from server side when offline is false.   

2.       When offline is true it is must to return result alone.  

3.       Ensure whether the path given in the URL is triggering at server side.   

 

Refer the documentation link  

 

Link: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#url-adaptor  

 

If you still face the issue please get back to us with the following details.  

 

1.       Share the screenshot/ video of the issue that you have faced.  

2.       If you faced any error in the console window please share the details of stack trace by expanding.  

3.       Does the post process completes? If not please share the details from Network tab.  

4.       If possible please reproduce the issue in the above attached sample.  

 

The provided information will help us to analyze the issue and provide you the response as early as possible.  

 

Please let us know if you have any concern on this. 

 

Regards,  

Saravana Kumar K 

 

[Prasanth]

Hi Sarana, 

Getting there with the solution you provided, only problem is that if I have the Payment grid with paging setup let's say page size of 5 in the javascript at any given time I can only calculate the total value based on those 5 records currently being shown.  I have for the time being removed the paging from Payment Grid so seems to be working.  If I only could access the summary details (which I am showing at the bottom of the Payment grid) then problem would be solved with paging available.  Thanks for giving the latest solution though.

 var totalPayment = 0;

        alert(intialData.length);

        for (var i = 0; i < intialData.length; i++) {

            //if (sender.data.Customer_ID == intialData[i].Customer_ID) {

                totalPayment += intialData[i].SponsorValue;

               // newGridData.push({ Customer_ID: intialData[i].Customer_ID, Payment: intialData[i].Payment });

            //}

        }

[Thavasianand Sankaranarayanan]

Hi Prasanthan, 

We have analyzed your query and we suspect that the summary value will show only for a single page Grid record. We are unable to reproduce your reported issue from our end. 

We have prepared a sample and it can be downloadable from the below location. 

Sample: https://www.syncfusion.com/downloads/support/forum/134570/ze/WebApplication2-591672780.zip 

Refer the help documentation for summary. 

Link: https://help.syncfusion.com/aspnetmvc/grid/summary 

Please provide the following details for better assistance. 

1. Share screen shot or video demonstration of the issue.
2. What type of summary that you have used in Grid.
3. Share full Grid code example both server and client end.
4. If possible share the sample or reproduce the issue in the attached sample.
5. Share the Essential Studio version details.

Regards, 

Thavasianand S.