I was finally able to save all my widget information successfully with the help from this question.
Now, I'm completely lost on how to do this, as it is the first time I've ever had to do this. I need to call back my database information to display my widgets properly.
This is my jQuery for the dashboard.
$(function () {
$('.dragbox')
.each(function () {
$(this).hover(function () {
$(this).find('h2').addClass('collapse');
}, function () {
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function () {
$(this).find('.configure').css('visibility', 'visible');
}, function () {
$(this).find('.configure').css('visibility', 'hidden');
})
.click(function () {
$(this).siblings('.dragbox-content').toggle();
})
.end()
.find('.configure').css('visibility', 'hidden');
});
$('.column').sortable({
connectWith: '.column',
handle: 'h2',
cursor: 'move',
placeholder: 'placeholder',
forcePlaceholderSize: true,
opacity: 0.4,
start: function (event, ui) {
//Firefox, Safari/Chrome fire click event after drag is complete, fix for that
//if ($.browser.mozilla || $.browser.safari)
$(ui.item).find('.dragbox-content').toggle();
},
stop: function (event, ui) {
ui.item.css({ 'top': '0', 'left': '0' }); //Opera fix
//if (!$.browser.mozilla && !$.browser.safari)
updateWidgetData();
}
})
.disableSelection();
});
I am able to save to the database using the below and using a Handler and an data class.
function updateWidgetData() {
var items = [];
$('.column').each(function () {
var columnId = $(this).attr('id');
$('.dragbox', this).each(function (i) {
var collapsed = 0;
if ($(this).find('.dragbox-content').css('display') == "none")
collapsed = 1;
//Create Item object for current panel
var item = {
id: $(this).attr('id'),
collapsed: collapsed,
order: i,
column: columnId
};
//Push item object into items array
items.push(item);
});
});
//Assign items array to sortorder JSON variable
var sortorder = { items: items };
$.ajax({
url: "/Handlers/SaveWidgets.ashx",
type: "POST",
contentType: "application/json; charset=uft-8",
dataType: "json",
data: JSON.stringify(sortorder),
success: function (response) {
$("#console").html('<div class="success">Dashboard Saved</div>').hide().fadeIn(1000);
setTimeout(function () {
$('#console').fadeOut(1000);
}, 2000);
},
error: function (error) {
alert("Failed passing json.");
}
});
The way the information looks in the database is like this..
Here is my aspx that shows the widgets (only showing 2 columns, and 1 widget for each for example)
<div class="column" id="column1" runat="server">
<div class="dragbox" id="CurrentDealsWidget" runat="server" visible="false">
<h2 style="font-size: 14pt">Current Deals per Location</h2>
<div class="dragbox-content">
<asp:GridView ID="gvCurrentLocationTotals" runat="server" AutoGenerateColumns="False"
DataKeyNames="InternallocationID">
//columns
</asp:GridView>
</div>
</div>
</div>
<div class="column" id="column2" runat="server">
<div class="dragbox" id="MonthlyDealsWidget" runat="server" visible="false ">
<h2 style="font-size: 14pt">Total Processed Deals per Location</h2>
<div class="dragbox-content">
//content for the widget
</div>
</div>
</div>
Now, I'm not sure how I would go about this. I need to call the information back from the tWidgets table and display in the proper sort. 0 being the first position in the column, followed by 1, 2, 3. I'm not sure if I should do this on the page load, or if it would be better to use a handler to do this process. I'm not sure where to start. The only information that I have found is how to do this in php but that is of no help to me. If anyone can point me in the right direction, that will be greatly appreciated!
EDIT: I have created a WebService that retrieves the widget information and then passes it to ajax on page load.
Web Service
public class RetrieveWidgets : System.Web.Services.WebService
{
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public List<RetrieveWidgetsDAL> GetWidgets()
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["dboCao"].ConnectionString);
List<RetrieveWidgetsDAL> listData = new List<RetrieveWidgetsDAL>();
int getUserId;
string userName = HttpContext.Current.User.Identity.Name;
conn.Open();
using (SqlCommand cmdGetUserId = new SqlCommand("SELECT UserId FROM tUser WHERE UserName = @UserName", conn))
{
cmdGetUserId.Parameters.AddWithValue("@UserName", userName);
getUserId = Convert.ToInt32(cmdGetUserId.ExecuteScalar());
System.Diagnostics.Debug.Write(" --------------- " + getUserId + " --------------- " + userName + " ---------");
}
using (SqlCommand cmdGetWidgets = new SqlCommand("SELECT Title, SortNo, Collapsed, ColumnId FROM tWidgets WHERE UserId = @UserId", conn))
{
cmdGetWidgets.Parameters.AddWithValue("@UserId", getUserId);
using (SqlDataReader rdr = cmdGetWidgets.ExecuteReader())
{
while (rdr.Read())
{
RetrieveWidgetsDAL widgetDAL = new RetrieveWidgetsDAL();
widgetDAL.Title = rdr.GetString(0);
widgetDAL.SortNo = rdr.GetInt32(1);
widgetDAL.Collapsed = rdr.GetInt32(2);
widgetDAL.ColumnId = rdr.GetInt32(3);
listData.Add(widgetDAL);
}
}
}
conn.Close();
return listData;
}
}
ajax
$(document).ready(function () {
$.ajax({
type: "Post",
contentType: "application/json; charset=utf-8",
url: "Webservices/RetrieveWidgets.asmx/GetWidgets",
dataType: "json",
success: function (response) {
alert(response.d); // try using data.d
},
error: function (repo) {
console.log(repo);
},
error: function (error) {
$("#console").html('<div class="fail">Dashboard could no load!</div>').css('visibility', 'visible').fadeTo(600, 1);
setTimeout(function () {
$('#console').delay(500).fadeTo(600, 0);
}, 1000);
}
});
});
Now, my question is, is there a way to use jQuery to place the widgets into their proper location based on the database information?
The json information looks like this..
{d:[{__type:"CentralLogin.Data.RetrieveWidgetsDAL", Title:"CurrentDealsWidget", SortNo:0, Collapsed:0, ColumnId:1}, {__type:"CentralLogin.Data.RetrieveWidgetsDAL", Title:"StorePayrollWidget", SortNo:1, Collapsed:0, ColumnId:1}, {__type:"CentralLogin.Data.RetrieveWidgetsDAL", Title:"ObjectiveWidget", SortNo:2, Collapsed:0, ColumnId:1}, {__type:"CentralLogin.Data.RetrieveWidgetsDAL", Title:"ReportWidget", SortNo:0, Collapsed:0, ColumnId:2}
