Telerik Forums
UI for ASP.NET MVC Forum
or
Ask question
All Questions
Unanswered
Answered
8,864 questions
5 answers
737 views
How to set Grid's Edit popup position

I am using MVC Wrapper sample project by telerik.

  1.    How to set the position for add/edit popup? I want it to be in center. See attached diagram and code below.
  2.    Delete confirmation is not working.
  3. Is there a way to customize alert and confrim. For e.g. when delete is clicked instead of browser's confirm window i would wish to beautify it with default theme.
    @model IEnumerable<Kendo.Mvc.Examples.Models.ProductViewModel>
    @(Html.Kendo().Grid(Model)
          .Name("Grid")
          .Columns(columns =>
              {
                  columns.Bound(p => p.ProductName);
                  columns.Bound(p => p.UnitPrice);
                  columns.Bound(p => p.UnitsInStock);
                  columns.Command(command =>
                      {
                          command.Edit();
                          command.Destroy();
                      });
              })
          .ToolBar(toolbar => toolbar.Create())
          .Editable(editable => editable.Mode(GridEditMode.PopUp)
                                    .DisplayDeleteConfirmation(true)
                                    .Window(buider => buider.Modal(true)
                                                          .Resizable(c => c.Enabled(true))
                                                          .Animation(true)
                                                           
                                                           
                                                           
                                    )
                                    .CreateAt(GridInsertRowPosition.Top))
          .Pageable()
          .Sortable()
          .Scrollable()
          .DataSource(dataSource => dataSource
                                        .Server()
                                        .Model(model => model.Id(p => p.ProductID))
                                        .Read("ServerEditing", "Grid")
                                        .Update("Update", "Grid")
                                        .Create("Create", "Grid")
                                        .Destroy("Destroy", "Grid")
          ))
    <script type="text/javascript">
        $(document).ready(function() {
            $("form.k-edit-form").kendoValidator();
        });
    </script>
Grid
Greg
Top achievements
Rank 1
 answered on 20 Aug 2012
1 answer
134 views
tabStrip double click bug
Hello,
when double click on tabStrip tabs in loadContentFrom mode open loadContentFrom parameter in new page.
for example this demo project in tabStrip section:
Loading content with AJAX
when selected tab is "Dimensions & Weights" and double click on "Engine" tab load this link on browser and conversely:
http://localhost:8301/Content/web/tabstrip/ajax/ajaxContent2.html

Is this a bug or not??

tanks for your attention.
TabStrip
Kamen Bundev
Telerik team
 answered on 20 Aug 2012
5 answers
717 views
Trying to use tabstrip, but tabs are not switching
Am using Razor for my rendering and while the tabs while load and show, I cannot actually switch between them. So I have 3 tabs and when the page loads, it shows the first, but then if I select the second one, it doesn't actually show the content that is in that. The URL switches, but the content stays the same. Am sure this is something simple I am missing, but nevertheless, I am not seeing it. Can anyone please help? Here is my code in my .cshtml file:

@using AjaxControlToolkit.HTMLEditor;
@model TriadUI.Models.SearchViewModel
@{
    ViewBag.Title = "Search";
}
<head>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/app.css")"/>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/kendo/kendo.common.min.css")"/>
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/kendo/kendo.default.min.css")"/>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.placeholder.js")"></script>
    <script type="text/javascript" src="@Url.Content("~/Scripts/kendo/kendo.all.min.js")"></script>
 
</head>
<div id="searchSect">
    <div id="searchTabs">
        @(Html.Kendo().TabStrip()
            .Name("searchTabs")
            .Events(events => events
            .Activate("onActivate")
            .Select("onSelect")
            )
            .Items(items =>
                        {
                            items.Add().Text("Subscriber")
                                .Selected(true)
                                .Content(@<text>
                                              <div id="subTab">
                                                  Subscriber Text
                                                  @using (Ajax.BeginForm("SearchSubscriber", new AjaxOptions {UpdateTargetId = "subGrid"}))
                                                  {
                                                      <fieldset>
                                                          <legend>Subscriber Search: </legend>
                                                          <label id="subsrchTxt" style="float: left;">
                                                              (All fields are not required) ('*' = wildcard)</label><br />
                                                          <div id="subleftInput">
                                                              @Html.TextBoxFor(m => m.SearchFields.SubscriberName, new {placeholder = "Name", @class = "longTextBox"})<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.AddressLine1, new {placeholder = "Address Line 1", @class = "longTextBox"})<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.AddressLine2, new {placeholder = "Address Line 2", @class = "longTextBox"})<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.City, new {placeholder = "City", tabindex = "4", @class = "longTextBox"})<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.ZipCode, new {name = "zipCode", placeholder = "Zip Code", @class = "shortTextBox"})
                                                              @Html.DropDownListFor(z => z.SelectedState, Model.SearchInfoModel.StateSelectList, new {id = "ddlStates", @class = "shortSelectList"})<br />
                                                              @*                            Phone Type:<select id="Select1" tabindex="8">
                                                                <option value="1" title="Phone Number">Phone</option>
                                                                <option value="2" title="Can be reached at?">Reached At</option>
                                                                <option value="3" title="Fictional Telephone Number">Fict TN</option>
                                                            </select>*@
                                                              @Html.TextBoxFor(m => m.SearchFields.PhoneNumber, new {@class = "mediumTextBox", placeholder = "Phone Number"})<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.Email, new {name = "emailAddy", placeholder = "Subscriber Email", @class = "longTextBox"})<br />
                                                          </div>
                                                          <div id="subsrightInput">
                                                              @Html.TextBoxFor(m => m.SearchFields.SubscriberId, new {name = "subsID", placeholder = "Subscriber ID", @class = "longTextBox"})<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.LocationId, new {name = "locID", placeholder = "Location ID", @class = "longTextBox"})<br />
                                                              <input type="text" name="ontSrl" placeholder="ONT Serial #" class="longTextBox"/><br />
                                                              <input type="text" name="stbSrl" placeholder="STB / Device Serial #" class="longTextBox"/><br /><br />
                                                              <input type="reset" title="Reset" tabindex="12" onclick="ClearFieldsForSubscriberSearch();" />
                                                              <input type="submit" title="Search" value="Search" tabindex="11" />
                                                              <br />
                                                          </div>
                                                          <div class="subButtons">
                                                          </div>
                                                      </fieldset>
                                                  }
                                              </div>
                                            </text>);
                            items.Add().Text("Location")
                                .Content(@<text>
                                              <div id="locTab">
                                                  Location Text
                                                  @using (Ajax.BeginForm("SearchLocation", new AjaxOptions { UpdateTargetId = "locationGrid" }))
                                                  {
                                                      <fieldset>
                                                          <legend>Location Search: </legend>
                                                          <label id="locsrchTxt" style="float: left;">
                                                              (All fields are not required) ('*' = wildcard)</label><br />
                                                          <div id="locleftInput">
                                                              @Html.TextBoxFor(m => m.SearchFields.AddressLine1, new { name = "addy1", placeholder = "Address Line 1", @class = "longTextBox"})<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.AddressLine2, new { name = "addy2", placeholder = "Address Line 2", @class = "longTextBox"})<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.City, new { name = "city", placeholder = "City", @class = "longTextBox"})<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.ZipCode, new { name = "zipCode", placeholder = "Zip Code", @class="shortTextBox"})
                                                              @Html.DropDownListFor(z => z.SelectedState, Model.SearchInfoModel.StateSelectList, new { id = "ddlStates", @class= "shortSelectList" })<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.PhoneNumber, new {  name="provNum" ,placeholder="Provisioned Number", @class = "mediumTextBox" })                          
                                                          </div>
                                                          <div id="locrightInput">
                                                              @Html.TextBoxFor(m => m.SearchFields.LocationId, new { name = "locID", placeholder = "Location ID", @class = "longTextBox"})<br />
                                                              @Html.TextBoxFor(m => m.SearchFields.SubscriberId, new { name = "subsID", placeholder = "Subscriber ID", @class = "longTextBox"})<br /><br />
                                                              <input type="reset" title="Reset" tabindex="10" onclick="ClearFieldsForLocationrSearch();"/>
                                                              <input type="submit" title="Search" value="Search" tabindex="9" />
                                                          </div>
                                                          <div class="subButtons">
 
                                                          </div>
                                                      </fieldset>
                                                  }
                                              </div>
                                    </text>);
                            items.Add().Text("Device")
                                .Content(@<text>
                                              <div id="devTab">
                                                  Device text
                                                  @using (Ajax.BeginForm("SearchDevice", new AjaxOptions { UpdateTargetId = "deviceGrid" }))
                                                  {
                                                      <fieldset>
                                                          <legend>Device Search: </legend>
                                                          @Html.TextBoxFor(m => m.SearchFields.EquipmentId, new { name = "devID", placeholder = "Device ID", @class = "longTextBox" })<br />
                                                          @Html.TextBoxFor(m => m.SearchFields.SubscriberId, new { name = "subsID", placeholder = "Subscriber ID", @class = "longTextBox" })<br />
                                                          @Html.TextBoxFor(m => m.SearchFields.LocationId, new { name = "locID", placeholder = "Location ID", @class = "longTextBox" })<br />
                                                          @Html.TextBoxFor(m => m.SearchFields.PhoneNumber, new {  name="provNum" ,placeholder="Provisioned Number", @class= "longTextBox" })<br />
                                                          @Html.TextBoxFor(m => m.SearchFields.SubscriberName, new {  name="subsName", placeholder="Subscriber Name" , @class= "longTextBox" })<br />                           
                                                          <div class="subButtons">
                                                              <input type="reset" title="Reset" tabindex="8" onclick="ClearFieldsForDeviceSearch();"/>
                                                              <input type="submit" title="Search" value="Search" tabindex="7" />
                                                          </div>
                                                      </fieldset>
                                                  }
                                              </div>
                                            </text>);
                        })
              )
    </div>
</div>
<div id="subGrid">
    @if (Model.SubsriberSearchResults != null)
    {
        <table>
            <tr>
                <th>
                    SubscriberId
                </th>
                <th>
                    Name
                </th>
                <th>
                    ContactEmail
                </th>
                <th>
                    ContactPhone
                </th>
            </tr>
            @foreach (var subscriber in Model.SubsriberSearchResults)
            {
                <tr>
                    <td>@subscriber.ID
                    </td>
                    <td>@subscriber.Name
                    </td>
                    <td>@subscriber.SubContactEmail
                    </td>
                    <td>@subscriber.SubContactPhone
                    </td>
                </tr>
            }
        </table>
    }
</div>
<div id="locationGrid">
    @if (Model.LocationSearchResults != null)
    {
        <table>
            <tr>
                <th>
                    ID
                </th>
                <th>
                    AddressLine1
                </th>
                <th>
                    AddressLine2
                </th>
                <th>
                    State
                </th>
            </tr>
            @foreach (var location in Model.LocationSearchResults)
            {
                <tr>
                    <td>@location.ID
                    </td>
                    <td>@location.AddressLine1
                    </td>
                    <td>@location.AddressLine2
                    </td>
                    <td>@location.StateName
                    </td>
                </tr>
            }
        </table>
    }
</div>
<div id="deviceGrid">
    @if (Model.EquipmentSearchResults != null)
    {
        <table>
            <tr>
                <th>
                    SerialNumber
                </th>
                <th>
                    AssociatedSubscriberId
                </th>
                <th>
                    Model
                </th>
                <th>
                    Status
                </th>
            </tr>
            @foreach (var device in Model.EquipmentSearchResults)
            {
                <tr>
                    <td>@device.SerialNumber
                    </td>
                    <td>@device.AssociatedSubscriberId
                    </td>
                    <td>@device.Model
                    </td>
                    <td>@device.Status
                    </td>
                </tr>
            }
        </table>
    }
</div>
<div id="indexBottom">
    <%Html.RenderPartial("News"); %> <%Html.RenderPartial("SubGrid");%> <%Html.RenderPartial("LocGrid");
    %> <%Html.RenderPartial("DeviceGrid"); %>
</div>
@*<input type="submit" value="submit" />*@ 
TabStrip
Dimo
Telerik team
 answered on 20 Aug 2012
1 answer
423 views
Convert DataSourceRequest to SQL text
I am using an AJAX driven grid that is pulling it's data from SQL Azure.  I would like to use the paging feature, as we can have > 100,000 rows.

I see in the examples there are extensions to help take the DataSourceRequest and apply it to the data to enable to paging.  I'm assuming when this is applied to an IQueryable<> with Entity Framework (or similar) that it will apply the sorting, grouping and paging automatically to the query on the database.

However, our data access layer does not use EF or IQueryable<>, we are using straight SqlClient to access the database.  

With this said, we need to take the DataSourceRequest and apply that to a standard text sql query.  We can write this code ourselves, but wondering if this is a utility that already exists in the kendo framework?  Or is there an example to get us started?

Thanks for the help in advance
Grid
Atanas Korchev
Telerik team
 answered on 20 Aug 2012
0 answers
222 views
Dropdownlistfor and IntegerTextBoxFor Inside Grid
Hello,

I'm currently migrating from Telerik MVC to Kendo MVC, I'm having a problem using EditorTemplates inside Kendo MVC, which was not happening when I was using Telerik for MVC.

When I use Editor templates: Html.Kendo().DropDownListFor and Html.Kendo().IntegerTextBoxFor in an editor template that is used inside a grid, the following happens:

IntegerTextBox:

It show the placeholder, not the value, but when I click inside the textbox, it works fine.

DropDownListFor:

The selected value is the first item in the list, not the binded item.

Attached is a screenshot of the issue.

Please help with this issue, Thanks in advance. 
Grid
kabbas
Top achievements
Rank 1
 asked on 18 Aug 2012
1 answer
178 views
batch editing in a single transaction
hi,
it's possible save the data of a grid in a single db transaction?

now also using batch editing, under the hood it call update, insert and delete
I need to call a single method so I can save in db between a transaction
Grid
Atanas Korchev
Telerik team
 answered on 17 Aug 2012
1 answer
155 views
New Project fails - MVC4 (RTM) Project templates in VS2010
Hi,

When I create a new MVC4 project, and choosing to the "Kendo UI for MVC Web Application" template, the template wants to download several NuGet packages. At least EntityFramework.5.0.0-rc is no longer available, (no longer a Release Candidate), and therefore the Nuget installer fails. As a consequence several other NuGet packages does not download / install. (see attached screenshot)

The project is created, but fails to run initially.
I can manually install these packages, and then the site then seems to work withing problem.

Just wondering when the Project Templates will be updated, and how to get them?

Thanks!
-Louis
Installer and VS Extensions
Aylin
Telerik team
 answered on 17 Aug 2012
9 answers
661 views
Error message and localization
Hello,

Kendo looks very well and i want use it as soon as is final.
I think i have found a little bug with the error message inside the grid. Please see the attached sample and check the message for Required with Culture "en-US" and "de-DE".

Regards
Grid
Nikolay Rusev
Telerik team
 answered on 17 Aug 2012
1 answer
109 views
Dialect on Ajax DataSource
I need to control how ajax parameters are sent to my controller as parameters. I can do this in javascript using the dialect api...but I can't find how to do this with the MVC wrappers.

Any suggestions? I have:

@model CabIt.Web.ViewModels.AddressViewModel
 
@(Html.Kendo().AutoCompleteFor(a => a).Name("fromAddress").DataTextField("Name")
      .DataSource(source => source.Read(read => read.Action("/", "Api/Addresses"))
                                .ServerFiltering(true)))


I want to call the method:

public class AddressesController : ApiController
{  
    public IEnumerable<AddressViewModel> Get(string id)
    {
        return AddressViewModel[0];
    }
}
General Discussions
Atanas Korchev
Telerik team
 answered on 17 Aug 2012
1 answer
252 views
Grid server template
Is this form of server template creation supported in Kendo/MVC?

.Template(t =>
    {
       @<text>
       This is my custom template
       </text>
    }                                                       
 )

I've seen server templates created like this but not like the above.
Grid
Chris Williams
Top achievements
Rank 1
 answered on 16 Aug 2012
Narrow your results
Done
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
MultiColumnComboBox
Dialog
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
ColorPicker
DateRangePicker
Security
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SegmentedControl
+? more
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
863 864
865
866 867
Top users last month
Boardy
Top achievements
Rank 2
Veteran
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
ivory
Top achievements
Rank 1
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
ClausDC
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Learn how
Want to show your ninja superpower to fellow developers?
Learn how