adding upload control in another popup window

2 posts, 0 answers
  1. Marc Plaxton-Harrison
    Marc Plaxton-Harrison avatar
    38 posts
    Member since:
    Mar 2008

    Posted 08 Jul Link to this post

    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 =>
                  {
                       * http://www.telerik.com/blogs/kendo-ui-r1-2016-webinar-wrapup
                       */
                      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...

  2. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    278 posts

    Posted 12 Jul Link to this post

    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
    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
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top