Telerik Forums
UI for ASP.NET MVC Forum
5 answers
393 views

 

I am using editor template for child grid column. It is rendering for the first child grid. Like seeing in attached picture it is not rendering for the second  child grid.

 

 columns.Bound(p => p.RoleId).EditorTemplateName("UserRole").Title(ViewBag.Location).ClientTemplate("\\#:RoleName\\#"); 

Georgi
Telerik team
 answered on 31 Jul 2019
2 answers
4.0K+ views
I have a custom command in my grid:

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

When the user clicks this button I would simply like to navigate to the page Details on the controller InvoiceController with the correct InvoiceID from the appropriate row the user clicked.
It seems this used to be done like so

commands.Custom("InvoiceDetails").Action("Details", "Invoice").DataRouteValues


However I have no action method on the custom command only a click method?
Where has this action method gone, and how do I now use the click method?
I'm using ASP.net Core 1.
Viktor Tachev
Telerik team
 answered on 29 Jul 2019
3 answers
1.2K+ views
I have a form where the values available in one drop down list depend on the values of two other drop down lists. I'd like for the values in this drop down list to be refreshed whenever either of these two parent lists changes. I searched and found that this functionality is available in Kendo UI. Is it possible to achieve this in MVC?
Dimitar
Telerik team
 answered on 29 Jul 2019
3 answers
6.3K+ views

I've got a grid with a client template and need to escape the conditional statement active, but I can't work out how to do it. 

I've tried

col.Bound(c => c.Active).ClientTemplate("\\# if (Active == true) {#<button class='btn btn-success'>\\#: Active\\#</button>#} \\#");
 
col.Bound(c => c.Active).ClientTemplate("# if (\\Active\\ == true) {#<button class='btn btn-success'>\\#: Active\\#</button>#} #");​​
 
col.Bound(c => c.Active).ClientTemplate("# if (\\#:Active\\# == true) {#<button class='btn btn-success'>\\#: Active\\#</button>#} #");

Template code:

 

 

<script type="text/x-kendo-tmpl" id="projectsGridClientTemplate">
    @(
 Html.Kendo().Grid<TeamProjectViewModel>().Name("projectGridDetail_#=Id#")
        .Columns(col =>
        {
            col.ForeignKey(c => c.TeamId, (SelectList)ViewBag.Teams);
            col.ForeignKey(c => c.ProjectId, (SelectList)ViewBag.Projects);
            col.Bound(c => c.Active).ClientTemplate("# if (Active == true) {#<button class='btn btn-success'>\\#: Active\\#</button>#}#");
             
        })
        .DataSource(ds => { ds.Ajax().Read(r => r.Action("GetTeamProjects", "ResourcePlannerApi", new { @projectId = "#=Id#" })); })
        .ToClientTemplate()
    )
</script>

Eyup
Telerik team
 answered on 29 Jul 2019
7 answers
593 views

I have a grid where I created a Custom button on it, alongside an Edit button.  I also have a wee bit of javascript that adds an icon to it.  When the grid first displays, the icon is there.  But when I click the Edit button (and after the edit popup closes), the custom icon is no longer there.  Any ideas?

 

Here is my grid code:

@(Html.Kendo().Grid<ClientWithAdminFee>()
    .Name("clientList")
    .AutoBind(false)
    .Resizable(r => r.Columns(true))
    .Columns(col =>
    {
        col.Bound(c => c.ClientId);
        col.Bound(c => c.ClientName).Width(900);
        col.Bound(c => c.Status);
        col.Bound(c => c.AdminFee).Title("Active Admin Fee").HtmlAttributes(new {style = "text-align:right; padding-right: 3px"}).Format("{0:n2} %");
        col.Bound(c => c.EffectiveFrom).HtmlAttributes(new {style = "text-align:right; padding-right: 3px"}).Format("{0:d}");
        col.Command(c => c.Edit());
        col.Command(c => c.Custom("History").Click("showHistory"));
    })
    .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("AdminFeeEdit").Window(w => w.Width(525)))
    .DataSource(ds => ds
        .Ajax()
        .Model(m =>
        {
            m.Id(d => d.ID);
            m.Field(d => d.ClientId);
            m.Field(d => d.ClientName);
            m.Field(d => d.Status);
            m.Field(d => d.AdminFee);
            m.Field(d => d.EffectiveFrom);
            m.Field(d => d.EffectiveTo);
        })
        .Filter(f => f.Add(a => a.Status).IsEqualTo("A"))
        .Read(r => r.Action("GetClientsForAgent", "MGABilling").Data("additionalData").Type(HttpVerbs.Get))
        .Update(u => u.Action("SaveAdminFee", "MGABilling"))
        .Events(e => e.RequestEnd("refreshGrid"))
    )
    .Events(e =>
    {
        e.DataBound("gridBound");
        e.Edit("centerWindow");
    })
    .ToolBar(tb => tb.Template(@<div style="float: right;"><label>Only Active Clients:</label><input type="checkbox" id="chkStatus" checked/></div>))
)

 

The javascript that adds the icon is part of the DataBound Event:

function gridBound(e) {
    var filter = this.dataSource.filter();
    this.thead.find(".k-header-column-menu.k-state-active").removeClass("k-state-active");
    if (filter) {
        var filteredMembers = {};
        setFilteredMembers(filter, filteredMembers);
        this.thead.find("th[data-field]").each(function () {
            var cell = $(this);
            var filtered = filteredMembers[cell.data("field")];
            if (filtered) {
                cell.find(".k-header-column-menu").addClass("k-state-active");
            }
        });
    }
 
    // adding icons to custom command buttons
    var span = "<span class='k-icon k-i-reorder'></span>";
    e.sender.tbody.find(".k-grid-History").prepend(span);
}

 

It's the bottom 2 lines that add the icon.

 

Manish
Top achievements
Rank 1
 answered on 25 Jul 2019
2 answers
415 views

User fill out some search criteria to populate an in-cell batch editable grid.  After making all of their changes they click a save button.  This triggers the grid update which in turn calls a controller that updates the data.  On request call the read action passing in the search criteria(to refresh the grid).

The update SQL updates the current task to complete, and if it meets certain criteria, inserts new child records.

What I am seeing in the database is that the same records are being updated many times.  That isn't great but what is worse is that new child records are being created.

What do I have wired incorrectly?  Is update being called multiple times?  Are records not getting their modified flag cleared?

Here is my view and controller.  They are stripped down but should have adequate info.

public class ViewPage1Controller : Controller
    {

        private readonly RmsContext2 _context;
        RmsContext2 context = new RmsContext2(null);
        FieldManagementContext contextFM = new FieldManagementContext(null);

        public ViewPage1Controller(RmsContext2 context)//IMediator mediator)
        {
            _context = context;
        }

        public ActionResult Search([DataSourceRequest] DataSourceRequest request, SearchCriteria criteria)
        {
            var param13 = new SqlParameter { ParameterName = "DateType", Value = criteria.DateType };
            var result = context.Database.SqlQuery<SearchResult>("PR_Review_Results @ToPortalId, @ProjectIds, @StoreId, @StatusId, @TypeId, @FromPortalId, @DistrictId, @DateFrom, @DateTo, @IncludeOutstanding, @ReportTag, @IncludeUnsubmit, @DateType",
                    param, param2, param3, param4, param5, param6, param7, param8, param9, param10, param11, param12, param13);
            return Json(result.ToList().ToDataSourceResult(request), "application/json", System.Text.Encoding.UTF8, JsonRequestBehavior.AllowGet);
        }

        public ActionResult Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<SearchResult> results, SearchCriteria criteria)
        {
            if (ModelState.IsValid)
            {
                //for each updated record
                //update image status, description and date
                //update task status and date
                //create any new tasks as children for rejected
                using (var db = new RmsContext2(null))
                {
                    foreach (var result in results)
                    {
                        db.Database.ExecuteSqlCommand("PR_Review_Update @PortalAccountId, @ActivityId, @ImageId, @ImageStatus, @Description, @Comment, @FollowUpDate, @FeedbackId, @TemplateId, @FollowUpActivityTypeId, @RefImageId, @IncludeMaster",
                            param, param2, param4, param5, param6, param7, param8, param3, param9, param10, param11, param12);

                    }
                }

            }
            return Json(results.ToDataSourceResult(request, ModelState));
        }
    }

 

@model IEnumerable<PortalApp.Areas.TaskManagement.Features.AdvPhotoReview.Index.SearchResult>
@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Deferred(true)
    .Events(events => events.DataBound("databound"))
    .Columns(columns =>
    {
        columns.Bound(p => p.SmallImage64)
            .ClientTemplate("<a href='../TaskManagement/AdvPhotoReview/Compare?imageId=#=ImageId#' target='blank'><img src='data:image/png;base64,#=SmallImage64#' onmouseover='showCompare(event)'  onmouseout='hideCompare(event)' /></a><br /><img src='../Images/SmallIcons/Flip.png' onclick='flipImage(event)' /><img src='../Images/SmallIcons/RotateLeft.png' onclick='rotateleftImage(event)' /><img src='../Images/SmallIcons/RotateRight.png' onclick='rotaterightImage(event)' />")
            .Title("Photo").Width(100).Filterable(false).Editable("imageEditable").Sortable(false).HtmlAttributes(new { style = "text-align: center;" });
        columns.Template(@<text></text>)
            .ClientTemplate(
                            "# var temp = AllComments; if (temp.length > 0) { #" +
                                "<img src='../Images/48X48/comments.png' onclick='showComments(event)' />" +
                            "# } else { #" +
                                "<img src='' />" +
                            "# } #"
            ).Title("Messages")
            .HeaderTemplate("").Width(70).HtmlAttributes(new { style = "text-align: center;" });
        columns.Template(@<text></text>)
            .ClientTemplate(@"<input name='name#=ActivityId#' type='radio' value='5' #= ImageStatusId==5 ? checked='checked':'' # /> Received
                    </br><input name='name#=ActivityId#' type='radio' value='2' #= ImageStatusId==2 ? checked='checked':'' # /> Reviewed - Release to Vendor
                    </br><input name='name#=ActivityId#' type='radio' value='1' #= ImageStatusId==1 ? checked='checked':'' # /> Reviewed - Do not release to Vendor
                    </br><input name='name#=ActivityId#' type='radio' value='3' #= ImageStatusId==3 ? checked='checked':'' # /> Rejected")
            .HeaderTemplate("Photo Status").Width(240).HeaderHtmlAttributes(new { style = "background-color:white;" }); ;
        columns.Bound(p => p.ActivityId).Title("ActivityId").Hidden();
        columns.Bound(p => p.ImageId).Title("ImageId").Hidden();
        columns.Bound(p => p.ActivityType).Title("ActivityType").Hidden();
        columns.Bound(p => p.ReportTag).Title("Report Tag").Width(100).Filterable(false);
        columns.Bound(p => p.Question).Title("Store Report Question").Width(200).Filterable(false);
        columns.Bound(p => p.Description).Title("Photo Description").Width(200).Filterable(false).HeaderHtmlAttributes(new { style = "background-color:white;" });
        columns.Bound(p => p.ReportComments).Title("Report Comments").Width(200).Filterable(false);
        columns.Bound(p => p.Answer).Title("Answer").Hidden();
        columns.Bound(p => p.SubmissionDate).Title("Submission Date").Format("{0:MM/dd/yyyy hh:mm tt}").Width(140).Filterable(false);
        columns.Bound(p => p.Confirmation).ClientTemplate("<a href='../Servicing/ViewServiceReport.aspx?Id=#=Confirmation#' target='_blank'>#=Confirmation#</a>").Title("Confirmation")
            .HeaderTemplate("Confirmation").Width(90).Filterable(false);
        columns.Bound(p => p.ProjectId).ClientTemplate("<a href='../Servicing/ViewProject.aspx?Id=#=ProjectId#' target='_blank'>#=ProjectNumber#</a>").Title("View Project")
            .HeaderTemplate("Project").Width(70).Filterable(false);
        columns.Bound(p => p.RmsDistrictId).Title("RmsDistrictId").Hidden();
        columns.Bound(p => p.StoreId).ClientTemplate("<a href='../Servicing/ViewStore.aspx?Id=#=StoreId#' target='_blank'>#=StoreDisplay#</a>").Title("View Store")
            .HeaderTemplate("Store").Width(70).Filterable(false);
        columns.Bound(p => p.ToPortalId).Title("ReviewerId").Hidden();
        columns.Bound(p => p.FromPortalId).ClientTemplate("<a href='../Servicing/ViewEmployee.aspx?Id=#=FromRecordId#' target='_blank'>#=FromDisplayName#</a>").Title("View Rep")
            .HeaderTemplate("Rep").Width(70).Filterable(false);
        columns.Bound(p => p.ColorBox).Title("ColorBox").Hidden();
        columns.Template(@<text></text>).ClientTemplate(GetActions().ToString()).HtmlAttributes(new { @class = "menuCell", @style = "width:95px;" }).Width(90);

        })
    .ToolBar(toolbar =>
    {
    toolbar.Template(@<text>
                <a href="javascript:void(0)" class="k-button k-primary k-button-icontext k-grid-save-changes" title="Save"><span class="k-icon k-i-check"></span>Save</a>
                <a href="javascript:void(0)" class="k-button k-button-icontext k-grid-cancel-changes" title="Cancel"><span class="k-icon k-i-cancel"></span>Cancel</a>
                <span style="float:right">
                    Default Photo Status:
                    @(Html.Kendo().ComboBox()
                    .Name("defaultStatus")
                    .BindTo(new List<string>() {
                        "",
                        "Reviewed - Release to Vendor"
                    })
                    .Events(events => events.Close("onDefaultSelect"))
                    .SelectedIndex(0)
                    .Suggest(true)
                    .AutoWidth(true)
                    .Deferred(true)
                .HtmlAttributes(new { @class = "k-content", style = "width:250px;" })
                    )
                </span></text>);
    })
    .HtmlAttributes(new { style = "height: 730px;" })
    .NoRecords()
    .Pageable(pageable => pageable
        .Input(true)
        .Numeric(false)
        .PageSizes(new List<object> { 5, 10, 20, 30, 40, 50 })
        )
    .Sortable()
    .Filterable()
    .Scrollable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Error("error_handler"))
        .Events(events =>
        {
            events.RequestEnd("onRequestEnd");
        })
        .Batch(true)
        .Model(model =>
        {
            model.Id(i => i.ActivityId); // Specify the property which is the unique identifier of the model.
            model.Field(i => i.ImageId).Editable(false);
            model.Field(i => i.Thumbnail).Editable(false);
            model.Field(i => i.Question).Editable(false);
            model.Field(i => i.Answer).Editable(false);
            model.Field(i => i.ActivityType).Editable(false);
            model.Field(i => i.SubmissionDate).Editable(false);
            model.Field(i => i.ProjectId).Editable(false);
            model.Field(i => i.ReportComments).Editable(false);
            model.Field(i => i.Confirmation).Editable(false);
            model.Field(i => i.RmsDistrictId).Editable(false);
            model.Field(i => i.StoreId).Editable(false);
            model.Field(i => i.FromPortalId).Editable(false);
            model.Field(i => i.ToPortalId).Editable(false);
            model.Field(i => i.ProjMgrPortalId).Editable(false);
            model.Field(i => i.FromRecordId).Editable(false);
            model.Field(i => i.SmallImage64);//.Editable(false);
            model.Field(i => i.ToDisplayName).Editable(false);
            model.Field(i => i.FromDisplayName).Editable(false);
            model.Field(i => i.ProjMgrDisplayName).Editable(false);
            model.Field(i => i.ReportTag).Editable(false);
        })
        .PageSize(20)
        .Sort(s =>
        {
            s.Add("ProjectId").Ascending();
            s.Add("SubmissionDate").Ascending();

        })
        .ServerOperation(false)
        .Update(update => update.Action("Update", "AdvPhotoReview").Data("additionalData"))
        .Read(read => read.Action("Search", "AdvPhotoReview"))
    )
    .Editable(editable => editable.Mode(GridEditMode.InCell))
)
@helper  GetActions()
{
    @(Html.Kendo()
        .Menu()
        .Name("HoverMenu_#=ActivityId#")
        //.Deferred(true)
        .Direction(MenuDirection.Right)
        .Orientation(MenuOrientation.Vertical)
        .Animation(false)
        .Items(
            items => items.Add().Text("Contact").HtmlAttributes(new { @class = "k-menu-actions" }).Items(
                innerItems =>
                {
                    innerItems.Add().Text("Rep").HtmlAttributes(new { onclick = "showContact(event)" });
                    innerItems.Add().Text("Account Manager").HtmlAttributes(new { onclick = "showUnsubmit(event)" });
                }
            )
        ).ToClientTemplate())
}

<script>
    function onRequestEnd(e) {
        if (e.type == "update") {
            var grid = $('#Grid').data('kendoGrid');
            var strProjects = getProjects();
            grid.dataSource.read({
                Store: $('#stores').data('kendoComboBox').value(),
                Type: $('#type').data('kendoComboBox').value(),
                Rep: $('#rep').data('kendoComboBox').value(),
                District: $('#district').data('kendoComboBox').value(),
                DateFrom: $('#datefrom').data('kendoDatePicker').value(),
                DateTo: $('#dateto').data('kendoDatePicker').value(),
                Project: strProjects,
                IncludeOutstanding: $('#includeoutstanding').is(':checked'),
                ReportTag: $('#reporttag').data('kendoComboBox').value(),
                IncludeUnsubmit: $('#includeunsubmit').is(':checked'),
                DateType: $('#datetype').data('kendoDropDownList').text()
            });
            var grid = $("#Grid").data("kendoGrid");
            if (grid.dataSource.page() > 1) {
                grid.dataSource.page(1);
            }
        }
    }
    function additionalData() {
        var strProjects = getProjects();
        return {
            Store: $('#stores').data('kendoComboBox').value(),
            Type: $('#type').data('kendoComboBox').value(),
            Rep: $('#rep').data('kendoComboBox').value(),
            District: $('#district').data('kendoComboBox').value(),
            DateFrom: $('#datefrom').data('kendoDatePicker').value(),
            DateTo: $('#dateto').data('kendoDatePicker').value(),
            Project: strProjects,
            IncludeOutstanding: $('#includeoutstanding').is(':checked'),
            ReportTag: $('#reporttag').data('kendoComboBox').value(),
            IncludeUnsubmit: $('#includeunsubmit').is(':checked'),
            DateType: $('#datetype').data('kendoDropDownList').text()
        };
    }
    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);
        }
    }
function onRejectClick(id) {
                var comment = document.getElementById("reject.usertext").value;
                var includeMaster = 0;
                var followupdate = document.getElementById("reject.duedate").value;
                var feedbackId = document.getElementById("reject.feedbackId").value;
                var templateId = document.getElementById("reject_template").value;
                var upload = $("#files").data("kendoUpload"), files = upload.getFiles();
                if (files === undefined || files.length == 0) {
                    var file = "";
                }
                else {
                    var file = files[0].name;
                }
                if (document.getElementById("reject.masterimage").checked) {
                    includeMaster = 1;
                }

                if (comment == "") {
                    document.getElementById('reject.message').innerHTML = "Comment is required";
                    document.getElementById('reject.messagediv').style.display = 'block';
                }
                else {
                    document.getElementById('reject.messagediv').style.display = 'none';
                    var grid = $("#Grid").data("kendoGrid");
                    var dataItem = grid.dataSource.get(id);
                    dataItem.set("Comment", comment);
                    dataItem.set("FollowUpDate", followupdate);
                    dataItem.set("FeedbackId", feedbackId);
                    dataItem.set("TemplateId", templateId);
                    dataItem.set("RefCompareFile", file);
                    dataItem.set("IncludeMaster", includeMaster);
                    var dialog = $("#Main").data("kendoWindow");
                    dialog.close();
                }
}
    </script>

Alex Hajigeorgieva
Telerik team
 answered on 24 Jul 2019
7 answers
1.1K+ views

Hi,

Is it possible to programmatically set a column's filter whose "multi" flag is set to true on grid load?

The code I have here:

1.$("#Grid").data("kendoGrid").dataSource.filter({
2.    field: "Person",
3.    operator: "eq",
4.    value: "Brian"
5.});

... doesn't seem to filter properly or show the checkbox for the selected filter.  It filters out everything and no checkboxes in the filter menu are selected.

Thanks!

Shishir
Top achievements
Rank 1
 answered on 23 Jul 2019
4 answers
730 views

Hello, in example https://dojo.telerik.com/ahepILiP, if field is nullable: true, then default value not used.

In version 2019.2.619 of kendo ui mvc wrappers for all srting values initialize "nullabe: true"

changes: Kendo.Mvc/UI/DataSource/ModelDescriptor.cs

+                    IsNullable = p.ModelType.Name == "String" ? true : p.IsNullableValueType

And all my default values for string fields is null, if remove this changes then work fine.

Alex Hajigeorgieva
Telerik team
 answered on 22 Jul 2019
6 answers
2.5K+ views

Hello,

I'm working on a project where I'm trying to use the Listbox. My end goal is to have the items in the 'selected' listbox passed to a POST controller.

Controller.cs

01.[HttpGet]
02. public ActionResult Create()
03. {
04.     List<SelectListItem> memberList = MemberRepository.ListAllMembers(request);
05.     ViewBag.memberList = memberList;
06. 
07.     return View("Create", new MemberSelection());
08. }
09. [HttpPost]
10. [ValidateAntiForgeryToken]
11. public ActionResult Create(MemberSelection m)
12. {
13.     if (ModelState.IsValid)
14.             MemberRepository.Create(request);
15.         else
16.             return View("Create",m);
17.     return RedirectToAction("Members");
18. }

 

Create.cshtml

001.@model MembersDomain.Entities.Member
002. 
003.@{
004.    ViewBag.Title = "Create";
005.    Layout = "~/Views/Shared/_Layout.cshtml";
006.}
007. 
008.@if (!Html.ViewData.ModelState.IsValid)
009.{
010.    <div class="alert alert-danger" id="validationSummary">
011.        @Html.ValidationSummary()
012.    </div>
013.}
014.<div class="row" style="margin-top: 25px;">
015.    <div class="col-lg-12">
016.        <h4>Select Members</h4>
017.    </div>
018.</div>
019.<div class="row" style="margin-top: 25px;">
020.    <div class="col-lg-12">
021.        <p>Use this form to add members to a group.</p>
022.    </div>
023.</div>
024.@using (Html.BeginForm("Create", "Members", FormMethod.Post, new { id = "create" }))
025.{
026.    @Html.AntiForgeryToken()
027.    @Html.ValidationSummary()
028. 
029.    <div class="row" style="margin-top: 25px;">
030.        <div class="col-lg-12">
031.            <strong>Selected Members:</strong>
032.        </div>
033.    </div>
034.    <div class="row" style="margin-top: 25px;">
035.        <div class="col-lg-12">
036.            <div id="example" role="application">
037.                <div class="demo-section k-content wide">
038.                    <label for="optional" id="allMembers">All Members</label>
039.                    <label for="selected">Selected</label>
040.                    <br />
041.                    @(Html.Kendo().ListBox()
042.            .Name("optional")
043.            .Toolbar(toolbar =>
044.            {
045.                toolbar.Position(Kendo.Mvc.UI.Fluent.ListBoxToolbarPosition.Right);
046.                toolbar.Tools(tools => tools
047.                    .TransferTo()
048.                    .TransferFrom()
049.                    .TransferAllTo()
050.                    .TransferAllFrom()
051.                );
052.            })
053.            .HtmlAttributes(new { title = "AllMembers" })
054.            .ConnectWith("selected")
055.            .BindTo(ViewBag.memberList)
056.                    )
057. 
058.                    @(Html.Kendo().ListBox()
059.            .Name("selected")
060.            .HtmlAttributes(new { title = "SelectedMembers" })
061.            .BindTo(new List<SelectListItem>())
062.            .Selectable(ListBoxSelectable.Multiple)
063.                    )
064.                </div>
065.            </div>
066.        </div>
067.    </div>
068.    <div class="row" style="margin-top: 25px;">
069.        <div class="col-lg-12">
070.            <p><a class="btn btn-primary btn-lg" href="#" onclick="document.getElementById('create').submit()">Submit</a></p>
071.        </div>
072.    </div>
073.}
074. 
075.<style>
076.    .demo-section label {
077.        margin-bottom: 5px;
078.        font-weight: bold;
079.        display: inline-block;
080.    }
081. 
082.    #allMembers {
083.        width: 270px;
084.    }
085. 
086.    #example .demo-section {
087.        max-width: none;
088.        width: 515px;
089.    }
090. 
091.    #example .k-listbox {
092.        width: 236px;
093.        height: 310px;
094.    }
095. 
096.        #example .k-listbox:first-of-type {
097.            width: 270px;
098.            margin-right: 1px;
099.        }
100.</style>
101. 
102.<script type="text/javascript">
103.    function sendAntiForgery() {
104.        return { "__RequestVerificationToken": $('input[name=__RequestVerificationToken]').val() }
105.    }
106.</script>

 

I am using Visual Studio 2015 and the project is ASP.NET MVC. Any insight is appreciated!

TJim
Top achievements
Rank 1
 answered on 19 Jul 2019
14 answers
756 views

I have a grid nested within a tab control, with quite a few initially hidden columns.

This looks fine, until some of the hidden columns are shown, when most of the grid expands along with a horizontal scrollbar being shown. However, the toolbar which has the Export To Excel button in it, remains the original width, giving a messy unprofessional look to the screen.

How can I get the toolbar to expand along with the rest of the grid?

I've attached two screenshots, and the Grid code is:-

<div class="panel-body" style="font-size:0.85em;">
 
       @(Html.Kendo().TabStrip()
       .Name("tab")
       .Items(t =>
       {
       t.Add().Text("Listing")
           .Selected(true)
           .Content(@<text>
 
 
               @(Html.Kendo().Grid<WLI_Payments.Models.View_Requests_Master>
   ()
   .Name("Grid")
 
   .Columns(col =>
   {
       col.Bound(o => o.RequestID).Title("Ref.");
       col.Bound(o => o.Directorate).Title("Directorate");
       col.Bound(o => o.RechargeToDirectorate).Title("Recharge Directorate").Hidden();
       col.Bound(o => o.RequestingUser).Title("Requester");
       col.Bound(o => o.Site).Title("Site").Hidden();
       col.Bound(o => o.Location).Title("Location").Hidden();
       col.Bound(o => o.CreationDate).Title("Requested").Format("{0:d}").Width(70);
       col.Bound(o => o.SessionDate).Title("Session").Format("{0:d}").Width(70);
       col.Bound(o => o.PlannedStart).Title("Start").Format("{0:t}").Hidden();
       col.Bound(o => o.PlannedEnd).Title("End").Format("{0:t}").Hidden();
       col.Bound(o => o.ReasonType).Title("Reason Type").Hidden();
       col.Bound(o => o.MedicName).Title("Req. Practitioner");
       col.Bound(o => o.SessionType).Title("Type");
       col.Bound(o => o.PointOfDelivery).Title("PoD");
       col.Bound(o => o.ForecastCost).Title("Forecast £").Format("{0:C}").Width(70);
       col.Bound(o => o.ActualCost).Title("Actual £").Format("{0:C}").Hidden().Width(70);
       col.Bound(o => o.PaymentAmount).Title("Payment").Format("{0:C}").Hidden();
       //col.Bound(o => o.ApprovalStatus).Title("Status");
       //col.Bound(o => o.PaymentStatus).Title("Pay Status");
       col.Bound(o => o.ActualMedicName).Title("Actual Practitioner").Hidden();
       col.Bound(o => o.ActualStart).Title("Start").Format("{0:t}").Hidden();
       col.Bound(o => o.ActualEnd).Title("End").Format("{0:t}").Hidden();
       col.Bound(o => o.RequestTypeDescription).Title("Pathway").Filterable(false).Sortable(false);
       col.Bound(o => o.PaymentBatchID).Title("Batch ID").Hidden();
       col.Bound(o => o.ApprovalStatusCode).Title("Status").ClientTemplate("<span title='#=TotalStatusText#' data-toggle='tooltip' data-placement='top' ><img alt='#=TotalStatusText#' src='" + Url.Content("~/Content/Images/") + "#=TotalStatusGlyph#'  /></span>").Sortable(false).Filterable(false).Width(40);
       //col.Bound(o => o.RequestID).Title("").ClientTemplate("<span style='#=showSubmit#'><button onclick='submitRequest(#=RequestID#);' class='btn btn-primary btn-sm'>Submit</button></span>");
 
       col.Bound(o => o.RequestID).Title("").ClientTemplate("<span style='#=QueryButton#'><button class='btn btn-warning btn-xs xssBtn' onclick='manageQuery(#=RequestID#);'><span class='glyphicon glyphicon-warning-sign' data-toggle='tooltip' data-placement='top' title='Manage query'></span></button></span><span style='margin-left:2px;'><button class='btn btn-info btn-xs xssBtn' data-toggle='tooltip' data-placement='top' title='View Form' onclick='qwikView(#=RequestID#);'><span class='glyphicon glyphicon-search'></span></button></span>").Sortable(false).Filterable(false).Width(60);
 
       col.Bound(o => o.Backdated).Title("").ClientTemplate("<button class='btn btn-info btn-xs xssBtn' data-toggle='tooltip' data-placement='top' title='Admin' onclick='admin(#=RequestID#);'><span class='glyphicon glyphicon-flash'></span></button>").Sortable(false).Filterable(false).Visible((bool)ViewBag.IsAdmin);
 
       col.Bound(o => o.RequestID).Title("").ClientTemplate("#=FinanceQueryButtonCode#").Sortable(false).Filterable(false).Visible((bool)ViewBag.ShowQueryButton);
 
   })
    .ClientDetailTemplateId("subdetailsTemplate")
    .Events(e => e.DataBound("onBound").DataBound("exportUpdate"))
    .ToolBar(toolBar =>
                toolBar.Custom()
                .Text("Export To Excel")
                .HtmlAttributes(new { id = "export" })
                 
                .Url(Url.Action("ExportData", "Enquiry", new { page = 1, pageSize = "~", filter = "~", sort = "~", directorateID = 0, tStatusCode = 0 }))
                )
       .DataSource(ds => ds
       .Ajax()
       .Model(m => m.Id(p => p.RequestID))
       .PageSize(15)
       .Read(rd => rd.Action("RD_Requests", "Enquiry").Data("gridFilter")
       )
       )
 
       .Pageable(p => p.Refresh(true))
       .Sortable()
 
       .Filterable()
       .ColumnMenu()
               )
 
 
 
 
 
 
 
 
           </text>);

 

Thanks

AP
Top achievements
Rank 1
Iron
Iron
Veteran
 answered on 18 Jul 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Will
Top achievements
Rank 2
Iron
Motti
Top achievements
Rank 1
Iron
Hester
Top achievements
Rank 1
Iron
Bob
Top achievements
Rank 3
Iron
Iron
Veteran
Thomas
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?