This is a migrated thread and some comments may be shown as answers.

Kendo UI Grid custom PopUp

0 Answers 323 Views
Grid
This is a migrated thread and some comments may be shown as answers.
sarat
Top achievements
Rank 1
sarat asked on 12 Sep 2012, 12:13 PM

Hi
i am using KendoUi Grid to display the data on my page from a datasource .
Here is the Code for the same .

@using Kendo.Mvc.UI
@model IEnumerable<Ami.WebRole.Models.FacilityGroupModel>
  
@{
    ViewBag.Title = "Manage Facility Group ";
}
<script type="text/javascript">
    $(document).ready(function () {
        $("form.k-edit-form").kendoValidator();
    });
      
</script
<style type="text/css">
    .k-widget.k-window
    {
        width: 450px;
        height: 250px;
    }
</style>
<h2 style="color:Maroon;">Manage Facility Group</h2> <hr />
  
  
<table>
  
<td>
<td align="center">
  
<table>
<tr>
<td align="left">
  
@using (Html.BeginForm("ManageFacilityGroup", "ManageFacilityGroup", FormMethod.Get))
{
    <fieldset>
    <table>
    <tr>
    <td>
    <p>
    <span><b> Name:</b></span>
    </p>
    </td>
    <td>
    <p>
    @(Html.Kendo().AutoComplete()
                       .Name("FacilityGroupName")
                       .DataTextField("FacilityGroupName")
                       
                       .Filter("Contains")
                           .IgnoreCase(true)
                       .DataSource(source =>{
                       source.Read(read =>
                           {
                               read.Action("GetFacilityName", "ManageFacilityGroup")
                                   .Data("onAdditionalData");
                           })
                           .ServerFiltering(true);
                   })
                   )
                   <script type="text/javascript">
                       function onAdditionalData() {
                           return {
                               text: $("#FacilityGroupName").val()
                           };
                       
                  </script
    </p>
    </td>
    <td align="left">
     <span><b>Status:</b></span>
    </td>
    <td>
    @(Html.Kendo().DropDownList()
             .Name("chkStatus")
          .DataTextField("Text")
          .DataValueField("Value")
          .BindTo(new List<SelectListItem>() {
                new SelectListItem() {
                  Text = "All",
                  Value = "-1"
              },
              new SelectListItem() {
                  Text = "Active",
                  Value = "true"
              },
              new SelectListItem() {
                  Text = "InActive",
                  Value = "false"
              }
               
          })
          .Value("1")
    )
    </td>
    <td align="right">
    <p>
    <input id="Submit1" type="submit" value="Search" />
    </p>
    </td>
    </tr>
    </table>
    </fieldset>
}
</td>
</tr>
<tr>
  
<td align="center" >
    @(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
        {
            columns.Bound(p => p.CustomerName).HtmlAttributes(new { style = "text-align:left;" }).Width(150);
            columns.Bound(p => p.FacilityGroupName).HtmlAttributes(new { style = "text-align: left;" }).Width(170).Title("Facility Group Name");
            columns.Bound(p => p.StatusName).HtmlAttributes(new { style = "text-align: center;" }).Width(90).Title("Status");
            columns.Bound(p => p.CreationDate).HtmlAttributes(new { style = "text-align: right;" }).Width(110).Format("{0:MM/dd/yyyy}");
            columns.Command(command => { command.Edit(); }).Width(85);
        })
  
                .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("FacilityGroupPopUp").Window(window => window.Title("Edit Facility Group").Name("editwindow1")))
        .Scrollable()
        .Pageable(p => p.PageSizes(true))
        .Sortable()
        .DataSource(datasource => datasource
            .Ajax()
            .ServerOperation(false)
            .Model(model => model.Id(p => p.FacilityGroupId))
            .Read(read => read.Action("ManageFacilityGroup", "ManageFacilityGroup"))
            .Update(update => update.Action("Update", "ManageFacilityGroup"))
  
            )
    )
</td>
</tr>
</table>
</td>
</td>
</table>

As u can u see i am using a Custom Pop Up editor to edit the records on my Grid.
Here is my Custom Pop Up
@model Ami.WebRole.Models.FacilityGroupModel
 @using Kendo.Mvc.UI
  
<fieldset>
@* <legend>Edit Facility Group</legend>*@
 <table border="10" cellpadding="0" cellspacing="0" style="border-color:Black; width:350px;" >
 <tr>
 <td colspan="2">
  @if (ViewData["FailureMessage"] != null)
  {
      <div id="divFailureMsg" style="height:25px; background-color:#fffeff;visibility:visible ;color:Red" align="center">
             @Html.Label(ViewData["FailureMessage"].ToString())          
             </div>
  }
  else
  {
       <div id="divFailureMsg" style="visibility:hidden; height:0px;">           
            </div>
  }
 </td>
 </tr>
 <tr>
 <td style="width:150px;">
 @Html.LabelFor(model => model.CustomerName)
 </td>
 <td>
 @(Html.Kendo().DropDownList()
  
                                   .Name("CustomerName")
  
  
          .DataTextField("CustomerName")
                         .DataValueField("CustomerName")
         //.DataValueField("CustomerId")     
  
      .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetCustomer", "ManageFacilityGroup");
          });
      })
  
    )
  
      
 </td>
 </tr>
 <tr>
 <td>
 @Html.LabelFor(model => model.FacilityGroupName)
 </td>
 <td>
 @Html.TextBoxFor(model => model.FacilityGroupName, new { style = "width:156px;" })
 </td>
 </tr>
 <tr>
 <td>
 @Html.LabelFor(model => model.Description)
 </td>
 <td>
 @Html.TextAreaFor(model => model.Description, new { style = "width:163px;" })
 </td>
 </tr>
 <tr>
 <td>
 @Html.LabelFor(model => model.status)
 </td>
 <td>
  @(Html.Kendo().DropDownList()
           
                          .Name("StatusName")
                          .DataTextField("StatusName")
                          .DataValueField("StatusName")
         
      .DataSource(source =>
          {
              source.Read(read =>
              {
                  read.Action("GetStatus", "ManageFacilityGroup");
              });
          })
          )
  
 </td>
 </tr>
 </table>
    
 </fieldset>
  

Now on my popup i am letting the user edit "Customer Name" ,"Facility Group Name" and "Description" and the "Status".
 While updating i am checking whether the updated facility group name doesnt match with any of the already existing names,
Now what i want to achieve is once the facility group name is checked for any duplicacy the name should be updated but if there is any duplicacy the record should not get updated and the edit popup window should remain intact with the proper error message.
In my case the record is not being updated on duplicacy but the edit pop up window gets closed automatically.
Help!!!


No answers yet. Maybe you can help?

Tags
Grid
Asked by
sarat
Top achievements
Rank 1
Share this question
or