Marc Plaxton-Harrison
Top achievements
Rank 1
Rank 1
Marc Plaxton-Harrison
asked on 08 Jul 2016, 09:21 AM
Hi guys lately i have been trying to add upload control inside a popup window but i same as i have my custom edit template. The idea is to have another popup window where I will only handle the uploading of images in a separate window and that window i would like it to have a grid to show uploaded images.
Here is my grid code with the custom edit template for editing,
@(Html.Kendo().Grid<KendoUIApp1_Test.Models.IncidentsViewModel>() .Name("grid") .Columns(colums => { */ colums.Bound(p => p.DepartmentID).Hidden(true); colums.Bound(p => p.StatusName).Title("Status").Filterable(false).ClientTemplate( "# if (StatusID === 1 ) { #" + "<span class='CBdrawingstatusGreen'>#:StatusName#</span>" + "# } else if (StatusID === 2 ) { #" + "<span class='CBdrawingstatusYellow'>#:StatusName#</span>" + "# } else { #" + "<span class='CBdrawingstatusred'>#:StatusName#</span>" + "# } #" ); colums.Bound(p => p.ReferenceNo).Title("ReferenceNo").Filterable(true); colums.Bound(p => p.IncidentDate).Title("IncidentDate").ClientTemplate("#= kendo.format('{0:MM/dd/yyyy HH:mm:ss}',kendo.parseDate(IncidentDate)) #"); //.Filterable(model => model.UI("IncidentDateFilter")); colums.Bound(p => p.AccountName).Title("Airport").Filterable(false).Width(200); colums.Bound(p => p.SiteName).Title("Site").Filterable(false); colums.Bound(p => p.Department1).Title("Department").Filterable(false); colums.Bound(p => p.Description).Title("Description").Filterable(false); colums.Bound(p => p.Comments).Title("Comments").Filterable(false); colums.Bound(p => p.ContactName).Title("CurrentAssignedContact").Filterable(false).Width(200); colums.Bound(p => p.FirstName).Title("CurrentAssignedUser").Filterable(false); colums.Bound(p => p.IncidentID).ClientTemplate("<a class='k-button' href='" + Url.Action("GetPDF", "Home") + "?IncidentID=#= IncidentID #'" + "> <span span class='k-icon k-i-pdf''></span>Get Incident Pdf</a>").Title("Download PDF").Filterable(false); colums.Command(cmd => { cmd.Edit(); //cmd.Custom("Upload").Click("onCustomCommandClick"); }); }) .Filterable(filterable => filterable .Extra(true) .Operators(operators => operators .ForString(str => str.Clear() .StartsWith("Starts with") .IsEqualTo("Is equal to") .IsNotEqualTo("Is not equal to") )) ) .HtmlAttributes(new { style = "height:550px;" }) .DataSource(datasource => datasource .Ajax() //Configure the grid data source .Events(Eevents => Eevents.RequestEnd("OnChangeRefresh")) .Model(model => { model.Id(m => m.IncidentID); }) .Read(read => { read.Action("GetIncidents", "Home").Data("IncidentsFilter"); })// set the action method which will return the data in json format .Update(update => update.Action("Incidents_Update", "Home")) ) .Navigatable() .Groupable() .Pageable() .Reorderable(reorder => reorder.Columns(true)) .Sortable() .Scrollable() .Events(events => { events.Save("onIncidentUserAssign"); // events.Save("onStatusChange"); }) .Events(eEvents => eEvents.Edit("disableOnEdit")) .Events(x => x.DataBound("onDataBound")) //.Events(events => //{ // events.Save("onStatusChange"); // // events.Save("onStatusChange"); //}) .Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("Incidents") .Window(w => w.Animation(true) .Scrollable(false) .Name("editWindow"))) ) and below my edit template,
@Html.HiddenFor(model => model.AccountID)
@Html.HiddenFor(model => model.StatusID)
@Html.HiddenFor(model => model.CurrentAssignedUser)
@Html.HiddenFor(model => model.CurrentAssignedContact)
@Html.HiddenFor(model => model.DepartmentID)
@Html.HiddenFor(model => model.OriginalAssignedUser)
@Html.HiddenFor(model => model.SiteID)
<div class="container">
<div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
<div class="form-horizontal">
<div class="panel panel-primary">
<div class="panel-heading">Incident Settings</div>
<div class="panel-body">
<div class="form-group">
<table class="table.art-article">
<tr>
<td>
<div class="k-edit-label">
@Html.LabelFor(model => model.ReferenceNo, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
</div>
</td>
<td>
<div class="k-edit-field">
@(Html.Kendo().TextBoxFor(model => model.ReferenceNo).Enable(false)
.HtmlAttributes(new { style = "width:200px" })
)
</div>
</td>
</tr>
<tr>
<td>
<div class="k-edit-label">
@Html.LabelFor(model => model.Status, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
</div>
</td>
<td>
<div class="k-edit-field">
@(Html.Kendo().DropDownListFor(model => model.StatusName)
.Name("KStatus")
.DataTextField("StatusName")
.DataValueField("StatusID")
.OptionLabel("Select Status")
.HtmlAttributes(new { style = "width:200px" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetStatus", "Home");
})
.ServerFiltering(true);
})
.AutoBind(false)
)
</div>
</td>
</tr>
<tr>
<td>
<div class="k-edit-label">
@Html.LabelFor(model => model.IncidentDate, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
</div>
</td>
<td>
<div class="k-edit-field">
@(Html.Kendo().DateTimePickerFor(model => model.IncidentDate)
.HtmlAttributes(new { style = "width:200px" })
)
</div>
</td>
</tr>
<tr>
<td>
<div class="k-edit-label">
@Html.LabelFor(model => model.CurrentAssignedUser, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
</div>
</td>
<td>
<div class="k-edit-field">
@(Html.Kendo().TextBoxFor(model => model.FirstName).Enable(false)
.HtmlAttributes(new { style = "width:200px" })
)
</div>
</td>
</tr>
<tr>
<td>
<div class="k-edit-label">
@Html.LabelFor(model => model.CurrentAssignedContact, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
</div>
</td>
<td>
<div class="k-edit-field">
@(Html.Kendo().TextBoxFor(model => model.ContactName).Enable(false)
.HtmlAttributes(new { style = "width:200px" })
)
</div>
</td>
</tr>
<tr>
<td>
<div class="k-edit-label">
@Html.LabelFor(model => model.NewDepartment, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
</div>
</td>
<td>
<div class="k-edit-field">
@(Html.Kendo().DropDownListFor(model => model.Department1)
.Name("KDept")
.DataTextField("Department1")
.DataValueField("DepartmentID")
.OptionLabel("Select Department")
.HtmlAttributes(new { style = "width:200px" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetDepartments", "Home");
})
.ServerFiltering(true);
})
.Events(e => { e.Change("OnChange"); })
.AutoBind(false)
)
</div>
</td>
</tr>
<tr>
<td>
<div class="k-edit-label">
@Html.LabelFor(model => model.AssignNewUser, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
</div>
</td>
<td>
<div class="k-edit-field">
@(Html.Kendo().DropDownListFor(model => model.FirstName)
.Name("Knames")
.DataTextField("FirstName")
.DataValueField("UserID")
.OptionLabel("Select A User")
.HtmlAttributes(new { style = "width:200px" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetUsers", "Home");
});
})
)
</div>
</td>
</tr>
<tr>
<td>
<div class="k-edit-label">
@Html.LabelFor(model => model.AssignNewContact, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
</div>
</td>
<td>
<div class="k-edit-field">
@(Html.Kendo().DropDownListFor(model => model.ContactName)
.Name("KContact")
.DataTextField("ContactName")
.DataValueField("ContactID")
.OptionLabel("Select A Contact")
.HtmlAttributes(new { style = "width:200px" })
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetContact", "Home");
});
})
)
</div>
</td>
</tr>
@* uploading of files images *@
<tr>
<td>
<div class="k-edit-label">
@Html.LabelFor(model => model.AssignNewContact, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
</div>
</td>
<td>
<div class="k-edit-field">
<div id="Popdiv" style="display: none">
@(Html.Kendo().Upload()
.Name("file")
.Multiple(false)
.Events(x => x.Success("onSuccess"))
)
<div style="float: right; margin: 10px">
<button id="okayButton" >Okay</button>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="k-edit-label">
@Html.LabelFor(model => model.currentDepartment, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
</div>
</td>
<td>
<div class="k-edit-field">
@(Html.Kendo().TextBoxFor(model => model.Department1).Enable(false)
.HtmlAttributes(new { style = "width:200px" })
)
</div>
</td>
</tr>
<tr>
<td>
<div class="k-edit-label">
@Html.LabelFor(model => model.Comments, new { @class = " col-xs-3 col-sm-3 col-md-3 col-lg-3 control-label " })
</div>
</td>
<td>
@* <span class="k-textbox k-space-right">*@
<div class="editor-field textarea">
@* @(Html.Kendo().TextBoxFor(model => model.Comments)
.HtmlAttributes(new { style = "width:200px" })
)*@
@Html.TextAreaFor(model => model.Comments, new { rows = "6", cols = "45", @class = "form-control" })
@*@Html.Bootstrap().TextAreaFor(model => model.Comments).Rows(6).Columns(28)*@
</div>
@*</span>*@
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Please help guys...
1 Answer, 1 is accepted
0
Hello Marc,
If I understand right, you are trying to implement two edit templates for the same Grid HTML helper - one for handling the basic edit operations and another one for handling Upload. If this is your case, I am afraid you won't be able to do that. What you could do is to implement a handler for the Grid edit event and based on condition to hide and show fields on your edit form.
Concerning the implementation of the upload, I would suggest you to review this forum post and the discussion below. If it does not match your scenario, please explain the differences and what exactly you want to achieve.
Regards,
Veselin Tsvetanov
Telerik by Progress
If I understand right, you are trying to implement two edit templates for the same Grid HTML helper - one for handling the basic edit operations and another one for handling Upload. If this is your case, I am afraid you won't be able to do that. What you could do is to implement a handler for the Grid edit event and based on condition to hide and show fields on your edit form.
Concerning the implementation of the upload, I would suggest you to review this forum post and the discussion below. If it does not match your scenario, please explain the differences and what exactly you want to achieve.
Regards,
Veselin Tsvetanov
Telerik by Progress
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Feedback Portal
and vote to affect the priority of the items