First Project Not Running

[Alejandro Villagomez]

Hi, i've trying to test the Grid control in a new Project (Visual Studio 2013, Web Forms, VB, .NET 4.5), so first i encountered with the "ReferenceError: ej is not defined" so i searched over the KB and found the http://www.syncfusion.com/forums/117199/unknown-server-tag-in-grid link, but the solution doesn't applies, i'm new with this excellent solutions of controls, but i'll need some advice here, some things are missing on my solution?

Thanks in advance.

Attachment: TestSync_b556de43.rar

[Alejandro Villagomez]

So i found this link and try to follow it, but no success...

http://help.syncfusion.com/ug/js/Documents/createmanually1.htm

I've  attached a second version, hope someone can help me.

Attachment: TestSync_V2_dba11ae2.rar

[Alejandro Villagomez]

A third version, now objects has not methods... What i'm missing?

Thanks in advance!

Attachment: TestSync_V3_f751fcf3.rar

[Prasanna Kumar Viswanathan]

Hi Alejandro,

Thanks for using Syncfusion Products.

Query 1 : "ReferenceError: ej is not defined"

The cause of the reported issue is that you might have missed out to refer the ej.web.all.min.js file in the sample project. Please find the attached screenshot:

In the first project that you have not referred the following script files. So, we suggest you to include the followingscript files in the project

bundles.Add(New ScriptBundle("~/bundles/Syncfusion").Include(

"~/Scripts/Syncfusion/jquery-1.10.2.min.js",

"~/Scripts/Syncfusion/jquery.easing.1.3.min.js",

"~/Scripts/Syncfusion/jquery.globalize.min.js",

"~/Scripts/Syncfusion/jsrender.min.js",

"~/Scripts/Syncfusion/ej/ej.web.all.min.js"))

We analyzed all the samples and found that you have mentioned the pageload twice in the Default.aspx.vb. Please find the below attached screenshot

In the first project, you have tried to set the localization for the grid’s text. We would like to know that we have changed the API name for the localization. Please find the below code snippet

<div>

<ej:Grid ID="FlatGrid" runat="server" AllowSorting="True" AllowPaging="True" Locale="es-ES">

<Columns>

<ej:Column Field="OrderID" HeaderText="Order ID" IsPrimaryKey="True" TextAlign="Right" Width="75" />

<ej:Column Field="CustomerID" HeaderText="Customer ID" Width="80" />

<ej:Column Field="EmployeeID" HeaderText="Employee ID" TextAlign="Right" Width="75" />

<ej:Column Field="Freight" HeaderText="Freight" TextAlign="Right" Width="75" Format="{0:C}" />

<ej:Column Field="OrderDate" HeaderText="Order Date" TextAlign="Right" Width="80" Format="{0:MM/dd/yyyy}" />

<ej:Column Field="ShipCity" HeaderText="Ship City" Width="110" />

</Columns>

</ej:Grid>

</div>

<script type="text/javascript">

ej.Grid.locale["es-ES"] = {

EmptyRecord: "No hay registros para mostrar"

}

</script>

For your convenience we have modified the samples and same can be downloaded from the below link

Version 1 : https://www.syncfusion.com/downloads/support/forum/119194/TestSync1338434484.zip

Version 2: https://www.syncfusion.com/downloads/support/forum/119194/TestSync2052894995.zip

Version 3: https://www.syncfusion.com/downloads/support/forum/119194/TestSync-1877271307.zip

Please get back to us if you have any further assistance,

Regards,

Prasanna Kumar N.S.V

[Alejandro Villagomez]

Ok, i'll check them out, i run the 3rd versión and everything goes OK, so i'm going to test it on the original and learn how to use everything.

Thank you so much!

[Alejandro Villagomez]

Well, i'm trying to implement Grid on another Project, but no results shown on Grid, can u help me, i think i've added all things, but Grid shows no data rows, but shows that loads data.

Thanks on advance.

The page with the Grid is on IT folder, is TestControl.aspx

Attachment: OH_IT_929ac6df.rar

[Alejandro Villagomez]

IMG Grid

Attachment: GridNoData_1c3c8c24.rar

[Alejandro Villagomez]

Sorry, my bad, looking very well, just needed the jsrender.min.js file...

But thanks anyway, excellent support!

[Alejandro Villagomez]

A last question, i hope u can help me with this one, is more technical, why if i put this line on my web.config, the controls are not shown, it's because all that stuff of leaving the work on the server or i'm very lost on that subject?

CODE:

<add key="UnobtrusiveJavaScriptEnabled" value="false"/>

[Alejandro Villagomez]

A last question, i hope u can help me with this one, is more technical, why if i put this line on my web.config, the controls are not shown, it's because all that stuff of leaving the work on the server or i'm very lost on that subject?

CODE:

<add key="UnobtrusiveJavaScriptEnabled" value="false"/>

The real value to get the negative result is TRUE, with FALSE they will shown well.

[Alejandro Villagomez]

Another question... How can i bind data from code behind to the row detail? Is that possible? I'm still reading documentation.
I've searched as well for nested grids, and just found some info but on the Silverlight section.
Can be on the row detail template another Grid? Or do i need to pass information through Json data? Can i fill the row detail from codebehind?

As far as i'm testing this Grid control, is the best, shortens a lot of programming events of the grid! Very nice control!

Thanks in advance!

[Prasanna Kumar Viswanathan]

Hi Alejandro,

Thanks for the Update.

Query 1 : “<add key="UnobtrusiveJavaScriptEnabled" value="false"/>”

If you put this line on web.config, with set the value as true, you need to refer the ej.unobstrusive.min.js script file. Please find the location of the script file

Location : C:\Users\prasannakumarv.SYNCLAP2841\AppData\Local\Syncfusion\EssentialStudio\13.1.0.21\JavaScript\samples\web\scripts

Query 2 : “How to bind data from code behind to the row detail?”

As we do not have support to bind data from code behind, so your requirement have been achieved with the detailstemplate by the webmethodAdaptor. In webmethodAdaptor we bind the datasource for the child grid using ej.DataManger. Please find the below code snippet

<script type="text/javascript">

function detailGridData(e) {

var filteredData = e.data["EmployeeID"];

e.detailsElement.find("#detailGrid").ejGrid({

dataSource: ej.DataManager({ url: "Default.aspx/Data", adaptor: new ej.WebMethodAdaptor() }),

allowSelection: false,

allowPaging: true,

columns: [

{ field: "OrderID", key: true, headerText: "Order ID", width: 80, textAlign: ej.TextAlign.Right },

{ field: "CustomerID", headerText: 'Customer ID', width: 80, textAlign: ej.TextAlign.Left },

{ field: "ShipCity", headerText: 'City', width: 120, textAlign: ej.TextAlign.Left }

]

});

}

</script>

---------------------------------------------------------------------------

<WebMethod> _

<ScriptMethod(ResponseFormat:=ResponseFormat.Json)> _

Public Shared Function Data(value As DataManager)

Dim DataSource = New DataClasses1DataContext()

Dim list As List(Of Order)

list = DataSource.Orders.ToList()

Dim result = list.Skip(value.Skip).Take(value.Take).ToList()

Dim ndata = New With { _

Key .result = result, _

Key .count = list.Count _

}

Return ndata

For your convenience we have created a sample and same can be downloaded from the below link

Sample Link: https://www.syncfusion.com/downloads/support/forum/119194/TestSync-1074759712.zip

Please get back to us if you have any further assistance,

Regards,

Prasanna Kumar N.S.V

[Alejandro Villagomez]

Hey thanks for the answer, but, can't make it work, basically i'm trying to show details but, can't figure out why, and one important thing is that the webservice is not firing, maybe i've some details on code, but, it's not working, any of the webservces is called. Can't figure out why, can u help me please. I'll be doing another changes on code to see if i can figure out why.

Thanks in advance!

Attachment: OH_IT_79e2a309.rar

[Prasanna Kumar Viswanathan]

Hi Alejandro,

Thanks for the Update.

We analyzed your sample and find that as you have configured some router in your sample. We have sent ajaXrequest to get child grid data. Due to router config in your sample the proper URL was not get post in ajaXrequest. So, the child grid have not been properly rendered.

We achieved your requirement using WebService. When we using webservice, we need to add the following in web.config

While we using a method in .asmx file to use across several pages, it’s not necessary to define the method as static in asmx file. Please refer the below code snippet

Public Class WebService1

Inherits System.Web.Services.WebService

<WebMethod> _

Public Function HelloWorld(value As DataManager)

Dim DataSource = New OH_TI_Entities

Dim list As List(Of V_RH_Empleados_Contactos)

list = DataSource.V_RH_Empleados_Contactos.ToList()

Dim result = list.Skip(value.Skip).Take(value.Take).ToList()

Dim ndata = New With { _

Key .result = result, _

Key .count = list.Count

}

Return ndata

End Function

End Class

Please refer below code snippet:

<script type="text/javascript">

function detailGridData(e) {

var filteredData = e.data["EmployeeID"];

//var filteredData = e.detailsElement.find("#employeeDet").text();

e.detailsElement.find("#detailGrid").ejGrid({

dataSource: ej.DataManager({ url: "/WebService1.asmx/HelloWorld", adaptor: new ej.WebMethodAdaptor() }),

//allowSelection: false,

//allowPaging: true,

allowPaging: true,

columns: [

{ field: "Id_Contacto", key: true, headerText: 'Id', width: 80, textAlign: ej.TextAlign.Right },

{ field: "Nombre", headerText: 'Nombre', width: 80, textAlign: ej.TextAlign.Left },

{ field: "Contacto_TelCasa", headerText: 'Tel. Casa', width: 120, textAlign: ej.TextAlign.Left },

{ field: "Contacto_TelCelular", headerText: 'Tel. Celular', width: 120, textAlign: ej.TextAlign.Left },

{ field: "Contacto_NoEmp", headerText: 'No.Emp Contacto', width: 120, textAlign: ej.TextAlign.Left, visible: false }

]

});

}

</script>

Please find the screenshot:

For your convenience we have modified the sample and same can be downloaded from the below link

Sample Link : https://www.syncfusion.com/downloads/support/forum/119194/OH_IT-1016888950.zip

Please get back to us if you have any further assistance,

Regards,

Prasanna Kumar N.S.V

[Alejandro Villagomez]

Nice! After a lot of modifications on the webconfig, i finally made it work the webservices, now, i've been reading on the Help about DataManager and how to search or filter data,(http://help.syncfusion.com/ug/js/Documents/searching.htm) and i've been writing some code, but, i can't only show the data related to the selected row. (Added image on the RAR file) 

I've been writing some code with the "Query" and "Where" options to filter data, but, not working to show the related data. Again i've uploaded my Project, i have coded 2 web services (GetContactos Works, and the other one just have some details, and i have some doubts, why do i need to make the SKIP step, and can't send the LIST directly?), 2 java functions (with some commented code trying to archive the filtered data, you can see the detailGridData_test [not working] and detailGridData [working]).

I'll keep trying to make it work and understand how this Works, excellent support!

Thanks in advance!

Attachment: OH_IT_585c23ef.rar

[Alejandro Villagomez]

Well, just not found the way how to filter the data, so i've been trying to implement the export options, so i followed the documentation for ASP export (http://help.syncfusion.com/ug/js/Documents/exporting3.htm) but i think that Documentation is not complete, beacuse everytime that i clicked any of the buttons, it just send to "another page"? Or maybe is searching for something that is not commented on the documentation, can u help me with this one too?

BTW i attached on the zip another image, when i try to use the filters, i think that CSS have a conflict, so the Windows of filters is noth well shown.

Thanks in advance!

Attachment: OH_IT_b9349b04.rar

[Prasanna Kumar Viswanathan]

Hi Alejandro,

Thanks for the Update.

Query : “Filtering and Searching”

We analyzed and found that you have not enabled the Filtering and searching for the child grid. But in web service, you have tried with the some code to achieve the same. If you want to perform filtering and sorting operation for the child grid, it is required to enable the Filtering and searching properties separately for the child grid. Please find the below code snippet :

function detailGridData(e) {

var filteredData = e.data["EmployeeID"];

//var filteredData = e.detailsElement.find("#employeeDet").text();

e.detailsElement.find("#detailGrid").ejGrid({

dataSource: ej.DataManager({ url: "/WebService1.asmx/HelloWorld", adaptor: new ej.WebMethodAdaptor() }),

//allowSelection: false,

//allowPaging: true,

allowPaging: true,

allowFiltering: true,

toolbarSettings: { showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Search] },

columns: [

{ field: "OrderID", key: true, headerText: 'Id', width: 80, textAlign: ej.TextAlign.Right },

{ field: "CustomerID", headerText: 'Nombre', width: 80, textAlign: ej.TextAlign.Left },

{ field: "EmployeeID", headerText: 'Tel. Casa', width: 120, textAlign: ej.TextAlign.Left },

{ field: "Freight", headerText: 'Tel. Celular', width: 120, textAlign: ej.TextAlign.Left },

{ field: "ShipCountry", headerText: 'No.Emp Contacto', width: 120, textAlign: ej.TextAlign.Left, visible: false }

]

});

}

Filtering and searching operation have been achieved by using the Execute method of Data Operations. DataManager parameter contains all the required parameters for performing server side operations such as paging, sorting, searching and filtering. We suggest you to use Execute method of DataOperations class for performing server side operations. Please find the below code snippet:

Public Function HelloWorld(value As DataManager)

Dim DataSource = New DataClasses1DataContext()

Dim list As List(Of Order)

list = DataSource.Orders.ToList()

Dim operation As New DataOperations()

Dim result = operation.Execute(list, value)

Dim ndata = New With { _

Key .result = result, _

Key .count = list.Count

}

Return ndata

End Function

End Class

Query : “Skip Step”

The Skip and Take methods are helping to achieve the load on demand feature of ejGrid. They are used to get the records of the particular page from server side. If we ignore the skip and take methods, then it will bind the whole records. If we bind the whole records, there will be a chance for performance reduction. In the above code snippet, the Execute method performs the skip and take operations.

Query : “Exporting is not working fine”

We suspect that you have not referred the ej.webform.min.js script file in the sample. To perform server side operation in ASP.NET, we need to refer the particular script file. So, we suggest you to refer the ej.webform.min.js script file. Please find the below code snippet

bundles.Add(New ScriptBundle("~/bundles/Syncfusion").Include(

"~/Scripts/Syncfusion/jquery-1.10.2.min.js",

"~/Scripts/Syncfusion/jquery.easing.1.3.min.js",

"~/Scripts/Syncfusion/jquery.globalize.min.js",

"~/Scripts/jsrender.min.js",

"~/Scripts/Syncfusion/ej/ej.web.all.min.js",

"~/Scripts/Syncfusion/ej.webform.min.js"))

For your convenience we have modified your sample and same can be downloaded from the below link

Sample Link : https://www.syncfusion.com/downloads/support/forum/119194/OH_IT669978240.zip

If we misunderstood your query, please get back to us we will be happy to assist you,

Regards,

Prasanna Kumar N.S.V

[Alejandro Villagomez]

Thanks for the reply!

I've a lot of work this week, but i'll check this info on the weekend.

So much thanks for the excellent support!

[Prasanna Kumar Viswanathan]

Hi Alejandro,

Thanks for your feedback.

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

Regards,
Prasanna Kumar N.S.V