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.
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
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
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
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
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
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
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
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
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
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.
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.
|
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()
|
|
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()) |
