Questions on UI for ASP.NET MVC Forum

2 answers

366 views

Splitter not initial/work well in panelbar when using partial view

hello,

I am drawing one page like this: In panelbar, load Splitter widget. When I put Splitter in partial view and use LoadContentFrom to load this partial view. Splitter will not initial/work well.

Here is part code:

1. PanelBar

      @(Html.Kendo().PanelBar()
          .Name("Panelbar1")
          .ExpandMode(PanelBarExpandMode.Multiple)
          .Items(panelbar =>
          {
              panelbar.Add().Text(N5Default.LABEL_MASTER_STRUCTURE).ImageUrl(@Url.Content("~/content/images/controltesting_panel1.png"))
                  .Expanded(false).LoadContentFrom("SplitterPartial", "Admin");
          })
)

2. Splitter

@(Html.Kendo().Splitter()
      .Name("SplitterSample")
      .HtmlAttributes(new { style = "height:700px;top:-9px;" })
      .Orientation(SplitterOrientation.Vertical)
      .Panes(verticalPanes =>
      {
          verticalPanes.Add()
              .HtmlAttributes(new { id = "location-structure-top-pane" })
              .Scrollable(false)
              .Collapsible(true)
              .Content(
                Html.Kendo().Splitter()
                    .Name("LocationStructureHorizontalSplitter")
                    .HtmlAttributes(new { style = "height: 100%;" })
                    .Panes(horizontalPanes =>
                    {
                        horizontalPanes.Add()
                            .HtmlAttributes(new { id = "location-structure-left-pane" })
                            .Size("200px")
                            .Collapsible(true)
                            .Content("");
                        horizontalPanes.Add()
                            .Collapsible(true)
                            .HtmlAttributes(new { id = "location-structure-right-pane" })
                            .Content("");
                    }).ToHtmlString()
              );
          verticalPanes.Add()
              .HtmlAttributes(new { id = "location-structure-bottom-pane" })
              .Size("320px")
              .Collapsible(true)
              .Content("");
      })
   )

Anybody know why it does not work?

After I use Content to load Splitter and not use LoadContentFrom by partial view, it works.

The below code works well:

@(Html.Kendo().PanelBar()
          .Name("Panelbar1")
          .ExpandMode(PanelBarExpandMode.Multiple)
          .Items(panelbar =>
          {
              panelbar.Add().Text(N5Default.LABEL_MASTER_STRUCTURE).ImageUrl(@Url.Content("~/content/images/controltesting_panel1.png"))
                  .Expanded(false).Content(@<div>
                      @RenderSplitter()
                  </div>);
          })
)

@helper RenderSplitter()
{

@(Html.Kendo().Splitter()
.Name("SplitterSample")

.......

}

Anybody can help? Because I am drawing one complex page. I cannot put all widgets in one page. It will be hard to view. So I want to use partial view to load. Thanks in advance.

Mark

Best Wishes

PanelBar

answered on 06 Sep 2016

3 answers

203 views

Does Kendo Validator exist as a replacement or supplement to jQuery Validator?

Does Kendo Validator exist as a replacement or supplement to jQuery Validator?

It feels wrong to have to instantiate a kendo validator whenever a form contains kendo form elements, as well as the default jQuery validator which contains some special rules associated with the form elements that Kendo doesn't provide.

General Discussions

answered on 05 Sep 2016

1 answer

145 views

Grid().DataSource

Hi,

I've over 500+ pages that almost has common DataSource definitions like:

......

.DataSource(dataSource => dataSource
.Ajax()
.PageSize(Constants.UI.GridPageSize)
.Events(events => events.Error(Constants.UI.GridErrorMethod))
.Model(model => model.Id(p => p.ID))
.Create(update => update.Action(Constants.UI.GridMethods.Create))
.Read(read => read.Action(Constants.UI.GridMethods.Read))
.Update(update => update.Action(Constants.UI.GridMethods.Update))
.Destroy(update => update.Action(Constants.UI.GridMethods.Delete))
)

I've made an extension (defined in here: http://www.telerik.com/forums/define-a-custom-html-kendo-extension-helper), but I also want to say .CustomDataSource() and manage in one place. How I can do that?

Thank you.

Grid

answered on 01 Sep 2016

1 answer

83 views

setting the height of a virtual scrollable grid hides the footer

hi,

i have a virtual scrollable grid for which i set the height:

.Resizable(resize => resize.Columns(true))

.Scrollable(scrollable => scrollable.Virtual(true))
Scrollable(s => s.Height("500px"))

i also need to display custom record count using footerTemplate

columns.Bound(o => o.TradeNumber).Width(130).Groupable(false).Locked(true).FooterTemplate("Total records: " + recordCount);

setting the height above hides the footer. but i need to set the height since its virtual and i need it scrollable.

what can i do?

thanks.

Grid

answered on 01 Sep 2016

3 answers

510 views

ReadOnly lines in Grid

Hi,
I have a Grid with incell edits rows.
I search since the last 2 day to found a solution to have some line with attribute Readonly or disabled if the cell date is <= than a @ViewData[“DisabledDate“]. I don't want user to modify this lines.

I found this way : http://dojo.telerik.com/UQaGo .... but it a inline edit mode. I have to find a solution with InCell mode. I don't want to have to click "update" and "save" on each row.

Thank and sorry for my English.

My grid code :

@(Html.Kendo().Grid<Mentorat.Models.Intervention>()

.Name("grid")

.Columns(columns =>{

columns.Bound(c => c.Date_Intervention).Title("Date").Format("{0:yyyy/MM/dd HH:mm:ss}").Width(130).ClientGroupFooterTemplate("#= count # intervention(s)").ClientFooterTemplate("#= count # intervention(s)");

//columns.Bound(c => c.Date_Intervention).Width(130).Title("Date").ClientGroupFooterTemplate("#= count # intervention(s)").ClientFooterTemplate("#= count # intervention(s)").HtmlAttributes(new { @class = "templateCell" }).ClientTemplate((

//    @Html.Kendo().DateTimePicker().Name("date_#=No_Intervention#").Format("{0:yyyy/MM/dd HH:mm}").HtmlAttributes(new { data_bind = "value:Date_Intervention" }).ToClientTemplate()).ToHtmlString()

//);

columns.Bound(c => c.Duree_Intervention).Title("Durée (min.)").Width(70).ClientGroupFooterTemplate("Total : #= kendo.format('{0:0.00}', sum/60)# hrs").ClientFooterTemplate("Total : #= kendo.format('{0:0.00}', sum/60)# hrs");

columns.ForeignKey(c => c.No_Mentore_Intervention, (System.Collections.IEnumerable) ViewData["ListeMentor"], "No_Mentore", "NomComplet_Mentore").Title("Mentoré").Width(160).ClientGroupHeaderTemplate("#= getHeaderMentores(value,data)#");

columns.Bound(c => c.Description_Intervention).Title("Description").Width(300);

columns.Command(command => { command.Destroy(); }).Width(65);

})

.ToolBar(toolbar =>

{

toolbar.Create();

toolbar.Custom().Name("RepartirTemps").Text("Répartir").HtmlAttributes(new { id = "RepartirTemps", @class = "k-plus" }).Url("#");

toolbar.Save();

toolbar.Excel();

})

.Editable(editable => editable.Mode(GridEditMode.InCell))

.Pageable()

.Filterable(ftb => ftb.Mode(GridFilterMode.Menu))

.Groupable()

.Events(events => events.DataBound("onDataBound"))

.Events(events => events.Edit("onEdit"))

.DataSource(dataSource => dataSource

.Ajax()

.Events(e => e.Change("onChange"))

.Batch(true)

.PageSize(20)

.Model(model => model.Id(p => p.No_Intervention))

.Read(read => read.Action("Interventions_Read", "Interventions"))

.Create(create => create.Action("Interventions_Create", "Interventions"))

.Update(update => update.Action("Interventions_Update", "Interventions"))

.Destroy(destroy => destroy.Action("Interventions_Destroy", "Interventions"))

.Aggregates(ag =>

{

ag.Add(p => p.Duree_Intervention).Sum();

ag.Add(p => p.Date_Intervention).Count();

})

)

Grid

answered on 01 Sep 2016

1 answer

196 views

Populating Dropdown Lists When Editing

I'm trying to figure out how to populate a dropdown list when editing a ListView item. I'm binding to a ViewModel that contains an IEnumerable<SelectListItem>. On other pages without a ListView, I do something like below, however I'm not sure what action I can use to set up the model so that I have access to it when editing using the ListView. I tried looping through each item in the Read action and setting States there, which is definitely inefficient, but regardless didn't work. Any ideas?

public IActionResult Index()

{

var model = _service.FindById(1));

model.States = (_lookupService.GetStates());

return View(model);

}

<select asp-for="StateId" asp-items="Model.States" class="form-control">

<option value=""></option>

</select>

ListView

answered on 01 Sep 2016

3 answers

395 views

TagHelpers + Deferring

Hello,

In HTML helpers we could for example write:

@(Html.Kendo()

.DatePicker()

.Name("datepicker")

.Deferred()

)

...

@section scripts {

@Html.Kendo().DeferredScripts()

}

To have scripts deferred. How can we accomplish the same thing with tag helpers?

<kendo-datepicker name="datepicker" />

Thanks,

Alaa

General Discussions

answered on 01 Sep 2016

1 answer

198 views

Virtual Or Custom Scrolling

I'm looking to customize the paging of the ListView to have an infinite scroll (loading next group when getting to the bottom). Similar to the functionality offered in the grid. Is there any way to achieve this? It kind of looks like the ASP.NET AJAX listview has the ability to customize the pager. Is there any way to go about this?

Thanks

ListView

answered on 01 Sep 2016

3 answers

109 views

unable to bind grid properly

Hello I have a grid in my razor view,
I have added these resources

<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.common.min.css")">

<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.rtl.min.css")">

<link rel="stylesheet" href="@Url.Content("~/Content/KendoThemes/kendo.default.min.css")">

<script src="@Url.Content("~/Scripts/jquery.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.web.min.js")"></script>

<script src="@Url.Content("~/Scripts/kendo.aspnetmvc.min.js")"></script>

here is my grid

@(Html.Kendo().Grid<Nop.Web.Models.Customer.CustomerInfoModel>()

.Name("Grid")

.Columns(columns => {

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

// columns.Bound(p => p.cbSubscriptions).ClientTemplate("#=Employee.EmployeeName#");

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

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

columns.Command(command => { command.Edit(); command.Destroy(); }).Width(200);

})

.ToolBar(toolBar => toolBar.Create())

.Editable(editable => editable.Mode(GridEditMode.InLine))

.Pageable()

.Sortable()

.Scrollable()

.DataSource(dataSource => dataSource

.Ajax()

.Events(events => events.Error("error_handler"))

.Model(model => model.Id(p => p.Id))

.Create(update => update.Action("EditingInline_Create", "Customer"))

.Read(read => read.Action("UsersList", "Customer"))

.Update(update => update.Action("EditingInline_Update", "Grid"))

.Destroy(update => update.Action("EditingInline_Destroy", "Grid"))

)

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

</script>

This works fine. it calls my action in controller to read the data, but the problem is that, it is displaying any rows in grid, even the controller returns the record. I have checked the console, there is no script error, and my network tab shows that these data has been transferred from the server.

data: [{Email:familymanager1_user1@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…},…]
1. 0: {Email:familymanager1_user1@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
2. 1: {Email:familymanager1_user2@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
3. 2: {Email:familymanager1_user3@gmail.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false,…}
4. 3: {Email:as@sad.com, AllowUsersToChangeUsernames:false, UsernamesEnabled:false, Username:aasasasasas687,…}
total: 4

Am I missing something to add.

Grid

answered on 31 Aug 2016

5 answers

1.2K+ views

Displaying checkbox in Kendo grid for DataTable Model in ASP MVC

Hi i am binding my kendo grid with DataTable and trying to display some columns as checkbox using clienttemplate. However every time i am trying i am getting error doing that.

Does anyone know how i can achieve this?

I have attached the mockup of image what im trying to achieve i.e. grid-mockup.jpg.

The error message i get is: Uncaught ReferenceError: ColumnName is not defined

Here is my Razor code:

@using Kendo.Mvc.UI

@model System.Data.DataTable

@(Html.Kendo().Grid<dynamic>()

.Name("Grid")

.Columns(columns =>

{

foreach (System.Data.DataColumn column in Model.Columns)

{