Questions on UI for ASP.NET MVC Forum

2 answers

835 views

Want to be able to get the item selected on the 'change' event in a ListView

I'm using MVC, so the following example:

http://www.kendoui.com/blogs/teamblog/posts/12-04-12/an_in-depth_look_at_the_listview.aspx

Doesn't really help me because i don't have a 'datasource' object in javascript. What can i use in a simliar fashion for MVC? I have the following so far

function onchange(e) {

var lst = $("#lstLPG").data("kendoListView");

}

but i don't know how to get the selected object from either the 'e' or 'lst' object.

ListView

answered on 20 Aug 2012

1 answer

279 views

Adding a new Listview item using a template calls the Create action multiple times!

Hi,
I have an MVC4 application and am trying to use the Listview using the MVC wrappers. I am using an edit and a view template.
If there are 4 items in my list and I add a new one the Create action is called 5 times, thus 5 records get added.

I am using the latest Q2 trial version. However I previously had downloaded the beta trial version which included an MVC example project which showed the exact same behavour. Is this a bug?
(Note the same issue occurs for other actions as well)

<div class="k-toolbar k-grid-toolbar">

<a id="addRoleButton" class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new Role</a>

</div>

@(Html.Kendo().ListView<iProjX.Models.RoleModel>(Model.Roles)

.Name("rolesListView")

.TagName("div")

.ClientTemplateId("rolesList")

.Editable()

.Pageable()

.DataSource(dataSource => dataSource

.Model(model =>

{

model.Id("RoleId");

model.Field(f => f.ProjectId).DefaultValue(Model.ProjectId);

model.Field(f => f.Title);

model.Field(f => f.Description);;

})

.Events(e => e

.Error("rolesListViewData_error")

.Change("rolesListViewData_change")

.RequestStart("rolesListViewData_requestStart"))

.Create(create => create.Action("createRole", "Project"))

.Read(read => read.Action("getRoles", "Project", new { projectId = Model.ProjectId }))

.Update(update => update.Action("updateRole", "Project"))

.PageSize(30)

)

.Events(e => e

.Change("rolesListView_change")

.Edit("rolesListView_edit")

.DataBound("rolesListView_databound"))

)

View Template

//View template

<script type="text/x-kendo-template" id="rolesList">

<div class="roleView" >

<div> ${Title} </div>

<div> ${Description} </div>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span>Edit</a>

<a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"></span>Delete</a>

</div>

</script>

Edit template

@model iProjX.Models.RoleModel

<div class="roleView" id = "newRoleForm2" >

@Html.ValidationSummary(true)

@Html.HiddenFor(model => model.ProjectId)

@Html.HiddenFor(model => model.RoleId)

<div class="editor-label">

@Html.LabelFor(model => model.Title)

</div>

<div class="editor-field">

@Html.TextBoxFor(model => model.Title, new { style = "width:99%", maxlength = 100 })

<span data-for="Title" class="k-invalid-msg"></span>

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Description)

</div>

<div class="editor-field">

@Html.TextAreaFor(model => model.Description, new { style = "width:100%; height:100px"})

<span data-for="Description" class="k-invalid-msg"></span>

</div>

<div class="edit-buttons">

<a class="k-button k-button-icontext k-update-button" onclick="updateClick()" href="\\#"><spanclass="k-icon k-update"></span>Save</a>

<a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span>Cancel</a>

</div>

ListView

answered on 20 Aug 2012

12 answers

289 views

Ajax Binding. asp.net mvc3

I followed the instructions for ajax binding to the T and all i get is a dump of the JSON on my screen. All the information is there it is just not being put into a grid. HELP!
Here is the code below:

public ActionResult BulkEdit([DataSourceRequest]DataSourceRequest request)

{

var NewAssets = db.TurnaroundDumps;

DataSourceResult result = NewAssets.ToDataSourceResult(request);

return Json(result, JsonRequestBehavior.AllowGet);

}

Then on my view:

@(Html.Kendo().Grid<PcInventory_v1_1.Models.TurnaroundDump>()

.Name("Grid")

.Columns(columns =>

{

columns.Bound(p => p.AssetTag);

columns.Bound(p => p.SerialNumber);

columns.Bound(p => p.DeptId);

columns.Bound(p => p.Location);

})

.DataSource(dataSource => dataSource

.Ajax() // Specify that the data source is of ajax type

.Read(read => read.Action("BulkEdit", "Assets")) // Specify the action method and controller name

)

.Pageable()

)

Grid

answered on 20 Aug 2012

5 answers

747 views

How to set Grid's Edit popup position

I am using MVC Wrapper sample project by telerik.

How to set the position for add/edit popup? I want it to be in center. See attached diagram and code below.
Delete confirmation is not working.
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

answered on 20 Aug 2012

1 answer

136 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

answered on 20 Aug 2012

5 answers

728 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

answered on 20 Aug 2012

1 answer

430 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

answered on 20 Aug 2012

0 answers

229 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

asked on 18 Aug 2012

1 answer

185 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

answered on 17 Aug 2012

1 answer

158 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

answered on 17 Aug 2012