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. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Seting Grid datasource

Seting Grid datasource

I wanted to bind my model to the Grid view rather than have it in a simple table.
I don't require the ability to edit the data I just want the paging and layout which the grid provides.
But I cant' seem to set the data source.
here is the top of my view

@model IEnumerable<GMSWeb.Models.SearchResults.OrgResults>


and  here is my grid.

Html.EJ().Grid<GMSWeb.Models.SearchResults.OrgResults>("ResultGrid")




.Datasource(Model.)


.AllowSorting()


.AllowPaging()


.Columns(col =>


{



col.Field("OrgNo").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();


col.Field("Name").HeaderText("Organisation Name").TextAlign(TextAlign.Right).Add();




}


)


)



NB: I'm not using all the columns in my model.

But I'm getting anything being rendered, not even an error.


I have two questions. 

How do I define the datasource for the grid so it uses my IEnumerable model object ?

Where on this site are the class properties, methods and events for all these controls?

Examples are good but I'm flying blind not knowing anything about this Grid class.


Josef







































































.Datasource(Model.)


.AllowSorting()


.AllowPaging()


.Columns(col =>


{



col.Field("OrgNo").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();


col.Field("Name").HeaderText("Organisation Name").TextAlign(TextAlign.Right).Add();




}


)


)





5 Replies
MS Mani Sankar Durai Syncfusion Team February 17, 2016 01:46 PM UTC

Hi Josef,

Thanks for using Syncfusion products.

Query 1: “Getting anything being rendered, not even an error”


We have analyzed your sample and the issue is not reproduced. Please refer the following steps which may resolve the issue in your sample.


1.       If “UnobtrusiveJavaScriptEnabled” Mode is enabled in your application then please ensure whether you have referred “ej.unobtrusive.all.min” script file.


<head>

<meta charset="utf-8" />

  ….

        <script src="~/Scripts/ej/ej.web.all.min.js"></script>

    <script src="~/Scripts/ej/ej.unbotrusive.min.js"></script>


</head>



2.       If “UnobtrusiveJavaScriptEnabled” Mode is not enabled, then you need to call EJ ScriptManager after Grid Control rendering.



[_Layout.cshtml]

<head>

 …

</head>

<body>

@RenderBody()

…

    @Html.EJ().ScriptManager()

…

</body>




Query 2: “Define the datasource for the grid”

As in the code example that you have shared, we need to pass View Model value to the “DataSource” Property of Grid Control.

@using MVCSampleBrowser.Models;

@model IEnumerable<EditableOrder>


@(Html.EJ().Grid<EditableOrder>("FlatGrid")

        .Datasource(Model)

        .AllowPaging()

         .Columns(col =>


        …


)


We have created a sample that can be downloadable from below link.
“http://www.syncfusion.com/downloads/support/forum/122082/ze/MvcApplication6-314273581”

For further information please refer the following documentation
“help.syncfusion.com/aspnetmvc/grid”

Query 3: “Where on this site are the class properties, methods and events”

Please refer to the below documentation in order to know about the class properties, methods and event.


Class Properties: “http://help.syncfusion.com/cr/aspnetmvc/ejmvc”
API Reference Link:  “http://help.syncfusion.com/js/api/ejgrid”
 
Please refer the following link for further information
 
Online documentation link:  “help.syncfusion.com/aspnetmvc/grid”
Online Sample Link: “http://mvc.syncfusion.com/demos/web/grid”




Regards,

Manisankar Durai.


JS Josef Szeliga February 18, 2016 12:34 AM UTC

Thank you for your reply.

1.
My code already has a reference to Unobtrusive.min.js in the header (see screen shot)
_LayoutHead

2.
I already had the render command in the _layout.cshtml  file
(see screen shot)
_layoutbody

3.
Here is my full page.  Notice I started of using a table to display the data.  This worked.  I decided to switch to the syncfusion grid view.
My code and the use of the Model datasource is as your suggestion.

@model IEnumerable<GMSWeb.Models.SearchResults.OrgResults>

@if (Model != null)

{

@*<table class="table table-bordered table-hover">

<thead style="background-color:Beige">

<tr>

<td>Org ID</td>

<td>Organisation Name</td>

</tr>

</thead>

<tbody>

@foreach (var item in Model)

{

<tr>

<td>

@Html.DisplayFor(x => item.OrgNo)

</td>

<td>

@Html.DisplayFor(x => item.Name)

</td>

</tr>

}

</tbody>

</table>*@

@(

Html.EJ().Grid<GMSWeb.Models.SearchResults.OrgResults>("ResultGrid")

.Datasource(Model)

.Columns(col=>

{

col.HeaderText("header");

col.HeaderText("OtherHeader");

}

)

);

　

}

else

{

<h4>No Matches found.</h4>

}

@*@section script

{

<script type="text/javascript">

$('.table > tbody > tr').on('click', function () {

});

</script>

}*@

Again nothing is displayed no errors , nothing.

4.

In regard to the zip file you sent me. I have installed the code into VS2013. However, the version of the MVC library required by Nuget is no longer available from your organisation and the following error occurs.

Error 1 NuGet Package restore failed for project MvcApplication6: Unable to find version '13.4.0.53' of package 'Syncfusion.AspNet.Mvc3'..  0 0 

5.

Thank you for sending me the following  links .

However Online Sample Link: “http://mvc.syncfusion.com/demos/web/grid” is not a valid link.

6.

I find it extremely difficult to navigate from your examples to the classes used in you examples

eg.  Examples of using the Grid in MVC are here

http://help.syncfusion.com/aspnetmvc/grid/data-binding#remote-data

but the java code and classes are here

http://help.syncfusion.com/js/api/ejgrid#members:datasource

would it not be better to place links from one to the other? 

In the Microsoft MSDN class definitions are followed by examples but yours appear to be widely spread. 

When I tried to search for the class for the ejgrid from this Grid example area here http://help.syncfusion.com/aspnetmvc/grid/getting-started no matches were returned.  So I had to contact support.  if it were easier to find that would reduce the time you need to spend in replying to questions.


regards


Josef



MS Mani Sankar Durai Syncfusion Team February 18, 2016 02:15 PM UTC

Hi Josef,

Query 1:  “Nothing is displayed no errors”

 We have analyzed your code example and we are unable to reproduce the issue. Could you please send us the following information so that we could sort out the cause of the issue and provide you a response as early as possible?

1.       Have you rendered Grid in the partial view?
2.       Have any error occurred in the browser developer console window? If so please send occurred error to us to resolve it.
3.       If possible, please reproduce the issue in the following sample and send us back.


We have created a sample without using nuget packages that can be downloadable from below link.
http://www.syncfusion.com/downloads/support/forum/122082/ze/SyncfusionMvcApplication5-767293532

For resolving issues with Nuget packages please refer the response under Query 3.

Query 2:  “online sample link is not valid”

Sorry for the inconvenience. We have mistakenly provided you a wrong link which is the cause for the invalid link.
Kindly check the below link for the online sample.
Online Sample Link:  http://mvc.syncfusion.com/demos/web/grid

Query 3: “MVC library required by Nuget is no longer available”

This reported issue occurred since Syncfusion NuGet Package source may disabled or it was not configured in your Visual Studio. Please Enable/Configure it before restore the Syncfusion NuGet Packages in your Visual Studio.
Please refer the below link to configure Syncfusion NuGet Package source to your Visual Studio.

http://help.syncfusion.com/extension/syncfusion-nuget-packages/nuget-install-and-configuration

If you have already configured the Syncfusion NuGet Package Source and it was disabled, you can enable the Syncfusion Package source from Visual Studio -> Tools ->Library Package Manager->Package Manager Settings->Package Sources. Check whether the Syncfusion package source is checked or not. If it is unchecked please check it.

Please refer the screenshot for more information.


 




Now the required Syncfusion Packages will be restored successfully. If still you have faced same issue kindly update your Visual Studio details (Help->About) to us to proceed further.
Note: If you have configured Syncfusion NuGet Packages from local, please ensure that the packages are available in that location.


Query 4:  “Documentation on Class properties, Events and Methods”

Please refer the following link for the list of class properties in MVC

http://help.syncfusion.com/cr/cref_files/aspnetmvc/ejmvc/Syncfusion.EJ~Syncfusion.JavaScript.Models.GridProperties.html

We have only provided the list of class properties for MVC and currently we have not provided description for the properties since it is currently in drafting status. We will update the class properties Description with examples, and control events for MVC in 2016 Vol 1 release which is expected to be rolled out at end of March 2016
As of now please refer the following JS documentation
http://help.syncfusion.com/js/api/ejgrid
In JS documentation, the members and events names are in camel case (first letter is in small case) whereas the equivalent MVC control name would be in pascal case (first letter would be capitalized).

Please check the below table for further clarification,

[In Javascript]


<script>

    $("#Grid").ejGrid({

        …

        allowPaging:true

    });

</script>


[In MVC]


@(Html.EJ().Grid<EditableOrder>("FlatGrid")

        …

        .AllowPaging()

…

);


Regards,
Manisankar Durai.






JS Josef Szeliga February 22, 2016 01:10 AM UTC

Thank you for your reply.
1. Yes the grid is rendered in a partial view.
   This partial view is rendered within your splitter control. The splitter control is on the _Layout.cshtml view.

2. There is no error of any kind.

3,
Although you have not stated which Syncfusion url to use to set the Nuget Package sources Please see the attachment to see what I have set.

Your sample continues to not work see attached error

PLEASE NOTE THAT YOUR EXAMPLE USES VIEWBAG AND I REQUIRE ASSISTANCE USING A TYPED DATASET

Your example is of no use to me in that regard wether it works or not.  I cannot rewrite my code to use viewbag as it would break our coding standards.

Your Grid needs to work using an IEnumerable of type OrgResults  as the datasource as per my example.
Please note also that in the commented-out part of my code where I used a table control rather than the EJ.Gid.
This code works perfectly and proves that the model holds 17 records of type OrgResults in an Enumerated collection.
I need to display this data in your EJ.Grid control.


Josef


MS Mani Sankar Durai Syncfusion Team February 22, 2016 02:34 PM UTC

Hi Josef,

Query 1:  “Grid is rendered in a partial view”

If “UnobtrusiveJavaScriptEnabled” Mode is enabled in your application, call “ej.widget.init($("#partial"));”  in the success of ajax while using  partialview to render the grid. Please refer the below code snippet:


[Index.cshtml]
<div id="partial"></div>
<script type="text/javascript">

   window.onload= function() {
      
            $.ajax
                    ({
                        url: "/Home/Partial",
                        type: 'GET',
                        success: function (data) {
                            $("#partial").html(data);
                            ej.widget.init($("#partial"));                    // when unobstrusive Is true.
      }

[In Controller]
       public ActionResult Partial()
               {
                        var DataSource = new NorthwindDataContext().EmployeeViews.ToList();
                        return PartialView("_PartialView", DataSource);
                }


If “UnobtrusiveJavaScriptEnabled” Mode is not enabled while rendering a control in the partial view, we need to specify @Html.EJ().ScriptManager() in the partial view page after the initializing the control when referring to the non-unobstrusive mode. Please refer the below code snippet.



[In _PartialView.cshtml]

@using Sample;
@model IEnumerable<EmployeeView>

@if (Model != null)
{
    …
        @(Html.EJ().Grid<EmployeeView>("CustomGrid")
                     .Datasource(Model)

…
    );

}

…

@Html.EJ().ScriptManager()








Query 2:  “Syncfusion url to set the Nuget Package sources”


From the screenshot that you have been shared, the Syncfusion JavaScript and ASP.NET MVC packages source configured properly.



If you have already updated the Syncfusion package in packages.xml file in your project then it will be restored automatically when project compilation.


If you are going to install Syncfusion NuGet in your project. Then right click on project and choose Manage NuGet Packages for Solution | Online | <Package Source Name>. The NuGet Packages are listed which has presented in package source location. Install required packages to application by clicking Install button. Please refer below screenshot for more information.


 


If you have faced any difficulties with these please share us the issue replication procedures and screenshot.


Query 3: “sample continues to not work”


We are unable to reproduce the issue. Have you faced this issue while using nuget in sample or the sample without using nugget?


If without using nuget please ensure whether you have Syncfusion dlls in GAC location with the build version 13.4.0.53. If still you face the dll reference issue, please refer it from the GAC to avoid the issue.


Please find the following path to ensure that “C:\Windows\Microsoft.NET\assembly\GAC_MSIL\Syncfusion.EJ\v4.0_13.4450.0.53__3d67ed1f87d44c89”


Query 4: “EXAMPLE USES VIEWBAG AND I REQUIRE ASSISTANCE USING A TYPED DATASET”

In the previous response we have updated a Sample with the code example using model binding in “View-> Home-> Index.cshtml”. We suspect that you have referred “View->Grid->Gridfeatures.cshtml”.


For your convenience, we have created a simple sample with partial view to repopulate the data using the ajax call. Please find the sample from the below link,


http://www.syncfusion.com/downloads/support/forum/122082/ze/Sample_1222032028


Regards,
Manisankar Durai.


Loader.
Up arrow icon