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

Ajax and Partial Views with a Grid

Hi,

I have a main view containing the htlm helper (Ajax.BeginForm) and in order to get it working i added the required scripts and changed in my webconfig the UnobtrusiveJavascriptEnabled to true.

My ajax request works fine and returns a PartialView containing only the EJ().Grid and the Script Manager in the end.
In my main page the PartialView is loaded with the html and script from the Grid but there's no visible Grid.

The Grid loads fine if i use an anchor with jquery ajax and UnobtrusiveJavascriptEnabled to false.
Is there any way i can load the grid without having to set UnobtrusiveJavascriptEnabled to false so i can use the html helper ?


18 Replies

MS Madhu Sudhanan P Syncfusion Team June 26, 2014 12:20 PM UTC

Hi Huntero,

 

Thanks for using Syncfusion products.

 

Query: “Is there any way i can load the grid without having to set UnobtrusiveJavascriptEnabled to false so i can use the html helper ?”

 

Normally while setting the UnobtrusiveJavascriptEnabled as true in web.config, the grid properties will be set as the attributes of the div in which the attributes are prefixed with “data-ej-” and we must initiate the control rendering in the success event of the Ajax.BeginForm. Please refer the following code snippet.

 

[cshtml]

@using (Ajax.BeginForm("GetPartial", "Home", new AjaxOptions()

   {

       UpdateTargetId = "gridcontainer",

       OnSuccess = "success"   //Ajax Success Event

   }))

    {

        <input type="submit" value="GetPartial" />

    }

 

[javascript]

 

function success() {

            ej.widget.init();     //Initiate the Control rendering

        }

 

 

 

Please try the above solution and let us know if you require further assistance.

 

Regards,

Madhu Sudhanan. P



MS Madhu Sudhanan P Syncfusion Team June 26, 2014 12:42 PM UTC

Hi Huntero,

 

Sorry for the inconvenience caused.

 

Please ignore the previously updated response. Please find the below updated response.

 

Query: “Is there any way i can load the grid without having to set UnobtrusiveJavascriptEnabled to false so i can use the html helper ?”

 

Normally while setting the UnobtrusiveJavascriptEnabled as true in web.config, the grid properties will be set as the attributes of the div in which the attributes are prefixed with “data-ej-” and we must initiate the control rendering in the success event of the Ajax.BeginForm. Please refer the following code snippet.

 

[cshtml]

@using (Ajax.BeginForm("GetPartial", "Home", new AjaxOptions()

   {

       UpdateTargetId = "gridcontainer",

       OnSuccess = "success"   //Ajax Success Event

   }))

    {

        <input type="submit" value="GetPartial" />

    }

 

[javascript]

 

function success() {

            ej.widget.init($("#gridcontainer"));     //Initiate the Grid Control rendering

        }

 

 

 

Please try the above solution and let us know if you require further assistance.

 

Regards,

Madhu Sudhanan. P



HU Huntero June 26, 2014 12:42 PM UTC

Thanks alot, that was exactly what i was looking for, its working now.

I was missing the ej.widget.init() in the callback, i couldnt find it in the documentation.

Best Regards.


MS Madhu Sudhanan P Syncfusion Team June 27, 2014 12:30 PM UTC

Hi Huntero,

 

Thanks for your update.

 

The documentation about the initialization function ej.widget.init() will be available in our upcoming Volume 2, 2014 release.

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P



HU Huntero July 7, 2014 01:19 PM UTC

Hi again,

I have 2 issues that i faced when trying to add a custom toolbar item in the same Grid i mentioned above.

1 ) I added the following code to the Grid:
        .ToolBar(toolbar =>
            {
                toolbar.AllowToolBar(true).CustomToolbarItems(new List<object>() { "Expand"});
            })

But it seems to be rendering incorrectly, as my output is:
        <ul class="e-ul e-horizontal">
            <li title="["
            <li title="E 
        </ul>

Each list item has the title of a word of my Toolbar Item.

2) I wanted to call a Dialog when i click the toolbar item, so that i can add new items for my Model.
Based on that i created a small example ill add below, but the close button and my content is non existant.

                @Html.EJ().Dialog("form-create").Title("Test").Items(data =>
                   {
                       data.ContentTemplate(@<div style="margin: 5px 14px">
                        <div>
                            123
                        </div>
                    </div>);
                   }).Render()

Thanks for the amazing costumer support provided.
    


MS Madhu Sudhanan P Syncfusion Team July 8, 2014 12:18 PM UTC

Hi Huntero,

 

Please find the response.

 

Query #1: “i faced when trying to add a custom toolbar item in the same Grid”

 

We have confirmed that the issue with "Issue with customToolBar in Unobtrusive mode" is a defect and we have logged a defect report. The fix for this issue is estimated to be available in our upcoming Volume 2, 2014 release.

 

Query #2: “I wanted to call a Dialog when i click the toolbar item, so that i can add new items for my Model.”

 

We have in-built support for Dialog editing in grid. And the dialog can also be opened by clicking the toolbar items. We can set the dialog editing in grid as follows.

 

[cshtml]

@(Html.EJ().Grid<OrdersView>("Editing")

. . .

.EditOption(edit => edit.AllowAdding().AllowDeleting().AllowEditing().EditMode(EditMode.Dialog))

.Toolbar (toolbar.AllowToolBar().ToolBarItems(items =>

            {

                items.AddTool(ToolBarItems.Add);

                items.AddTool(ToolBarItems.Edit);

                items.AddTool(ToolBarItems.Delete);

                items.AddTool(ToolBarItems.Update);

                items.AddTool(ToolBarItems.Cancel);

            });

        })))

. . . . .

.Render())

 

 

The MVC Grid contains two types of dialog editing, they are Dialog and DialogTemplate. The DialogTemplate allows you to create a template for the data that you require to be edited using the Dialog Box.This means you can edit any of the fields pertaining to a single record of data and apply it to a template so that the same format is applied for all the other records that you will edit later.

 

Please refer the following link for the Dialog editing and Dialog template editing in MVC Grid.

 

http://mvc.syncfusion.com/demos/web/Grid/DialogEditing

 

Please let us know if you want to open the dialog by clicking the custom  toolbar item.

 

Regards,

Madhu Sudhanan. P



HU Huntero July 9, 2014 09:46 AM UTC

Hello Madhu Sudhanan. P

Thank you for your answer.

The DialogTemplate was kind of what i was looking for, but my problem is, i wanted the Dialog body to be loaded from a partial view that i have in my controller instead of adding the javascript for the body, so that i can use the same Model and html for the create and edit/delete based on the id from the selected row in the Grid.

I was wondering if this was possible using the DialogTemplate and ajax.

Best regards.


MS Madhu Sudhanan P Syncfusion Team July 10, 2014 01:09 PM UTC

Hi Huntero,

 

Please find the response.

 

We can get the dialog template content from the controller using Partial View and Jquery Ajax. Please refer the following code snippet.

 

The following code shows the Partial View that contains the Dialog template.

 

[Partial View]

 

<div>

    <b>Order Details</b>

    <table cellspacing="10">

        <tr>

            <td style="text-align: right;">

                Order ID

            </td>

            <td style="text-align: left">

                <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" />

            </td>

            <td style="text-align: right;">

                Customer ID

            </td>

            <td style="text-align: left">

                <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid" style="width: 116px; height: 28px" />

            </td>

        </tr>

. . . . .

    </table>

. . . .

 

 

The following code shows the controller returns the Partial View.

 

[controller]

public ActionResult DialogContent() {

          

            return PartialView("_dialogContent");

        }

 

 

In the actionBegin event, the ajax request will be made to the Controller to get the Dialog content and in the success event, the template will be placed in the template container which is placed in the view page as follow.

 

 

<div id="template" style="display: none"></div> <!--Dialog Container-->

 

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

        .Datasource((IEnumerable<object>)ViewData["data"])

        .EditOption(edit => { edit.AllowDeleting().AllowEditing().AllowAdding().EditMode(EditMode.DialogTemplate); })

        . . . .

        .ClientSideEvents(eve=>eve.ActionBegin("beginEdit").ActionComplete("complete"))

        .Render())

 

<script>

    function beginEdit(args) {

        if (args.requestType == "beginedit") {

            $.ajax({

                url: "/Home/DialogContent",

                async: false,

                success: function (data) {

                    $("#template").html(data);   //Updating the dialog container with the partial view data

 

                    $("#Grid").ejGrid("option", { edit: { dialogEditorTemplateId: "#template" } })

                    //setting the dialog template

                },

                error: function (e) {

                    args.cancel = true;

                }

            });

        }

    }

 

 

 

For your convenience, we have created a simple grid sample in which the edit dialog template is loaded from the Partial View and the same can be downloaded from the below location.

 

Sample Location: PartialViewDialog.zip

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P



HU Huntero July 10, 2014 01:38 PM UTC

Thanks for the sample provided, i was looking for that result, it took a good amought of work to get it done.

Thank you for your time provided answering my questions Madhu Sudhanan. P .


MS Madhu Sudhanan P Syncfusion Team July 11, 2014 04:08 AM UTC

 

Hi Huntero,

 

Thanks for your appreciation. Please be get back to us if you require further assistance. We will be happy to help you out.

 

Regards,

Madhu Sudhanan. P



HU Huntero August 13, 2014 11:49 PM UTC

Hello,

I have the following 2 questions:

1) Im having an issue with the dropdownlist, while using IE10 the selected value is not displayed although the popup of the dropdownlist and the API is getting the correct value, with Chrome and Firefox everything is working great but i need the IE support.

2) Is there any documentation available about the icons (prefix icons) that can be added to the button controls ?

Best Regards.



SS Saranya Sivakumar Syncfusion Team August 14, 2014 12:32 PM UTC

Hi Huntero,

Query 1: Im having an issue with the dropdownlist, while using IE10 the selected value is not displayed although the popup of the dropdownlist and the API is getting the correct value, with Chrome and Firefox everything is working great but i need the IE support.

Sorry for the Inconvenience caused.

We have analyzed the reported issue with our sample and we are not able to reproduce the issue. Can you please check with the sample in the following location? If still you face the problem, please revert us by modifying the sample based on your application along with replication procedure. This would be helpful for us to serve you.

Sample: Sample

Query 2: Is there any documentation available about the icons (prefix icons) that can be added to the button controls?

Yes, we have a documentation for more detailed information of our control to getting started, please find the below link.

http://help.syncfusion.com/web

In this page, you can find the treeview on the left side. In that treeview navigate to Button and click on getting started. In the first link itself you can see about the details of normal Button and also its prefix icons.

Please let us know if you have any queries.

Regards,

Saranya.S



HU Huntero August 14, 2014 05:40 PM UTC

Thank you for the fast answer.

I found out today that the dropdownlist issue i had was related to the css i changed in the dropdowns where the line-height was hiding the text only in IE.

On the 2nd topic the link provided has great details about the documentation i was looking for, but when i try to access the iconlibrary in the Button > Overview and select Built-in Icon: Supports the built-in icon libraries ,in the following link http://help.syncfusion.com/ug/Documents/ej.iconslibrary.docx  i get an ASP.Net Web Config Error.

Best Regards.


SS Saranya Sivakumar Syncfusion Team August 28, 2014 11:49 AM UTC

Hi Huntero,

Sorry for the inconvenience caused on online documentation. An issue report has been logged on this. The documentation will be refreshed in our online link in the next service pack release which is expected to be rolled out at the end of next month (September). We will update you once this issue has been resolved.

Regards,

Saranya.S



TA Tan.Le replied to Madhu Sudhanan P November 7, 2015 09:09 PM UTC

Hi Huntero,

 

Please find the response.

 

We can get the dialog template content from the controller using Partial View and Jquery Ajax. Please refer the following code snippet.

 

The following code shows the Partial View that contains the Dialog template.

 

[Partial View]

 

<div>

    <b>Order Details</b>

    <table cellspacing="10">

        <tr>

            <td style="text-align: right;">

                Order ID

            </td>

            <td style="text-align: left">

                <input id="OrderID" name="OrderID" value="{{: OrderID}}" disabled="disabled" class="e-field e-ejinputtext valid e-disable" style="text-align: right; width: 116px; height: 28px" />

            </td>

            <td style="text-align: right;">

                Customer ID

            </td>

            <td style="text-align: left">

                <input id="CustomerID" name="CustomerID" value="{{: CustomerID}}" class="e-field e-ejinputtext valid" style="width: 116px; height: 28px" />

            </td>

        </tr>

. . . . .

    </table>

. . . .

 

 

The following code shows the controller returns the Partial View.

 

[controller]

public ActionResult DialogContent() {

          

            return PartialView("_dialogContent");

        }

 

 

In the actionBegin event, the ajax request will be made to the Controller to get the Dialog content and in the success event, the template will be placed in the template container which is placed in the view page as follow.

 

 

<div id="template" style="display: none"></div> <!--Dialog Container-->

 

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

        .Datasource((IEnumerable<object>)ViewData["data"])

        .EditOption(edit => { edit.AllowDeleting().AllowEditing().AllowAdding().EditMode(EditMode.DialogTemplate); })

        . . . .

        .ClientSideEvents(eve=>eve.ActionBegin("beginEdit").ActionComplete("complete"))

        .Render())

 

<script>

    function beginEdit(args) {

        if (args.requestType == "beginedit") {

            $.ajax({

                url: "/Home/DialogContent",

                async: false,

                success: function (data) {

                    $("#template").html(data);   //Updating the dialog container with the partial view data

 

                    $("#Grid").ejGrid("option", { edit: { dialogEditorTemplateId: "#template" } })

                    //setting the dialog template

                },

                error: function (e) {

                    args.cancel = true;

                }

            });

        }

    }

 

 

 

For your convenience, we have created a simple grid sample in which the edit dialog template is loaded from the Partial View and the same can be downloaded from the below location.

 

Sample Location: PartialViewDialog.zip

 

Please let us know if you have any queries.

 

Regards,

Madhu Sudhanan. P


I tried exactly the same with the sample code. But why didn't partial view content show in Dialog Content?
What did I do wrong?

Thanks,


JK Jayaprakash Kamaraj Syncfusion Team November 12, 2015 02:31 PM UTC

Hi Huntero,

 

We have analyzed your updated code snippet that seems to be older version of ej controls. We have changed API names in Grid.  Please refer the below ug documentation for new API.

http://help.syncfusion.com/js/api/ejgrid

Please share the following information to  provide a prompt solution.


which Syncfusion version are you using now ?

 

Regards,

Jayaprakash K.



SI Siraj replied to Huntero May 13, 2017 01:08 PM UTC

Thanks alot, that was exactly what i was looking for, its working now.

I was missing the ej.widget.init() in the callback, i couldnt find it in the documentation.

Best Regards.

Dear ,

I am in a similar situation  - displaying Grid as partial view based on some condition using Ajax.beginform

When I make 

    <add key="UnobtrusiveJavaScriptEnabled" value="false" />   Partial page update not working and its renedered on whole. Even in that page data not dispalying in Grid 

When

    <add key="UnobtrusiveJavaScriptEnabled" value="true" />  Partial page update happens fine but here also Grid not rendering at all.Even though data passed fine

Please help on this


JK Jayaprakash Kamaraj Syncfusion Team May 15, 2017 11:55 AM UTC

Hi Siraj, 

Syncfusion MVC components will render in two modes such Unobtrusive mode and non-unobtrusive mode. 
 
For Non-Unobtrusive mode, we need to refer ScriptManager() in partial view page and also refer to the below code example for render Grid using ajax call(partialView). 

Index.cshtml 

<div> 
                @Html.EJ().Button("click").Text("Render Grid").ShowRoundedCorner(true).Size(ButtonSize.Small) 
 
            </div> 
<div id="main"/> 
    <script type="text/javascript"> 
        $("#click").click(function () { 
            $.ajax 
                    ({ 
                        url: "/Home/Productpartial", 
                        type: 'GET', 
                        success: function (data) { 
                            $("#main").html(data); 
                                                 } 
                    }); 
 
        }); 
    </script> 
@(Html.EJ().ScriptManager()) 
_homeContent.cshtml 
 
@(Html.EJ().Grid<SyncfusionMvcApplication7.Models.ModelT>("GridContainer") 
 
}) 
) 
 
@Html.EJ().ScriptManager() 
 
 
For Unobtrusive mode, there is no need to refer the ScriptManager() in each partial views but to initiate the control in the partial, we have to use ej.widgets.init.  

Web.config 
 
 <appSettings> 
   .  . .  
    <add key="UnobtrusiveJavaScriptEnabled" value="true" /> 
  </appSettings> 
 
_layout.cshtml 
 
<!DOCTYPE html> 
<html> 
<head> 
     . . . . ..  
    <script src="~/Scripts/ej/ej.web.all.min.js"></script> 
    <script src="~/Scripts/ej/ej.unobtrusive.min.js"></script> 
</head> 
<body> 
    @RenderBody() 
    @(Html.EJ().ScriptManager()) 
</body> 
</html> 
 
 
 
Index.cshtml 

<div> 
                @Html.EJ().Button("click").Text("Render Grid").ShowRoundedCorner(true).Size(ButtonSize.Small) 
 
            </div> 
<div id="main"/> 
    <script type="text/javascript"> 
        $("#click").click(function () { 
            $.ajax 
                    ({ 
                        url: "/Home/Productpartial", 
                        type: 'GET', 
                        success: function (data) { 
                            $("#main").html(data); 
                            ej.widget.init($("#main")); //initialize the ejwidgets when unobtrusive is true 
                        } 
                    }); 
        }); 
    </script> 
@(Html.EJ().ScriptManager()) 
 
Note: For an Unobtrusive mode, you have to refer the ej.unobtrusive.min.js in the _layout page of your application. 

Help document for, 




Regards, 

Jayaprakash K. 


Loader.
Live Chat Icon For mobile
Up arrow icon