Triggering a load complete event from vb ..

Hi there,
I've currently got a grid layout working, which has some grouping defined before its rendered..
currently it renders unformatted, but if you remove the catname grouping then re-group by catname, the complete event fires and it gets nicely formatted.
my question is - how to trigger that complete event programatically?
Thanks
Ross
Vb/Razor :
Dim gridbuilder = Html.EJ().Grid(Of CustomerHistDb)("TransactionsGrid")
gridbuilder.Datasource(ViewBag.CustomerHistdb)
gridbuilder.ClientSideEvents(Sub(eve) eve.DetailsDataBound("dataBound"))
'col.Field("Address2").HeaderText("Address2").Width(0).Add()
'col.Field("Postcode").HeaderText("Postcode").Width(0).Add()
'Add grid columns using gridbuilder.
gridbuilder.Columns(
Sub(col)
col.Field("detSerialNo").Template("#tester").HeaderText("Serial No").Width(25).Add()
col.Field("GroupHeader").HeaderText("GroupHeader").Width(0).Add()
col.Field("CatName").HeaderText("catName").Width(120).Add()
col.Field("warranty").Format("{0:dd/MM/yyyy}").HeaderText("Warranty").Width(50).Add()
col.Field("patTest").Format("{0:dd/MM/yyyy}").HeaderText("PAT Due").Width(50).Add()
col.Field("qty").HeaderText("Qty").Width(30).Add()
col.Field("future").HeaderText("Future").Width(30).Add()
col.Field("total").HeaderText("Total").Width(30).Add()
End Sub)
gridbuilder.ShowSummary().
SummaryRow(Sub(row)
row.ShowTotalSummary(False).ShowCaptionSummary(True).Title("Sum").SummaryColumns(Sub(col) col.SummaryType(SummaryType.Sum).DisplayColumn("qty").DataMember("qty").Add()) _
.SummaryColumns(Sub(col) col.SummaryType(SummaryType.Sum).DisplayColumn("future").DataMember("future").Add()) _
.SummaryColumns(Sub(col) col.SummaryType(SummaryType.Sum).DisplayColumn("total").DataMember("total").Add()).Add()
End Sub)
gridbuilder.GroupSettings(Sub(group)
group.GroupedColumns(Sub(col) col.Add("GroupHeader"))
group.GroupedColumns(Sub(col) col.Add("CatName"))
group.CaptionFormat("#template")
End Sub)
gridbuilder.AllowGrouping()
gridbuilder.ClientSideEvents(
Sub(cell)
cell.QueryCellInfo("cellinfo").ActionComplete("complete")
End Sub)
gridbuilder.Render()
End code
and some javascript that formats it on the ActionComplete event

5 Replies

SA Saravanan Arunachalam Syncfusion Team October 24, 2017 10:50 AM UTC

Hi Ross, 
Thanks for contacting Syncfusion’s support. 
Query 1: currently it renders unformatted. 
We understood from your query, you have mentioned the group caption is not formatted based on the CaptionFormat when initially render the Grid with group definition. We are sorry that we are unable to reproduce your reported issue and we have created a sample that can be downloaded from the below link. 
In the above sample, we have formatted the group caption using JsRender template which is defined in the CaptionFormat that can be refer from the below code example and screenshot. 
[Template] 
<script type="text/x-jsrender" id="template"> 
    {{:field}} - {{:key}} 
</script> 
 
Dim gridbuilder = Html.EJ().Grid(Of Object)("SampleGrid") 
. . . 
    gridbuilder.GroupSettings(Sub(group) 
                                      group.GroupedColumns(Sub(col) col.Add("ShipCountry")) 
                                      group.GroupedColumns(Sub(col) col.Add("EmployeeID")) 
                                      group.CaptionFormat("#template") 
                              End Sub) 
          
           . . . 
        gridbuilder.Render() 
  
 
If it is not your requirement, please provide the following details. 
1.       Share the screenshot of your exact issue. 
2.       Which is unformatted whether the group caption or any other. 
3.       Provide clear details of your requirement. 
4.       If possible, please reproduce your issue in the above sample. 
Query 2: how to trigger that complete event programmatically?    
By default, the events are trigger based on the actions performed in the Grid control and ActionComplete event will trigger for each action such as grouping, editing, filtering and so on performed on the Grid and it is differed with its requestType. Please refer to the below api reference link. 
So, we suggest you to trigger the complete event by programmatically perform the actions in Grid control and please refer to the below api reference link. 
And hence could you please provide the following details? 
1.       Do you want to trigger ActionComplete event manually from the client side method? 
2.       If yes, why you need to trigger? 
3.       Provide clear detail of your requirement. 
Regards, 
Saravanan A. 



RW Ross Woodward October 24, 2017 05:53 PM UTC

Hi there,

Sorry I havent explained myself properly.

The code sample I gave, builds the grid correctly with the grouping applied. However, I have a bit of javascript that formats the grid. Currently the only way to apply the formatting is to remove one of the 2 groupings and add it back in - and what I'd like to do is to have the grid format called automatically instead.

The attached Gridsamples.zip file contains 2 images - No Formatting is how the grid appears after the grid loads, as per the code I gave. With Formatting is the result of removing the CatName group, and adding it back in (which calls the actioncomplete javascript with the 'grouping' request type)

I'd like it to appear as the withfomatting screenshot but without having to manually remove and add the grouping.

If thats possible!

Thanks..

Ross 




Attachment: GridSamples_30d621ee.zip


PK Prasanna Kumar Viswanathan Syncfusion Team October 25, 2017 12:52 PM UTC

Hi Ross, 

Thanks for the update.  

In this you have mentioned that the format is applied when you remove one of the grouping and add it to back in.  To apply the formatting in initial rendering, use actionComplete event of ejGrid.  In this event we need to check the condition of grouped columns length and initial rendering.  

Find the code example:  

<script type="text/javascript"> 
    function complete(args) { 
        if (args.requestType == "grouping" || (this.model.groupSettings.groupedColumns.length > 0 && this.initialRender)) { 
            //To do your formatting code 
        } 
    } 
</script> 


Regards, 
Prasanna Kumar N.S.V 



RW Ross Woodward October 26, 2017 08:20 AM UTC

Thanks for the code, but that event isn't firing. the first time the page loads, the event fires with 'refresh' as the request type, but that's before any data is populated.

How do I trigger that event once the grid populates?

Ross




SA Saravanan Arunachalam Syncfusion Team October 27, 2017 06:26 AM UTC

Hi Ross, 
We have analyzed your query, the ActionComplete event is triggered with requestType refresh when initially render the Grid which is a default behavior of Grid control and we understood from your query you need to do your functionality once the Grid completely populated. So, we suggest you to the use the DataBound event to initially format your caption and please refer to the below code example and api reference link. 
Dim gridbuilder = Html.EJ().Grid(Of CustomerHistDb)("TransactionsGrid") 
gridbuilder.Datasource(ViewBag.CustomerHistdb) 
gridbuilder.ClientSideEvents(Sub(eve) eve.DataBound("onDataBound")) 
. . . 
<script type="text/javascript">  
    function complete(args) {  
        if (args.requestType == "grouping") {  
            //To do your formatting code while grouping 
        }  
    }  
      function onDataBound(args) {  
        //To do your formatting code while initially render the Grid 
    }  
</script>  
  
Regards, 
Saravanan A. 


Loader.
Up arrow icon