Telerik Forums
UI for ASP.NET MVC Forum
1 answer
407 views

Hi, i've a treelist with custom command, 

and i'm trying to change the button template with the databound event like the Grid

the visual result it's ok, but the event click doesn't fire, probably because i remove the k-button class.

but if leave the class the button doesn't template.

columns.Add().Command(command =>
                 {
                     command.Custom().ClassName("k-grid-EditCustom").Text(" ").Name("EditCustom").Click("editGroup");
                     command.Custom().ClassName("k-grid-DeleteCustom").Text(" ").Name("DeleteCustom").Click("deleteGroup");
 
                 }).Width(150);
 
function treeGridGroup_DataBound(e) {
     e.sender.tbody.find(".k-grid-EditCustom").removeClass("k-button")
     e.sender.tbody.find(".k-grid-EditCustom").addClass("btn btn-warning btn-outline fa fa-pencil");
 
     e.sender.tbody.find(".k-grid-DeleteCustom").removeClass("k-button")
     e.sender.tbody.find(".k-grid-DeleteCustom").addClass("btn btn-danger btn-outline fa fa-trash-o m-l-5");
 }
Kostadin
Telerik team
 answered on 05 Dec 2016
2 answers
852 views

I'm working on a Kendo UI Grid using ASP.NET MVC. We're having an issue with the grid sticking on a specific page. If the user makes their selections and the grid brings back ten pages, it displays fine. However, if the user makes navigates to page 10 and then makes another selection that only brings back 5 pages, the grid is blank, but the correct page numbers display. If the user clicks on one of the page numbers, the data displays correctly.
Here's my grid:

@(Html.Kendo().Grid<SMT.Models.SpecimenDetail>()
        .Name("SpecimenDetailGrid")
        .Columns(columns =>
        {
            columns.Bound(e => e.uniqueID).Hidden();
            columns.Bound(e => e.SampleID).Width(180).Title("Specimen ID").ClientTemplate("#= fileLinks(data) #");
            columns.Bound(e => e.contactId).Hidden();
            columns.Bound(e => e.contact_business_email).Width(120).Title("Owner Email");
            columns.Bound(e => e.contact_business_phone).Width(120).Title("Owner Phone");
        })
        .ToolBar(tools =>
                {
                    tools.Excel();
                    tools.Custom().Text("Back to Specimen Summary").HtmlAttributes(new { id = "goBack", style = "margin-left: 880px;" });
                })
        .Excel(excel => excel
            .AllPages(true)
            .FileName("SpecimenDetailGridData.xlsx")
            .Filterable(true)
            .ProxyURL(Url.Action("Excel_Export_Save", "Home"))
            )
        .Resizable(x => x.Columns(true))
        .Reorderable(x => x.Columns(true))
        .Scrollable()
        .Sortable()
        .HtmlAttributes(new { style = "height:500px;" })
        .Pageable()
        .Filterable()
        .AutoBind(false)
        .Editable(e => e.Mode(GridEditMode.InLine))
        .DataSource(datasource => datasource
            .Ajax()
                    .Model(model => {
                        model.Id(p => p.uniqueID);
                        model.Field(p => p.SampleID).Editable(false);
                        model.Field(p => p.company_business_name).Editable(false);
 
                        // disable company name on edit
                        // model.Field(p => p.company_business_name).Editable(false);
                    })
            .Read(read => read.Action("GetSpecimenDetail", "Home").Data("FillSearchParms"))
            .Update(update => update.Action("UpdateSpecimen", "Home").Data("FillUpdateParms"))
            .Destroy(destroy => destroy.Action("DeleteSpecimen", "Home"))
            .PageSize(10)
            .Events(e => { e.RequestEnd("onRequestEnd");})
            )
    )

 

Here's the call that fires off the search:

    $(document).ready(function () {
 
    $("#divSearchSpecimenDetail").attr("style", "display: none;");
 
    $("#SearchBtn").click(function (e) {
        e.preventDefault();
 
       //debugger;
        var selectedSpecimen = $('#SpecimenCategory').data("kendoDropDownList").text();
        if (selectedSpecimen == "-- Select --") {
            alert("Please select Specimen Category");
            return;
        }
 
        var selectedUnits = $('#Units').data("kendoDropDownList").text();
        if (selectedUnits == "") {
            alert("Please select Units");
            return;
        }
 
        var units = defaultDDObj("Units");
        var specimenCat = defaultDD("SpecimenCategory");
 
        $("#divSearchSpecimenDetail").attr("style", "display: block;");
       //debugger;
        var grid = $("#SpecimenDetailGrid").data("kendoGrid");
        grid.dataSource.read();
        grid.refresh();
        grid.pager.refresh();
 
        e.preventDefault();
 
        hideColumns(specimenCat);
 
        $("#searchbar").data("kendoPanelBar").collapse($("li.k-state-active"));
    })
});

Really stuck here, thanks in advance
Nathan
Top achievements
Rank 1
 answered on 05 Dec 2016
2 answers
1.0K+ views

I have a Kendo Grid that uses Ajax. I want one of my columns to be unbound and to also use a client template. One hack is to do this:

 

columns.Template(@<text>Unused</text>).Title("SomeTitle").ClientTemplate("#=myTemplateFunction(data)#");

 

However, it is definitely a hack. Is there a better way to accomplish using a client template and have an unbound column?

Bo Chulindra
Top achievements
Rank 1
 answered on 02 Dec 2016
3 answers
1.3K+ views

My aim is to delete the row when the Command Destroy column is clicked if the built in Confirmation popup if confirmed.

Want: Click Destroy Column > Confirm OK > ActionReult Triggered

Cannot use auto-sync since aiming at keeping other updates and inserts still require the save to be clicked to commit.

 

Currently the code will remove the row from the display when it is clicked as is built in.

And only after the save button for the grid is clicked does it trigger the ActionResult "OfficerDestroy" for doing so.

 

Seems there should be some event in this process that could trigger the ActionResult.

What are the options here for triggering that ActionResult while having a confirmation?

 

@(Html.Kendo().Grid<NexusPWI.ViewModels.Wizard.gridData>()
    .Name("OfficerGrid")
    .Columns(c => {
        c.Bound(vm => vm.GridId); //Can display for testing purposes
        c.Bound(vm => vm.FirstName).Width(50);
        c.Bound(vm => vm.LastName).Width(50);
        c.Bound(vm => vm.Title).Width(50);
        c.Command(command => { command.Destroy(); }).Width(30);
    })
    .Editable(editable => editable.Mode(GridEditMode.InCell))
    .Navigatable()
    .Pageable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Events(events => events.Error("officerGrid_error") // Handle the "error" event
            .RequestEnd("officerGrid_RequestEnd") // Handle the "RequestEnd" event
            .Change("officerGrid_Delete")
            )
        .Model(model => model.Id(vm => vm.GridId))
        .PageSize(1000)
        .Create("OfficerCreate", "Wizard")
        .Read("OfficerRead", "Wizard")
        .Update("OfficerUpdate", "Wizard")
        .Destroy("OfficerDestroy", "Wizard")//.AutoSync(true)
))

<script>

function officerGrid_RequestEnd(e) {
        if (e.type == "update" || e.type == "create") {
            this.read();
        }
    }
</script>


public ActionResult OfficerDestroy([DataSourceRequest] DataSourceRequest request, IEnumerable<gridData> models)
{//This code works fine
}

Pavlina
Telerik team
 answered on 02 Dec 2016
4 answers
306 views

hi, im using asp.net 5 with MVC 6 and i have 2 problem using GridEditMode.PopUp

----------------------------------------------------- view ----------------------------------------------------------------------------

 @(Html.Kendo().Grid<Organization>()  .Name("grid")

.Columns(columns =>             {                

 columns.Bound(p => p.Name).Title("Name");

columns.Bound(p => p.Email).Title("Email");

 columns.Bound(p => p.Disabled).Title("Disabled").Width(120);                         columns.Command(command => { command.Edit(); command.Destroy(); }).Width(150);             })

.HtmlAttributes(new { style = "height: 550px;" })             

.ToolBar(toolbar => toolbar.Create().Text("Add"))             

.Editable(editable =>{ editable.Mode(GridEditMode.PopUp); editable.TemplateName("Edit"); })             

.Pageable( pageable => pageable .Input(false) .Numeric(false) ) .Filterable().Sortable().Scrollable()          .Events(events => events.Edit("insertPopupCaption"))             

.DataSource(dataSource => dataSource.Ajax().PageSize(11).Events(events => events.Error("grid_error"))

.Model(model =>  {                        

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

model.Field(p => p.Name).Editable(false);

model.Field(p => p.Email).Editable(true);                         

model.Field(p => p.Disabled); })

.Create(update => update.Action("Create", "Organization"))

.Read(read => read.Action("GetAll", "Organization"))                

 .Update(update => update.Action("Update", "Organization"))                 

.Destroy(update => update.Action("Delete", "Organization"))     )             )

-----------------------------------------------------------------------------------------------------------------------------------

Problems:

 1- As you can see im using editable.TemplateName("Edit") but this template is never found in the path "/view/Organization/EditorTemplates/Edit.cshtml" the only way to make it works is using the template in the path  "/view/Shared/EditorTemplates/Edit.cshtml" (i have seen projects with mvc5 and this problem never happens)

 

2- if i try to remove the tag editable.TemplateName("Edit");  tring to use the template by default, this template seems to dont have in account the model because  the field NAME "model.Field(p => p.Name).Editable(false);" is set to as not edittable BUT IN THE POPUP IT CAN BE EDITTABLE...

 

 Thanks for your help...

 

 

Lo
Top achievements
Rank 1
 answered on 02 Dec 2016
2 answers
115 views

I'm following this example to export my grid to PDF: http://demos.telerik.com/aspnet-mvc/grid/pdf-export

In the pdf configuration, I'd need to use both pdf.TemplateId and pdf.RepeatHeaders, but when try to use them in my grid I get the following error: "Cannot resolve symbol TemplateId", and same with RepeatHeaders. I've attached and image showing this behaviour.
I'd like to know how to use those configurations properly.

Thanks in advance

Matias
Top achievements
Rank 1
 answered on 01 Dec 2016
2 answers
422 views

I've got a grid using the InCell edit mode with a custom editor template, and I'm trying to select all the text when the user clicks the cell to edit.  I've seen (and tried) several suggestions in other forums, but they simply don't work for me.  Currently, I'm down to this, which doesn't work but seems like it should:

Editor template:

@model decimal?
 
@(Html.Kendo().NumericTextBoxFor(m => m)
      .Decimals(2)
      .RestrictDecimals(true)
      .Spinners(false)
      .HtmlAttributes(new { style = "width:100%" })
)

 

In the client-side edit handler:

e.container.find('input').each(function () {
  var editor = this;
  setTimeout(function () { editor.select(); });
});

 

The reason I'm using .each is that there seems to be two input elements in the edit container.  I've tried .select on each of them individually, to no avail.

Any thoughts on this?

Chris T.
Top achievements
Rank 1
 answered on 01 Dec 2016
2 answers
247 views

Hello,

I'm trying to install Asp .NET MVC extensions in Visual Studio Professional 2013 via NuGet. NuGet keeps asking for the password even though I am sure it is correct. I have tried resetting the password twice without effect.

In package.json there is:

    <package id="Telerik.UI.for.AspNet.Mvc5" version="2016.3.1118" targetFramework="net452" />

 

Paul
Top achievements
Rank 1
 answered on 01 Dec 2016
6 answers
198 views

I am instantiating a custom command inside a grid.
If a certain condition is met, the command button (.k-grid-AddNewThing) is appended with the ("k-state-disabled") style class to disable the button.
This works great on load when wired up to the .DataBound event.

However, when the Edit button is clicked and subsequently the Cancel button is clicked, the ("k-state-disabled") style class is removed and reverted to the default.

I have tried to wire up the .Cancel event to re-apply the ("k-state-disabled") style class, but it seems that the .Cancel event is ansyncly firing the default action along with my custom function. 

There are two paths that i figure.

1. Client Template w/Conditional: this would be favorable, since i can remove the javascript function completely.
2. Somehow implement a callback/promise in the default .Cancel event.

I don't know if any of these are possible though.

Any ideas?

 

Grid Helper Event Method

.Events(e => { e.DataBound("disableCustomCommand"); e.Cancel("disableCustomCommand"); })

 

JS function:

    function disableCustomCommand(e) {
        var grid = this;
        grid.tbody.find("tr[role='row']").each(function () {
            var model = grid.dataItem(this);
            if (model.isVerified == true) {
                $(this).find(".k-grid-AddNewThing").addClass("k-state-disabled").text("NewThing Exists");
            }
        });
    }
//This works perfectly on the .DataBound event, but does not process properly when called by the .Cancel event and reverts to default style class, giving the impression that the .find() method did not find the element or the .addClass() method did not apply the style.

 

 

Chris
Top achievements
Rank 1
 answered on 30 Nov 2016
7 answers
1.5K+ views

Hi, 

I am attempting to set the initial value of an input control inside the Popup editor by using a hierarchical grid's Edit event. The popup displays correctly, but the MVVM binding is not updating the model. This is the case for any of the input controls i try to set the value of. However, if i manually (non-programmatically) change the input value, the model is successfully updated. I have also tried to use the .data("").trigger("change") method to fire off the change event of the input control to no avail. I have tried setting the value on several other controls (not just a dropdownlist) and the result is the same-the display text is shown correctly but the value is not updated in the model. Any ideas on how to update the model?

Below is the Grid Helper, Javascript function, and Editor Template. Attached is a screenshot of the form data; notice how CourseID is set to 0 (CourseID is non-nullable).

 

MVC Grid Helper: 

<script id="childTemplate" type="text/kendo-tmpl">
        @(Html.Kendo().TabStrip()
                    .Name("tabStrip_#=CourseID#")
                    .SelectedIndex(0)
                    .Animation(a => a.Open(o => o.Fade(FadeDirection.In)))
                    .Items(i =>
                    {
                        i.Add().Text("Classes").Content(@<text>
                            @(Html.Kendo().Grid<LMS_Web_MVC.Models.ClassFull>()
                            .Name("grid_#=CourseID#")
                            .ToolBar(t => t.Create().Text("Add Class"))
                            .Columns(columns =>
                            {
                                columns.Bound(o => o.ClassID);
                                columns.Bound(o => o.BeginDate).Format("{0:yyyy-MM-dd HH:mm}");
                                columns.Bound(o => o.EndDate).Format("{0:yyyy-MM-dd HH:mm}");
                                columns.Bound(o => o.Enrollees);
                                columns.Bound(o => o.Active);
                                columns.Command(c => { c.Edit(); }).Title("Actions");

                            })
                            .Editable(e => e.Mode(GridEditMode.PopUp).Window(w => w.Width(600)).TemplateName("ClassEditor"))
                            .DataSource(dataSource => dataSource
                                .Ajax()
                                .PageSize(10)
                                .Read(read => read.Action("Get_ClassesByCourse", "Class", new { courseID = "#=CourseID#" }))
                                .Update(u => u.Action("SaveClass", "Class"))
                                .Create(c => c.Action("SaveClass", "Class"))
                                .Model(m => { m.Id(c => c.ClassID); m.Field(c => c.Active).DefaultValue(true);
                                })
                            )
                            .Events(ev => ev.Edit("onEdit"))
                            .Pageable()
                            .Sortable()
                            .ToClientTemplate())
                        </text>);
                    }
        ).ToClientTemplate())
</script>

 

Javascript Function

<script>

    function onEdit(e) {
        if (e.model.ClassID == null) {
            var courseGrid = $("#grid").data("kendoGrid");
            var parentRow = courseGrid.dataItem(this.wrapper.closest("tr").prev());
            var id = parentRow.CourseID;
            $("#CourseID").data("kendoDropDownList").value(id);
            $("#CourseID").data("kendoDropDownList").trigger("change");
        }

</script>

 

Editor Template

@model LMS_Web_MVC.Models.ClassFull

<div data-container-for="CourseID" class="k-edit-field">
    @Html.Kendo().DropDownListFor(model => model.CourseID).OptionLabel("Choose Course").Filter(FilterType.Contains).HtmlAttributes(new { style = "width:400px" }).DataTextField("CourseTitle").DataValueField("CourseID").ValuePrimitive(true).DataSource(ds => {
    ds.Custom()
    .ServerFiltering(true)
    .ServerPaging(true)
    .PageSize(100)
    .Type("aspnetmvc-ajax")
    .Transport(t =>
    {
        t.Read("Get_SimpleCourseList", "Course", new { filterActive = false });
    })
    .Schema(s =>
    {
        s.Data("Data").Total("Total");
    });
}).Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
</div> 

 

Chris
Top achievements
Rank 1
 answered on 30 Nov 2016
Narrow your results
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
Dialog
MultiColumnComboBox
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
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?