adding upload control in another popup window

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

    Posted 08 Jul 2016 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
    548 posts

    Posted 12 Jul 2016 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
Back to Top