I am writing a MVC3 project. Right now I have a table which has column with Data as actionLinks as:
<td style="color: Black; background-color: Bisque; text-align: center; width: 410px">
#Html.ActionLink(#item.LookUp_NameString, "EditPartial", "Capitation", new { id = item.CAPITATION_RATE_ID }, new { #class = "actionLink" })
</td>
EditPartial as the name suggests is a partial view, which I need to be opened as a pop-up menu so that user can edit the details of the object save it and we can come back to original page.
Thanks for the help!
You could use jQuery and jQueryUi to capture the click and open the rendered action in a dialog box.
<div id="popupWindow" style="display: none;" ></div>
<script type="text/javascript">
$(function() {
$("#popupWindow").dialog({
width: 600,
autoOpen: false
});
$('a.actionLink').click(function() {
var url = $(this).attr('href');
$('#popupWindow').load(url, function() {
$('#popupWindow').dialog('open');
});
return false;
});
});
</script>
Related
I am using Listview of kendo ui. I have no server wrapper class I am using the free web version.
My controller code is given below:
public ActionResult Index()
{
return View();
}
public ActionResult GetCandidateSearch()
{
IhrmsEntities Entity = new IhrmsEntities();
List<VW_CANDBASICSEARCH> lstCandidateSearch = Entity.VW_CANDBASICSEARCH.Take(50).ToList();
return Json(lstCandidateSearch,JsonRequestBehavior.AllowGet);
}
My index.cshtml
<div>
#Html.Partial("~/Views/Home/PvCandidateBasicSearch.cshtml")
</div>
My PvCandidateBasicSearch.cshtml
<div class="gridHolder" style="width: 100%">
<div id="listCandidateView" class="itemDisplay"></div>
<div id="pager"></div>
</div>
<script type="text/x-kendo-tmpl" id="template">
<div class="itemDisplay">
<div class="text-label">${CAND_NAME} </div>
<div class="text-label">${CAND_LOCATION} </div>
<div class="text-label">${CAND_MOBILE} </div>
<div class="text-label">${CAND_PRE_EMAIL} </div>
<div class="text-label">${CAND_SKILL} </div>
<div class="text-label">${CAND_CITY} </div>
<a href="/Home/EditCandidate?id=${CAND_ID}" >Edit</a>
<a href="/Home/DeleteCandidate?id=${CAND_ID}" >Delete</a>
</div>
</script>
<style type="text/css">
.text-label {
font-size: large;
}
.itemDisplay {
margin: auto;
padding: 6px 8px;
width:auto;
min-width:200px;
height: auto;
min-height:100px;
border: 1px solid #999999;
-webkit-border-radius: 6px;
border-radius: 6px;
font-weight: normal;
background: #deefff;
}
.gridHolder{width: 100%; height:auto; min-height:300px; margin:auto;}
</style>
My javascript code in layout.cshtml is given below
<script type="text/javascript">
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/Home/GetCandidateSearch',
type: "GET",
dataType: "json"
}
},
pageSize: 15
});
$("#pager").kendoPager({
dataSource: dataSource
});
$("#btnSearch").click(function () {
LoadListView();
});
function LoadListView() {
$("#listCandidateView").kendoListView({
dataSource: dataSource,
pageable: true,
template: kendo.template($("#template").html())
});
}
</script>
when I first click search button it is perfectly going to the GetCandidateSearch action method and showing result.But when I second time clicking search button it is not going the action method. Plz help me.
You're misunderstanding the the datasource concept.
The datasource is an object holds the data gathered from request. On the second click you just re-binding that datasource to the ListView...
Basically, you need to bind the list view to the datasource on page load, then "OnClick", do datasource.read()
try this:
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: '/Home/GetCandidateSearch',
type: "GET",
dataType: "json"
}
},
pageSize: 15
});
$(document).ready(function() {
$("#listCandidateView").kendoListView({
dataSource: dataSource,
pageable: true,
template: kendo.template($("#template").html())
});
});
$("#btnSearch").click(function () {
$("#listCandidateView").datasource.read();
});
Not saying that the exact code will work, but it should give you an idea of the approach.
I'm using Kendo UI Grid with an action link into a client-template column. This action link call an data edit view. See example:
c.Bound(p => p.sID).ClientTemplate(#Html.ImageActionLink(Url.Content("~/Content/images/edit3.png"), "Edit", "Edit", new { id = "#= sID #" }, new { title = "Edit", id = "Edit", border = 0, hspace = 2 }).ToString()
).Title("").Width(70).Filterable(false).Groupable(false).Sortable(false);
My question is how can I configure the grid in order to show an ajax loader when the action link is clicked, until the edit view is rendered?
you can create relative div and insert there your grid and loader wrapper:
<div class="grid-wrapper">
<div class="loading-wrapper">
<div class='k-loading-image loading'></div>
<!-- k-loading-image is standart kendo class that show loading image -->
</div>
#(Html.Kendo().Grid()....)
</div>
css:
.grid-wrapper {
position: relative;
}
.loading-wrapper {
display: none;
position: absolute;
width: 100%;
height: 100%;
z-index: 1000;
}
.loading {
position: absolute;
height: 4em;
top: 50%;
}
add to imageActionLink in htmlAttributes object class named "edit" (for example), and write click event handler:
$(document).on('click', '.edit', function (e) {
$('.loading-wrapper').show();
$.ajax({
// ajax opts
success: function(response) {
// insert your edit view received by ajax in right place
$('.loading-wrapper').hide();
}
})
});
you can do this like :
c.Bound(p => p.sID).Template(#Edit).Title("Edit").Encoded(false);
//encoded false = Html.Raw
Just started using SlickGrid, Not sure if I am missing something, but this simple code doesn't seem to work. It is displaying headers, but not the rows.
Grid Code:
var grid;
var data = [
{ ID: 1, VALUE: "Value1"},
{ ID: 2, VALUE: "Value2"},
{ ID: 3, VALUE: "Value3"},
{ ID: 4, VALUE: "Value4"},
{ ID: 5, VALUE: "Value5"}
];
var columns = [
{name:'ID NUM', field:'ID', id:'ID'},
{name:'VALUE', field:'VALUE', id:'VALUE'}
];
var options = {
enableCellNavigation: true,
enableColumnReorder: false
};
grid = new Slick.Grid("#container-div", data, columns, options);
grid.render();
For some reason, only first row's first cell is rendered in html and is not been displayed.
HTML:
<div class="slick-viewport" style="width: 100%; overflow: auto; outline: 0px none; position: relative; height: 0px;">
<div class="grid-canvas" style="height: 150px; width: 880px;">
<div class="ui-widget-content slick-row even" style="top:0px">
<div class="slick-cell l0 r0">1</div>
</div>
</div>
</div>
You are missing the container div to display the data, in your javascript code you are referencing #container-div but it does not exist inside your html code. Typically you don't have to write any html code like you seem to be doing (or is it the result you displayed?), except for the grid container itself. Try simply adding or replacing with this code in your html body: <div id="container-div" style="width:600px;height:500px;"></div> You can see a simple example from SlickGrid here: https://github.com/mleibman/SlickGrid/blob/master/examples/example1-simple.html
I am loading a partial view in a popup using the following code
$(document).ready(function () {
//define config object
var dialogOpts = {
title: "Mypopup",
modal: true,
autoOpen: false,
height: 300,
width: 700,
open: function () {
//display correct dialog content
$("#Mydiv").load("MyAction");
}
};
$("#Mydiv").dialog(dialogOpts); //end dialog
$("#MyButton").click(
function () {
$("#Mydiv").dialog("open");
return false;
}
);
});
the action MyAction loads a partial view say "Myview" successfully, "Myview" contains a close button and on the click of this button I want to close the popup, How can I do this? I tried following code but this does not work.
$('#Close').click(
function () {
$(this).parent("close");
return false;
});
Can you please help?
Here is my html for the partial view.
#Code
Using (Html.BeginForm())
#<div id="master">
<img alt ="" src ="../../Images/Question.gif" height ="50" width ="50" />#Html.DisplayFor(Function(model) model.ConfirmationMessage) #Html.HiddenFor(Function(model) model.Key )<br /><br />
<div><input id="Yes" type="submit" class ="btn" name="button" value="Yes" /><input id="No" type="submit" class ="btn" name="button" value="No" /></div>
</div>
End Using
End Code
<script type="text/javascript">
$("#No").live("click", function(){ $("#MyDiv").dialog("close"); }); </script>
You could try:
$("#MyDiv").dialog("close")
or add the close buttons in the initialization of it
$( "#MyDiv" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Close": function() {
$( this ).dialog( "close" );
}
}
});
I think i see it now. That button is loaded dynamically so
$("#MyButton").live("click", function(){ $("#MyDiv").dialog("close"); });
It will work we need to refer the following jQuery,jquery-ui.js and jquery-ui.css.
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "jQuery Dialog",
width: 500,
height: 250
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
function Close() {
$('#dialog').dialog('close');
};
</script>
for more details http://www.infinetsoft.com/Post/How-to-open-and-close-a-popup-in-asp-net-mvc-using-Jquery/99#.V0LlETV97cs
I am a completely new to mvc and trying to create a dummy application to learn mvc 3.
I have worked my way through the music store example and now I am trying to extend it slightly into a more real world application.
With the example whenever you want to any new item you are redirected to the Create view which is fine however I want instead of doing a full page post back I want to use the jquery.dialog to open a modal popup which will allow the user to insert a new item.
so far I have
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: "hi there",
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});}); </script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
#Html.Partial("_CreateAlbumPartial")</div>
Problems with this is the partial view is loaded everytime not through ajax and I dont really know where I should be placing the partial view. Shoukld it be in the shared location or in the folder with the other views?
How do I update the controller class to cater for the partial view?
Sorry if these are easy to do, im 3 days into mvc :)
Try something like this:
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function(event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("CreateAlbumPartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
We used the open function which is triggered when the dialog is opened and inside we send an AJAX request to a controller action which would return the partial:
public ActionResult CreateAlbumPartial()
{
return View("_CreateAlbumPartial");
}
To improve Darin answer, we can move the div loading code in the button click event.
In this way all position's alghorithms of the dialog works on the new text, and so the dialog is placed correctly.
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$('#dialog').load("#Url.Action("CreateAlbumPartial")",
function (response, status, xhr) {
$('#dialog').dialog('open');
});
});
});
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">