Open DevExpress MVC Grid in Edit Mode with Custom Edit Button - devexpress

I'm using the Devexpress MVC Grid and I've added two custom buttons (Edit & Copy) and I'm performing the operations. With copy button, I'm creating a new record with existing data and opening the grid in Add New Row Mode.
Following is the code:
#Html.DevExpress().GridView(grid =>
{
grid.Name = "gvInformation";
grid.SettingsDetail.AllowOnlyOneMasterRowExpanded = true;
grid.SettingsEditing.Mode = GridViewEditingMode.EditForm;
//Callback Events
grid.CallbackRouteValues = new { Controller = "Case", Action = "InformationGridContent"};
grid.SettingsEditing.AddNewRowRouteValues = new { Controller = "Case", Action = "AddInformationRecord" };
grid.SettingsEditing.UpdateRowRouteValues = new { Controller = "Case", Action = "UpdateInformationRecord" };
grid.SettingsEditing.DeleteRowRouteValues = new { Controller = "Case", Action = "DeleteInformationRecord" };
grid.ClientSideEvents.BeginCallback = "BeginGridCallback";
grid.BeforeGetCallbackResult = (sender, e) =>
{
MVCxGridView gridView = sender as MVCxGridView;
if (isCopyRequired)
gridView.AddNewRow();
if (gridView.IsNewRowEditing)
{
gridView.SettingsText.CommandUpdate = Html.Raw("<span id='btnGridAdd'>Add</span>").ToHtmlString();
gridView.SettingsText.CommandCancel = Html.Raw("<span id='btnGridCancel'>Cancel</span>").ToHtmlString();
}
if (!gridView.IsNewRowEditing)
{
gridView.SettingsText.CommandUpdate = Html.Raw("<span id='btnGridUpdate'>Update</span>").ToHtmlString();
gridView.SettingsText.CommandCancel = Html.Raw("<span id='btnCancel'>Cancel</span>").ToHtmlString();
}
};
//Custom Copy Record Button
var btnCopy = new GridViewCommandColumnCustomButton { ID = "btnCopy" };
btnCopy.Text = "<i class=\"fa fa-copy fa-lg\" title='Copy'></i>";
grid.CommandColumn.CustomButtons.Add(btnCopy);
//Custom Edit Button
var btnEdit = new GridViewCommandColumnCustomButton { ID = "btnEdit" };
btnEdit.Text = "<i class=\"fa fa-pencil fa-lg\" title='Edit'></i>";
grid.CommandColumn.CustomButtons.Add(btnEdit);
//Custom Button Events
grid.ClientSideEvents.CustomButtonClick = "OnCustomButtonClick";
grid.CustomActionRouteValues = new { Controller = "Case", Action = "CustomInformationRecord" };
}
Client Side Events:
var buttonCommand;
function OnCustomButtonClick(s, e) {
buttonCommand = e.buttonID;
s.PerformCallback();
}
function BeginGridCallback(s, e) {
//Grid Edit Button Click Event
if (buttonCommand === "btnEdit") {
e.customArgs["buttonCommand"] = "btnEdit";
}
//Grid Copy Button Click Event
if (buttonCommand === "btnCopy") {
e.customArgs["buttonCommand"] = "btnCopy";
}
}
It is working fine for Copy button and opening the Grid in Edit Form Mode but when Edit Button is clicked it is not opening the Grid in Edit Mode. Is there something I'm missing?

Related

page is not loading until binding finishing

protected override void OnAppearing()
{
base.OnAppearing();
Device.BeginInvokeOnMainThread( () =>
{
WaitingIndicator.IsRunning = true;
var dataModel = new ClassListViewModel();
ListViewClass.ItemsSource = dataModel.Classes;
ListViewClass.IsPullToRefreshEnabled = true;
ListViewClass.RefreshCommand = dataModel.RefreshCommand;
ListViewClass.BackgroundColor = Color.FromHex("#BDBAB6");
ListViewClass.RowHeight = 200;
ListViewClass.SeparatorVisibility = SeparatorVisibility.None;
ListViewClass.ItemTemplate = new DataTemplate(Function);
ListViewPagningBehavior ListViewBehaviour = new ListViewPagningBehavior();
ListViewBehaviour.Converter = new ItemVisibilityEventArgstemConverter();
ListViewBehaviour.Command = dataModel.LoadMoreCommand;
ListViewClass.Behaviors.Add(ListViewBehaviour);
//BindingContext = dataModel;
ListViewClass.SetBinding(ListView.IsRefreshingProperty, "IsBusy");
ListViewClass.BindingContext = dataModel;
stack.Children.Remove(WaitingIndicator);
});
i am flipping to the above page from another page
my problem is that the page is not showing until the bindingcontext is finishing
but i want to show the waiting indicator to the user while waiting binding

asp.net ext.net show file in browser new window

Our asp.net application uses EXT.NET.
When a "View" menu is clicked, an EXT.NET window shows up with a content of a PDF file.
The problem is we can't drag and drop that window to a body of an Outlook email (to make it as the email attachment).
I am thinking one of the way to drag and drop to a body of an Outlook email is to show the PDF file in the browser window, not an EXT.NET window. How can I do that ?
Thank you.
This is from the View (Index.cshtml):
#{
ViewBag.Title = "Archive";
var X = Html.X();
}
#section SPAViews {
#(
X.Viewport().Layout(LayoutType.Fit).Items(
X.TabPanel().ID("ArchiveTabPanel")
.Items(
X.GridPanel().ID("GridPanel1").MarginSpec("1 1 1 1").Cls("cust-grid").Title("Archive").Icon(Icon.ServerCompressed)
.Plugins(X.GridFilters())
.View(Html.X().GridView().StripeRows(true).TrackOver(false))
.SelectionModel(X.CheckboxSelectionModel().Mode(SelectionMode.Multi))
.TopBar(
X.Toolbar().MinHeight(35)
.Items(
:
, X.Button()
.Text("View")
.Icon(Icon.PageWhiteAcrobat)
.DirectEvents(de =>
{
de.Click.Action = "Submit";
de.Click.EventMask.ShowMask = true;
de.Click.Method = HttpMethod.POST;
de.Click.ExtraParams.Add(new Parameter()
{
Name = "selection",
Value = "getselection()",
Mode = ParameterMode.Raw
});
de.Click.Timeout = 360000;
})
This is from ArchiveController.cs:
public ActionResult Submit(string selection)
{
int cnt = SetTempData(selection);
RenderWindows(String.Format("View Archive {0}.",cnt),0,cnt);
return this.Direct();
}
[ChildActionOnly]
public void RenderWindows(string title,int download,int cnt)
{
Window win = new Window
{
ID = "Windows1",
Title = title,
Icon = Ext.Net.Icon.PageWhiteAcrobat,
Height = download == 1 ? 150 : 600,
Width = download == 1 ? 400 : 800,
BodyPadding = 2,
Modal = true,
Layout = "Fit",
CloseAction = CloseAction.Destroy,
Loader = new ComponentLoader()
{
Url = Url.Action("ArcTicket", "Archive"),
Mode = LoadMode.Frame,
DisableCaching = true,
ShowWarningOnFailure = true,
LoadMask = { ShowMask = true, Msg = String.Format("Generating {0} pdf ...",cnt) }
},
Buttons = {
new Button(){ Text="Close & Clear", Icon=Ext.Net.Icon.TableRowDelete, Handler="App.GridPanel1.selModel.deselectAll();App.Windows1.close();"},
new Button(){ Text="Close", Icon=Ext.Net.Icon.Cancel, Handler="App.Windows1.close();"}
}
};
win.Loader.Params.Add(new Parameter() { Name = "download", Value = download.ToString(), Mode = ParameterMode.Value });
win.Render(RenderMode.Auto);
}
public FileStreamResult ArcTicket(int download)
{
String id = TempData["xid"].ToString();
TempData.Remove("xid");
String ticket = Uow.TICKETs.GetXmlBatch(id);
Byte[] pdf = MvcApplication.Fop.Write(enumFobFormat.Pdf
, ticket
, Server.MapPath("/Resources/xslt/Ticket.xsl")
);
MemoryStream ms = new MemoryStream(pdf);
FileStreamResult fs = new FileStreamResult(ms, "application/pdf");
if (download == 1)
fs.FileDownloadName = string.Format("Archive_{0:yyyyMMdd_HHmmss}.pdf", DateTime.Now);
return fs;
}
You can make normal button / link with href to ArcTicket action with target="_blank" then it will be opened in new tab
Update:
Change .TopBar to something like this. Option 1 may be problematic because of dynamic parameter from grid and i am not sure it will be possible to pass it there
Option 1:
.TopBar(
X.Toolbar().MinHeight(35)
.Items(
:
, X.Button()
.Text("View")
.Icon(Icon.PageWhiteAcrobat)
.Href(Url.Action("ArcTicket", "Archive"))
.HrefTarget("blank")
.BaseParams("yourparameters")
Option 2
.TopBar(
X.Toolbar().MinHeight(35)
.Items(
:
, X.Button()
.Text("View")
.Icon(Icon.PageWhiteAcrobat)
.Handler("YourJSFUnctionWithWIndowOpen")

DevExpress: sender.GetSelectedFieldValues not calling my client side call back

I have a GridExtension for MVC that looks like this:
The table it gets data out of looks like this:
Table Name: Category
Id Name
--------------
1 Foo
2 Bar
3 Gar
4 Har
When I select a row or more from the grid and click the Delete button on the top, I expect that my DeleteSelectedCategories handler should be called, which does happen.
However, in the DeleteSelectedcategories handler, when I call the gvCategories.GetSelectedFieldValues method supplying it the client side call back DeleteCategories, that method does not get called. Instead, I get all my script code shown in a message box like so:
I am using the almost the same code that is shown in this example on the DevExpress documentation website.
Here's my code.
View
<script type = "text/javascript">
//<![CDATA[
$(document).ready(
function () {
WireHandlers();
}
);
function DeleteCategories(selectedCategoriesArray) {
debugger;
if (selectedCategoriesArray.length == 0) return;
for (var i = 0; i < selectedCategoriesArray.length; i++) {
debugger;
}
}
function DeleteSelectedCategories() {
// debugger;
if (gvCategories.GetSelectedRowCount() == 0) return;
gvCategories.GetSelectedFieldValues('Id', DeleteCategories);
}
function WireHandlers() {
$('#btnDeleteCategory').click(DeleteSelectedCategories);
}
// ]]>
</script>
#using System.Web.UI.WebControls;
#using System.Data;
#model IEnumerable<GlobalizationUI.BusinessObjects.Category>
#Html.DevExpress().GridView(settings =>
{
settings.Name = "gvCategories";
settings.CallbackRouteValues = new { Controller = "Category", Action = "CategoriesPartial" };
settings.Width = 1200;
settings.SettingsPager.Position = PagerPosition.TopAndBottom;
settings.SettingsPager.FirstPageButton.Visible = true;
settings.SettingsPager.LastPageButton.Visible = true;
settings.SettingsPager.PageSizeItemSettings.Visible = true;
settings.SettingsPager.PageSizeItemSettings.Items = new string[] { "10", "20", "50", "100", "200" };
settings.SettingsPager.PageSize = 50;
settings.Settings.ShowFilterRow = true;
settings.Settings.ShowFilterRowMenu = true;
settings.CommandColumn.Visible = true;
settings.CommandColumn.ClearFilterButton.Visible = true;
settings.CommandColumn.ShowSelectCheckbox = true;
settings.Settings.ShowHeaderFilterButton = true;
settings.KeyFieldName = "Id";
settings.Columns.Add("Name");
settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "Category", Action = "CreateNew" };
settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "Category", Action = "Edit" };
settings.SettingsEditing.Mode = GridViewEditingMode.Inline;
settings.CommandColumn.Visible = true;
settings.CommandColumn.NewButton.Visible = true;
settings.CommandColumn.EditButton.Visible = true;
settings.CommandColumn.UpdateButton.Visible = true;
}).Bind(Model).GetHtml()
I am using DevExpress Extensions v12.2.10.0 for ASP.NET MVC 4 on Windows 7 Home Premium.
Put the GridView settings to a separate PartialView (without any other tags).

C# MVC3 DropDownList - No ID found in the form post

I just made a form containing a DropDownList, it perfectly shows the option names, but doesn't post the ID of the selected option into the controller.
Here is the code for the controller:
[HttpGet]
public ActionResult Insert(int id)
{
TemplateRepository repo = new TemplateRepository();
List<Template> templateList = repo.ListAll().ToList<Template>();
ViewData["Template"] = new SelectList(templateList, "Id", "Omschrijving");
return View();
}
[HttpPost]
public ActionResult InsertOrEditSubmit(Klant klant)
{
KlantRepository repo = new KlantRepository();
klant.Naam = Request["Naam"];
klant.Adres = Request["Adres"];
klant.Postcode = Request["Postcode"];
klant.Woonplaats = Request["Woonplaats"];
klant.Email = Request["Email"];
klant.Telefoon = Request["Telefoon"];
repo.SaveOrUpdate(klant);
return RedirectToAction("Index");
}
And here is the code in the view:
#using (Html.BeginForm("InsertOrEditSubmit", "Klant", FormMethod.Post))
{
#Html.DevExpress().Label(
settings =>
{
settings.ControlStyle.CssClass = "label";
settings.Text = "Template";
settings.AssociatedControlName = "Template";
}
).GetHtml() <br />
#Html.DropDownList("Template", ViewData["Template"] as SelectList);
#Html.DevExpress().Button(
settings =>
{
settings.ControlStyle.CssClass = "button";
settings.Name = "Insert";
settings.Text = "Toevoegen";
settings.UseSubmitBehavior = true;
}
).GetHtml()
#Html.DevExpress().Button(
settings =>
{
settings.ControlStyle.CssClass = "button";
settings.Name = "Cancel";
settings.Text = "Terug";
settings.ClientSideEvents.Click = "function(s, e){ document.location='" + DevExpressHelper.GetUrl(new { Controller = "Gebruiker", Action = "Index" }) + "'; }";
}
).GetHtml()
}
Hope someone can explain why it doesn't post the ID..
Try: Request["Template"];
Try a simple test:
(Controller)
ViewData["Test"] = new SelectList(new[] {new {Id = 1, Text = "Test 1"}, new {Id = 2, Text = "Test 2"}, new {Id = 3, Text = "Test 3"}}, "Id", "Text");
(View)
#Html.DropDownList("Test", ViewData["Test"] as SelectList)
Now the Request["Test"] should return the Id of the selected value.
But if your View is strongly-typed, in your case to the object "Klant", you don't need to fill the values with the Request, the object will be auto-populated and if your object have a property Template it'll be populated too.
I have found that sometimes having a name along with the id for an input solves this issue.
What does your rendered html for the Template control look like?

Why my yui datatable within an updatepanel disappears after postback?

I got my YUI datatable rendered with my json datasource inside an updatepanel... If i click a button within that updatepanel causes postback and my yui datatable disappears
Why yui datatable within an updatepanel disappears after postback?
EDIT:
I am rendering YUI Datatable once again after each post back which is not a form submit... I know it is a bad practice...
What can be done for this.... Any suggestion.....
if (!IsPostBack)
{
GetEmployeeView();
}
public void GetEmployeeView()
{
DataTable dt = _employeeController.GetEmployeeView().Tables[0];
HfJsonString.Value = GetJSONString(dt);
Page.ClientScript.RegisterStartupScript(Page.GetType(), "json",
"EmployeeDatatable('" + HfJsonString.Value + "');", true);
}
When i click any button in that page it causes postback and i have to
regenerate YUI Datatable once again with the hiddenfield value containing
json string..
protected void LbCancel_Click(object sender, EventArgs e)
{
HfId.Value = "";
HfDesigId.Value = "";
ScriptManager.RegisterClientScriptBlock(LbCancel, typeof(LinkButton),
"cancel", "EmployeeDatatable('" + HfJsonString.Value + "');, true);
}
My javascript:
function EmployeeDatatable(HfJsonValue){
var myColumnDefs = [
{key:"Identity_No", label:"Id", width:50, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
{key:"Emp_Name", label:"EmployeeName", width:150, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
{key:"Address", label:"Address", width:200, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
{key:"Desig_Name", label:"Category", width:200, sortable:true, sortOptions:{defaultDir:YAHOO.widget.DataTable.CLASS_DESC}},
{key:"", formatter:"checkbox"}
];
var jsonObj=eval('(' + HfJsonValue + ')');
var target = "datatable";
var hfId = "ctl00_ContentPlaceHolder1_HfId";
generateDatatable(target,jsonObj,myColumnDefs,hfId)
}
function generateDatatable(target,jsonObj,myColumnDefs,hfId){
var root;
for(key in jsonObj){
root = key; break;
}
var rootId = "id";
if(jsonObj[root].length>0){
for(key in jsonObj[root][0]){
rootId = key; break;
}
}
YAHOO.example.DynamicData = function() {
var myPaginator = new YAHOO.widget.Paginator({
rowsPerPage: 10,
template: YAHOO.widget.Paginator.TEMPLATE_ROWS_PER_PAGE,
rowsPerPageOptions: [10,25,50,100],
pageLinks: 10 });
// DataSource instance
var myDataSource = new YAHOO.util.DataSource(jsonObj);
myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSON;
myDataSource.responseSchema = {resultsList: root,fields:new Array()};
myDataSource.responseSchema.fields[0]=rootId;
for(var i=0;i<myColumnDefs.length;i++){
myDataSource.responseSchema.fields[i+1] = myColumnDefs[i].key;
}
// DataTable configuration
var myConfigs = {
sortedBy : {key:myDataSource.responseSchema.fields[1], dir:YAHOO.widget.DataTable.CLASS_ASC}, // Sets UI initial sort arrow
paginator : myPaginator
};
// DataTable instance
var myDataTable = new YAHOO.widget.DataTable(target, myColumnDefs, myDataSource, myConfigs);
myDataTable.subscribe("rowMouseoverEvent", myDataTable.onEventHighlightRow);
myDataTable.subscribe("rowMouseoutEvent", myDataTable.onEventUnhighlightRow);
myDataTable.subscribe("rowClickEvent", myDataTable.onEventSelectRow);
myDataTable.subscribe("checkboxClickEvent", function(oArgs){
var hidObj = document.getElementById(hfId);
var elCheckbox = oArgs.target;
var oRecord = this.getRecord(elCheckbox);
var id=oRecord.getData(rootId);
if(elCheckbox.checked){
if(hidObj.value == ""){
hidObj.value = id;
}
else{
hidObj.value += "," + id;
}
}
else{
hidObj.value = removeIdFromArray(""+hfId,id);
}
});
myPaginator.subscribe("changeRequest", function (){
if(document.getElementById(hfId).value != "")
{
if(document.getElementById("ConfirmationPanel").style.display=='block')
{
document.getElementById("ConfirmationPanel").style.display='none';
}
document.getElementById(hfId).value="";
}
return true;
});
myDataTable.handleDataReturnPayload = function(oRequest, oResponse, oPayload) {
oPayload.totalRecords = oResponse.meta.totalRecords;
return oPayload;
}
return {
ds: myDataSource,
dt: myDataTable
};
}();
}
Hai guys,
I got an answer for my qusetion.... Its my postback that caused the problem and i solved it by making an ajax call using ajax enabled WCF Service in my web application... Everything works fine now....
Anything you are generating client side will have to be regenerated after every page refresh (and after every partial page refresh, if that part contains client-side generated html).
Because the YUI datatable gets its data on the client, you will have to render it again each time you replace that section of html.

Resources