tag:blogger.com,1999:blog-6672560504141734407.post1904708391503735447..comments2023-02-25T07:27:15.038-06:00Comments on Taking Dot Net "Old School": Widgets: Drag, drop and reorder. Simply done with JQUERY.Lee Saundershttp://www.blogger.com/profile/02660551995265335503noreply@blogger.comBlogger15125tag:blogger.com,1999:blog-6672560504141734407.post-16148442432771901772009-10-22T10:55:08.597-05:002009-10-22T10:55:08.597-05:00OK, so assuming your widget columns are asp:panel ...OK, so assuming your widget columns are asp:panel controls, then here is the code that loads the widgets:<br /><br /> internal void LoadWidgets()<br /> {<br /> Panel[] PanelArray = new[] {LeftPanel, MiddlePanel, RightPanel};<br /><br /> var Parameters = new SqlParameter[2];<br /> Parameters[0] = (new SqlParameter("@LoweredUserName", CurrentUser.UserName.ToLower()));<br /> Parameters[1] = (new SqlParameter("@Title", CurrentPage.Title));<br /><br /> DataSet ds = BaseData.GetDataSet("dbo.GetWidgetInstances", Parameters);<br /><br /> foreach (DataRow dr in ds.Tables[0].Rows)<br /> {<br /> Control MyControl = LoadControl("WidgetContainer.ascx");<br /> if (MyControl is IWidgetHost)<br /> {<br /> MyControl.ID = dr["Id"].ToString();<br /> (MyControl as IWidgetHost).WidgetIsExpandable = (bool)dr["Expandable"];<br /> (MyControl as IWidgetHost).WidgetIsExpanded = (bool)dr["Expanded"];<br /> (MyControl as IWidgetHost).WidgetTitleText = dr["Title"].ToString();<br /> (MyControl as IWidgetHost).WidgetUrl = dr["Url"].ToString();<br /> (MyControl as IWidgetHost).WidgetData = dr["State"].ToString();<br /> (MyControl as IWidgetHost).WidgetIsClosable =(bool)dr["Closable"];<br /> (MyControl as IWidgetHost).WidgetDisplayEdit = (bool)dr["DisplayEdit"];<br /> (MyControl as IWidgetHost).WidgetColumnNo = (int)dr["ColumnNo"];<br /> }<br /><br /> PanelArray[(int) dr["ColumnNo"]].Controls.Add(MyControl);<br /> }<br /> }<br /><br />And inside the WidgetContainer:<br /><br /> protected override void OnInit(EventArgs e)<br /> {<br /> base.OnInit(e);<br /><br /> var widget = LoadControl(WidgetUrl);<br /> if (widget is IWidget) (widget as IWidget).Container = this;<br /> if (widget is IWidget) (widget as IWidget).SetData(WidgetData);<br /> WidgetBodyPanel.Controls.Add(widget);<br /><br /> ContainedControl = (widget as IWidget);<br /> if (ContainedControl != null) ContainedControl.Initialize();<br /> }<br /><br />Hope this helps!Lee Saundershttps://www.blogger.com/profile/02660551995265335503noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-54849685610762731842009-10-21T17:49:31.442-05:002009-10-21T17:49:31.442-05:00Ok man thanks for your reply, so, do you have an e...Ok man thanks for your reply, so, do you have an example that help me for doing that? I'm newer with jquery and this web problems and I'll really apreciate your help, Thank You friendAlexishttps://www.blogger.com/profile/14186064468282242510noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-86195967819691141682009-10-18T11:20:29.602-05:002009-10-18T11:20:29.602-05:00Alexis,
First of all, I am assuming, that like me...Alexis,<br /><br />First of all, I am assuming, that like me, you are loading your Widgets dynamically with LoadContol.<br /><br />The trick is to write the SQL to get the list of Widgets that you need to load into your Panels ordered by their rank. Then as each one is loaded with LoadControl, just put it in the correct Panel. When done, they will be in the same order you stored them in.Lee Saundershttps://www.blogger.com/profile/02660551995265335503noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-81441306101001956562009-10-16T16:43:53.319-05:002009-10-16T16:43:53.319-05:00Hey man, this code is so good and now I'm able...Hey man, this code is so good and now I'm able to store the relation widget, panel and order in my database because of you, but now, how can I do to order my widgets in the panel related in my database the next time when I'll enter to my page? Thanks a lot manAlexishttps://www.blogger.com/profile/14186064468282242510noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-77391107629967612802009-09-05T21:52:07.997-05:002009-09-05T21:52:07.997-05:00Sorry to here about your troubles. It works in my...Sorry to here about your troubles. It works in my project. <br /><br />If I have time, I'll strip down a Visual Studio project that has the needed WebService.Lee Saundershttps://www.blogger.com/profile/02660551995265335503noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-79534696550739855332009-09-04T10:58:42.394-05:002009-09-04T10:58:42.394-05:00I have this in the webservice:
[WebMethod...I have this in the webservice:<br /><br /> [WebMethod]<br /> public string UpdateWidgetPosition(string PanelId, string WidgetID, int WidgetOrderNo, int AgentUserID)<br /> {<br /><br />..etc<br /><br /><br />and this is the jquery:<br />function callMyService() {<br /> $(".DropZone").children().each(function(index) {<br /> var WidgetId = this.id;<br /> var PanelId = $(this).parent('div:first').attr("id");<br /> var WidgetOrderNo = index;<br /><br /> $.ajax({<br /> type: "POST",<br /> url: "/Ajax/WidgetUpdater.asmx/UpdateWidgetPosition",<br /> data: "{ 'PanelId' : '" + PanelId + "' , 'WidgetId' : '" + WidgetId + "', 'WidgetOrderNo' : '" + WidgetOrderNo + "', 'AgentUserID' : '117' }",<br /> contentType: "application/json; charset=utf-8",<br /> dataType: "json", <br /> success: alert("called my service - success, WidgetID: "+ WidgetId + ", PanelId: " + PanelId + ", Widget Order No.: "+ WidgetOrderNo)<br /> });<br /> <br /> });<br /> alert("called my service - finished");<br />}<br /><br />I get all the alerts to say it's working ok, don't get any errors but nothing happens.<br /><br />Are you sure it can translate the json into a list of variables for the c#<br /><br />ThanksRickly Hhttps://www.blogger.com/profile/17248734187199000863noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-87107796607028299742009-09-01T10:46:45.846-05:002009-09-01T10:46:45.846-05:00Great thanks
I'll let you know how we get onGreat thanks<br />I'll let you know how we get onRickly Hhttps://www.blogger.com/profile/17248734187199000863noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-57778301635263838122009-09-01T10:24:27.667-05:002009-09-01T10:24:27.667-05:00Here is our webservice:
[WebService(Namespace...Here is our webservice:<br /><br /> [WebService(Namespace = "http://tempuri.org/")]<br /> [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]<br /> [ToolboxItem(false)]<br /> // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. <br /> [ScriptService]<br /> public class WidgetServices : WebService<br /> {<br /> [WebMethod]<br /> public void UpdateWidgetLocations(string PanelId, string WidgetId, int WidgetOrderNo)<br /> {<br /> var Panels = new[] {"LeftPanel", "MiddlePanel", "RightPanel"};<br /><br /> var Parameters = new SqlParameter[3];<br /> Parameters[0] = (new SqlParameter("@ColumnNo", Array.IndexOf(Panels, PanelId)));<br /> Parameters[1] = (new SqlParameter("@OrderNo", WidgetOrderNo));<br /> Parameters[2] = (new SqlParameter("@WidgetInstanceId", int.Parse(WidgetId.Split('_')[0])));<br /> <br /> BaseData.ExecuteNonQuery("dbo.UpdateWidgetInstanceLocation", Parameters); <br /> }<br /> }Lee Saundershttps://www.blogger.com/profile/02660551995265335503noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-74838324315437926302009-09-01T10:05:52.791-05:002009-09-01T10:05:52.791-05:00How will my webmethod look?
[WebMethod]
...How will my webmethod look?<br /><br /> [WebMethod]<br /> public string UpdateWidgetPosition()<br /> {<br /> //update the table<br /> return "Thanks, position updated";<br /> }<br /><br />Do I put the variables between the brackets ()<br /><br />or is there a different way to receive the json?<br /><br />or is there an alternative to sending Json to the webmethod (sorry, totally new to the Ajax stuff..)Rickly Hhttps://www.blogger.com/profile/17248734187199000863noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-25165883355167250002009-09-01T08:47:54.893-05:002009-09-01T08:47:54.893-05:00Rickly,
Here is the callMyService() that my team ...Rickly,<br /><br />Here is the callMyService() that my team came up with. We desided to go with one call per widget:<br /><br />function callMyService() {<br /> $(".DropZone").children().each(function(index) {<br /> var WidgetId = this.id;<br /> var PanelId = $(this).parent('div:first').attr("id");<br /> var WidgetOrderNo = index;<br /><br /> $.ajax({<br /> type: "POST",<br /> url: "WebServices/WidgetServices.asmx/UpdateWidgetLocations",<br /> data: "{ 'PanelId' : '" + PanelId + "' , 'WidgetId' : '" + WidgetId + "', 'WidgetOrderNo' : '" + WidgetOrderNo + "' }",<br /> contentType: "application/json; charset=utf-8",<br /> dataType: "json"<br /> });<br /> });<br />}Lee Saundershttps://www.blogger.com/profile/02660551995265335503noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-82059155469550308002009-09-01T08:22:43.384-05:002009-09-01T08:22:43.384-05:00Lee,
what would the callMyService();
function typi...Lee,<br />what would the callMyService();<br />function typically look like?<br /><br />I want to call an aspx page in the background which handles the updates.<br /><br />I guess I woud want to send the widgetID, column and position.<br /><br />Or the position of all the widgets in the updated column?Rickly Hhttps://www.blogger.com/profile/17248734187199000863noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-6016192567077539612009-08-19T22:10:56.015-05:002009-08-19T22:10:56.015-05:00On the off chance you were asking me :-) if I had ...On the off chance you were asking me :-) if I had a working example of the code in my post, I've added a link to a working, 3 column example.Lee Saundershttps://www.blogger.com/profile/02660551995265335503noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-34753598940580466772009-08-17T13:49:51.956-05:002009-08-17T13:49:51.956-05:00Sure. Official web site is a sample. It uses Sessi...Sure. Official web site is a sample. It uses SessionDashboardProvider and open-source. Visit www.dynamicdashboards.net.Unknownhttps://www.blogger.com/profile/15554841763028106828noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-44012431444920791372009-08-15T18:46:05.551-05:002009-08-15T18:46:05.551-05:00Do you have a sample project to show the whole thi...Do you have a sample project to show the whole thing in action?fxmisticathttps://www.blogger.com/profile/16443681502876824687noreply@blogger.comtag:blogger.com,1999:blog-6672560504141734407.post-62866342148288688532009-08-15T17:08:59.813-05:002009-08-15T17:08:59.813-05:00Also Dynamic Dashboard & Widget Toolkit for As...Also Dynamic Dashboard & Widget Toolkit for Asp.Net. Drag-drop widgets without thinking about viewstate.<br /><br />Visit <a href="http://www.dynamicdashboards.net" rel="nofollow">Widget Toolkit for Asp.net</a> to get more information.<br /><br />Commercial, reliable and professional than dropthings.Unknownhttps://www.blogger.com/profile/15554841763028106828noreply@blogger.com