I have 2 kendo window in 2 different pages with same grid content(url of partial view). these 2 pages are also partial views.And these 2 views are rendered in tabstrip. When open these two tabs, the window in second tab open with empty grid, any solution for this? help me please!
this is my window,!
#(Html.Kendo().Window()
.Name("headerWindow")
.Title("Select Option")
.Visible(false)
.Draggable()
.Width(500)
.Height(300)
//.LoadContentFrom("/asset/AccountGridPopup")
)
</div>
<script>
$(document).ready(function () {
var WindowForheader = $("#headerWindow").data("kendoWindow");
$("#acountCode").dblclick(function () {
//$("#accounttWindow").data("kendoWindow").center().open();
orisWindoOpenForHeader("/AssetTransaction/AccountGridPopup");
//alert("done");
});
function orisWindoOpenForHeader(url) {
WindowForheader.refresh({
url: url
})
WindowForheader.center().open();
}
});
To dynamically create unique grids do something like this in your view:
#{
var gridId = Guid.NewGuid().ToString();
}
<script>
$("##gridId").data("kendoGrid").bind("change", onAccountGridRowSelected);
</script>
#(Html.Kendo().Grid<MyModel>()
.Name(gridId)
.Columns(c =>
{
...Etc
)
Related
I have an MVC app with a Bootstrap Modal declaration in my _Layout.cshtml and I call with some Javascript which loads a MVC partial view into the modal. Everything seems to work fine except that the outer area of the modal is not grayed out showing the user that they can't click anywhere outside of the Modal. In other words the parent page looks like it's active and the Modal is just sitting on top of the parent page.
I've done some searching but I'm not finding anything I can try to get it to show the parent page as being disabled.
Here is my code in my _Layout.cshtml page.
#******** Bootstrap Modal - used with Partial Views ************************#
<div id="modal-container" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content" id="modal-content">
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
// Attach modal-container bootstrap attributes to links with .modal-link class.
// when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog.
$('body').on('click', '.modal-link', function (e) {
e.preventDefault();
$(this).attr('data-target', '#modal-container');
$(this).attr('data-toggle', 'modal');
});
// Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears
$('body').on('click', '.modal-close-btn', function () {
$('#modal-container').modal('hide');
});
//clear modal cache, so that new content can be loaded
$('#modal-container').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
$('#CancelModal').on('click', function () {
return false;
});
});
/***** Vertically center Bootstrap 3 modals so they aren't always stuck at the top ********/
$(function () {
function reposition() {
var modal = $(this),
dialog = modal.find('.modal-dialog');
modal.css('display', 'block');
// Dividing by two centers the modal exactly, but dividing by three
// or four works better for larger screens.
dialog.css("margin-top", Math.max(0, ($(window).height() - dialog.height()) / 2));
}
// Reposition when a modal is shown
$('.modal').on('show.bs.modal', reposition);
// Reposition when the window is resized
$(window).on('resize', function () {
$('.modal:visible').each(reposition);
});
});
</script>
Hi i got issue in opening pop-up window multiple times while clicking button. I will explain my issue clearly.
Hi, this is my parent view Customer Form.I have one add button near to Area if i enter the CustomerName AddressType, Street, Location,Place and then select the area.Suppose if area is not in the list means i have to add that. so i click that add button it will open AreaPartial view as popup window.
After i enter the details and click the create button it will save the data in db and it shows the same popup window when it was close means when i click x mark[which is in the pop up window right top corner ) . Now all are working fine.
Now my issue is i open the pop-up window by clicking the button and add the area and close the pop-up window before clicking the main save button in parent view i have to add another one area so i click the add button again but it wont opening the pop-up window . This is my issue.
My Controller code to save the data which is entered in the partial view pop-up window
public ActionResult AreaPartialView()
{
ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName");
return View("AreaPartialView");
}
[HttpPost]
public ActionResult AddAreaInfo(CustomerViewModel objareaVM)
{
var objAreaID = Guid.NewGuid();
ViewBag.CityID = new SelectList(db.Cities, "CityID", "DisplayName", objareaVM.CityID);
var ObjArea = new Area()
{
AreaID =objAreaID,
DisplayName = objareaVM.Area,
PrintName = objareaVM.Area,
CityID = objareaVM.CityID,
IsActive = true,
IsDeleted = false,
CreatedDate = DateTime.Now,
EditedDate = DateTime.Now,
LastActiveOn = DateTime.Now,
RowID = Guid.NewGuid(),
CreatedSessionID = Guid.NewGuid(),
EditedSessionID = Guid.NewGuid(),
OfflineMode = false,
OfflineID = Guid.NewGuid()
};
db.Areas.Add(ObjArea);
db.SaveChanges();
ModelState.Clear();
return Json(objAreaID);
}
My j-query code to display the area partial view as popup window once the add button is clicked in Parent View
<script src="~/Scripts/jquery-1.10.2-ui.js"></script>
<link rel="stylesheet"href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script type="text/javascript">
$("#AddArea").click(function () {
$('#AddAreaNew').dialog("open");
});
$(function () {
$('#AddAreaNew').dialog({
autoOpen: false,
width: 400,
height: 500,
resizable: false,
title: 'Add Area',
modal: true,
open: function (event, ui) {
$(this).load("#Url.Action("AreaPartialView", "Customer")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
});
My Partial View code
#Html.Label("Area" , new { #class = "control-label" })
#Html.TextBoxFor(model => model.Area, new { #class = "form-control", type = "text" ,id ="AreaName"})
#Html.ValidationMessageFor(model => model.Area)
#Html.Label("City")
#Html.DropDownList("CityID", null, "Select", new { #class = "form-control " })
<script src="~/Scripts/jquery-1.10.4-ui.min.js"></script>
<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script type="text/javascript">
function SaveArea() {
debugger;
var Area = $("#AreaName").val();
var CityID = $("#CityID").val();
alert(Area);
var AreaAdd = { "Area": '' +Area + '', "CityID": CityID };
$.post("/Customer/AddAreaInfo", AreaAdd, function(data) {
var option = new Option(Area, data);
$('#AreaID').append($(option));
alert("sucess");
window.close();
});
}
This is my issue i cant able to open my pop-up window multiple times.i tried my level best to explain my issue. please any one help me to solve this issue.
Advance thanks..
Perhaps something like this would help you, as a brief example.
<style>
.floatingbox
{
z-index:99999;
position:absolute;
/* and more of your styling here, the main point is to make to appear above any other element on the page */
}
</style>
<div class="floatingbox" id="inputbox">
</div>
EDIT: <input type="button" value="Add Field" onclick="WhenIGetClicked(this)"/>
function WhenIGetClicked(e)
{
RefershContent();
document.getElementbyId('input').style.left = e.style.left;
document.getElementbyId('input').style.top = e.style.top; // show div at position of button but you can change it to where-ever
}
function RefreshContent()
{
// put your html in here for the different fields you'll need in the div
document.getElementbyId('inputbox').innerHTML = '';
// add the rest of your html mark up but make it as a function so it can be 'refreshed' and look like a new blank form each time, i found this easier than making a partial view and having to deal with loading it into the div/messing with javascript inside the partial view but may be personal preference :)
}
function OnSaveClick()
{
var SomeValueYouWantToPass = document.getElementbyId('inputboxinsidethediv').value; // or innerHTML works sometimes too if it's not getting the value correctly
$.ajax({
type:post,
url: '/MyController/ActionName',
dataType: 'json',
data: { MyVariableOnTheControllerSide: SomeValueYouWantToPass },
success: function()
{
alert('hey it worked!'); // or refresh the page to load the new field, etc
}
)}
}
</script>
On the controller side now:
public JsonResult UpdateField(string MyVariableOnTheControllerSide)
{
//do something with the data.
return Json('Hey it worked!', JsonRequestBehavior.AllowGet);
}
If you'd like to pass it as a class since that's how you have it set up on your controller, you'll have to create the class as a Json object on the HTML markup side of it when grabbing the values (heck you could even do a for loop of the controls in the div and dynamically grab the values instead of reaching out to each element to get it's value). Very basic run down of how I usually do pop ups. Let me know if you need clarification or if I missed your point :)
I am trying to do a drill down report. I am using MVC and Devexpress Gridviews. I render my view and the partial view and display my gridview with the result.
Now what I need to accomplished is when I double click on the gridview I need to render a new/different partial view in the place off the existing gridview - The one I double clicked on.
Is this possible?
Here is what I have:
public ActionResult MainPartial()
{
using (var Context = new DataContext())
{
ViewBag.Level = 0;
return PartialView("MainPartial",SomeData);
}
}
public ActionResult FirstDrilldownPartial(int Param)
{
using (var Context = new DataContext())
{
ViewBag.Level = 1;
return PartialView("FirstDrilldownPartial",SomeNewData(Param));
}
}
My Gridview RowDblClick event
function onDoubleClick(s, e) {
$.ajax({
type: 'POST',
url: '/Controler/FirstDrilldownPartial',
dataType: 'json',
async: false,
//cache: false,
data: {
Param: 1
}
});
}
At the moment everything is working but when I call the function "function onDoubleClick(s, e)" the Main grid stay on the view and the new grid is not rendered.
Can someone please help with suggestions.
Thanks
You can render both partials in different divs and hide or show in your js function a div, for example
<div id="mydiv1">
#Html.Partial("Partial1")
<div>
<div id="mydiv2">
#Html.Partial("Partial2")
</div>
and in your onDoubleClick ( I assume that you are using jQuery)
$("#mydiv1").hide();
$("#mydiv2").show();
and to hide (on page load) the second div first just add
$(function () {
$("#mydiv2").hide();
});
or use
<div id="mydiv2" style="display:none;">
This code is not tested, but it should work.
Let's say I have a view with Kendo treeview bounded to remote data source.
#(Html.Kendo().TreeView()
.Name("schemas")
.DataTextField("name")
.DataSource(dataSource => dataSource.Read(read => read.Action("Schemas", "Forms")))
.Events(events => events
.Select("onSelected")))
So the treeview just makes a call to the Schemas action in my FormsController
Also on the same page I have a form, which is simply the textbox and a button to submit the form
#using (Html.BeginForm("Load", "Forms", FormMethod.Post))
{
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
}
So I am just wondering what is the best way to handle user input and pass it to the the Load action of the FormsController? The user should select one of the options in the treeview and enter the value into textbox.
Or should I create some sort of viewmodel for my view with all my nodes inside + two additional fields for the textbox input and selected node?
I would take out the form elements, leaving:
<div id="rootNode">
#Html.TextBox("rootElementName")
#Html.Button("next")
</div>
The following js, this will pick up the tree item id on select.
The second function will call your Form controller action with the parameters.
<script>
var selectedNodeid;
//get the tree selected item id
function onSelected(e) {
var data = $('#schemas).data('kendoTreeView').dataItem(e.node);
selectedNodeid = data.id;
}
//button on click event
$(document).ready(function () {
$("#next")
.bind("click", function () {
//get parameters then pa
var id = selectedNodeid;
var rootElementName = $('#rootElementName).val()
$.ajax({
url: "Form/Load",
data:{id:id,rootElementName:rootElementName},
success: function () { }
});
}
})
</script>
I haven't tested this but it should be close.
I look forward to someone adding a better approach.
I have a partial view with some JQuery...
$("#btnCancelPayment").click(function () {
$(this).closest('#test').show('fast');
$(this).closest("#paymentSection").hide('fast');
});
And this partial view sits in the div with id of paymentSection in the root view... wondering how I can find other elements on the root view other than the paymentSection div... (the hide above works, but the show doesn't). The root view:
<div id="test">testing </div>
<div id="paymentSection"></div>
It's JQuery...
$("#btnYesPayment").click(function () {
....
$("#paymentSection").load('/Donation/AddPaymentInfo', function () {
$("#paymentSection").show('fast');
$('#spinner').hide();
});
});
Any thoughts? Thanks!
change this line
$(this).closest('#test').show('fast');
to
if($('#test').length>0){
$('#test').show('fast');
}else console.log('there is no such element');