#{
var gridUser = new WebGrid(canPage: true, defaultSort: "CreatedOn", rowsPerPage: 5,
ajaxUpdateContainerId: "Divxyz");
gridUser.Bind(Model.abc, rowCount: Model.User.Count(), autoSortAndPage: true);
gridUser.Pager(WebGridPagerModes.All);
}
<div id="Divxyz" style="display: none">
I am using a mvc3 webgrid with ajax paging ... I figured out my solution to do ajax Paging as above.
BUT ..... My grid is at bottom of the page and When I click on page number(It shows # as its linking page), it takes me to top of page moving grid to bottom of page again for every page number click. Please help me on this.
Thanks In Advance
.
I figured out the solution for the issue.
I added below script and when I click on page number page doesnt scroll
<script type="text/javascript">
$(function () {
$('th a, tfoot a').live('click', function () {
$(this).attr('href', '#DivGridUser-anchor');
});
});
</script>
Related
I have a kendo ui template with a datepicker control
<script type="text/x-kendo-template" id="tmplStep1">
<form>
Date: <input id="datepicker" maxlength="10"/>
<i>(mm/dd/yyyy)</i><br />
</form>
</script>
I'm using a Windows Popup to display the template in this way
var detailsTemplate = kendo.template($("#tmplStep1").html());
dataItem = this.dataItem(e);
var wnd = $("#winDate")
.kendoWindow({
title: "Form",
modal: true,
visible: false,
resizable: false,
width: 100,
appendTo: "form#frm"
}).data("kendoWindow");
wnd.content(detailsTemplate(dataItem));
wnd.center().open();
I know, I need to initialize the datepicker, but I don't know how to do it. I put the below instruction outside of the template, but obviously it is not working, the control displayed is a simple textbox.
<script>
$("#datepicker").kendoDatePicker();
</script>
Does anyone know how to resolve it?
call $("#datepicker").kendoDatePicker(); right after you set template as window content, because before that temlate is not a part of DOM yet:
...
wnd.content(detailsTemplate(dataItem));
$("#datepicker").kendoDatePicker();
wnd.center().open();
I have a div with an un-ordered navigation list in it. The div it is in has a set height and the overflow set to auto to give me a scroll bar. What I want is to have the "current" navigation link scrolled to the top of the div on page load. Each list items has the class 'current-menu-item' when current. Here is what the code looks like.
<div class="menu-portfolio-container">
<ul id="menu-portfolio" class="menu">
<li id="menu-item-174" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-174 has-image">
<a href="http://dnb.khcreativemedia.com/hinton/">
</li>
Here is the jQuery I tried.
<script>
$(document).ready(function () {
// Handler for .ready() called.
$('html, body').animate({
scrollTop: $('.current-menu-item').offset().top
}, 'slow');
});
</script>
Here's the link to jQuery in the head:
<script src="http://dnb.khcreativemedia.com/wp-includes/js/jquery/jquery.js?ver=1.11.1" type="text/javascript">
Can anyone tell me what I would need to do to get this working? This is a wordpress site using the genesis framework.
Thanks to Tim's help, I've got it working. You can check the js fiddle page to see it in action. jsfiddle.net/KHCreative/2rn7otax
Thanks again for your help Tim.
I have a webgrid that is in a partialview. The parial view contains an ajax form which pass data to the webgrid. My view looks like
using (Ajax.Begin("Gain", "Gaining", new AjaxOptions{UpdateTargetId="Res"}))
{
}
<div id="Res">
<div id="grid">
#{var grid = new WebGrid(source: Model.myList, canPage: true, rowsPerPage: 25, ajaxUpdateContainerId: "grid",
canSort: true);
grid.Pager(mode: WebGridPagerModes.All));
#grid.GetHtml(htmlAttributes: new { id = "grid" },
columns: grid.Columns(
grid.Column(columnName: "num", header: "Number"),
grid.Column(columnName: "name", header: "Full Name", canSort: true)
));
}
</div>
</div>
The page displays wells but sorting and moving to the next page does not work. When I try, the grid just dissapears. I notice that when I hover over the column header, that when I hover over the header sorting links, the url is still localhost:XXXXX/#. When I remove the ajaxUpdateContainerId="Res", the url seems right: localhost:xxx?length=4?sort=name&sortdir=ASC, which is a wrong URL given that my data is obtained from the controller, Gaining and method, Gain
How can I get this to work please.Or how can i debug this? How does sorting works?
EDIT
I am now confused as to the use of ajaxUpdateContainerId. According to this link, this did not aid his/her sorting. If I remove it from mine, the whole partial view is removed when I click the header link to sort, or any paging link. What is the use of ajaxUpdateContainerId use then?
I am having the same issue as this question.
I have created a filter that is supposed to work alongside a WebGrid. The filter works for the first page, but if you try to go to a different page or sort the results, the filter is lost. I followed the suggestion in the previous question to change the method to GET, but instead of the target getting updated, it disappears from the page.
Grid call inside a div "Grid":
var grid = new WebGrid(Model, ajaxUpdateContainerId: "Grid", rowsPerPage: 20);
Filter form:
#using (Ajax.BeginForm("Action", new { filter = "filter" }, new AjaxOptions { InsertionMode = InsertionMode.Replace, UpdateTargetId = "Grid", HttpMethod = "Get" }))
If "filter" is set in the Action, I return the PartialView of the grid instead of the full View.
Firebug is showing me that the correct HTML is getting sent in the response, but for whatever reason it's not getting inserted into the Grid div.
Any suggestions would be appreciated!
Edit: My current workaround is to use an HTML form instead of AJAX, but I would like to stick to AJAX if possible.
I got a solution for this problem where I had a div surrounding my Webgrid like this:
Index.cshtml:
<div class="grid-container">
<div id="my-grid">
#Html.Partial("_Grid", Model)
</div>
</div>
_Grid.cshtml:
#{
var grid = new WebGrid(null,
canSort: true,
rowsPerPage: 20,
ajaxUpdateContainerId: "my-grid");
grid.Bind(Model.Models, autoSortAndPage: true, rowCount: Model.TotalModelCount);
}
[...]
When sorting in my list, on filtered results, the Webgrid dissapeared and wasn't inserted into my-grid-div. HOWEVER, when I put the surrounding "my-grid" inside the partial view, it worked. I don't get the reason why, but it works now.
Index.cshtml:
<div class="grid-container">
#Html.Partial("_Grid", Model)
</div>
_Grid.cshtml:
<div id="my-grid">
#{
var grid = new WebGrid(null,
canSort: true,
rowsPerPage: 20,
ajaxUpdateContainerId: "my-grid");
grid.Bind(Model.Models, autoSortAndPage: true, rowCount: Model.TotalModelCount);
}
[...]
</div>
I have a link on my ShowData.aspx page that I'm calling fancybox on.
Edit Data
My JQuery code is:
$("#editLink").fancybox({
'opacity': true,
'overlayShow': true,
'transitionIn': 'elastic',
'transitionOut': 'none'
});
The form EditData.aspx contains a save button. My problem is that after I click the save button the dialog does not close. Furthermore, after the save is performed on the server the client page redirects to EditData.aspx.
The expected outcome is that the dialog closes and I am returned to the parent page (ShowData.aspx).
Thanks!
I removed fancybox and found that this issue also occurs with regular JQuery dialogs. If you load a page that has a submit button (or posts back in any way) then your dialog will disappear and your main page will redirect to the dialog page. Here's a simple test:
HTML:
<div id="divClick"></div>
JQuery:
$(function () {
$("#divClick").dialog({
modal: true,
open: function () {
$(this).load('Postback.aspx');
},
title: 'Ajax Page'
});
});
Postback.aspx:
<body>
<form id="form1" runat="server">
<div>
</div>
Enter Name:
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</form>
</body>
Is there a way to attach an event to the postback from the dialog?
Furthermore, I modified Postback.aspx to include jscolor.js (a JQuery plugin) to see if it would work, it did not work. Any JQuery functionality doesn't seem to work in a dialog.
I ended up using an iFrame. This seems to do the job.
MainPage.aspx
<div id="divClick"><iframe src="Postback.aspx"></iframe></div>
JQuery:
$(function () {
$("#divClick").dialog({
modal: true,
title: 'iFrame Page',
width: 500,
height: 500
});
});
JQuery plugins in Postback.aspx work well and posting back doesn't close the dialog and redirect the main page.