Telerik Forums
UI for ASP.NET MVC Forum
8 answers
117 views

Hi,

I have 2 Kendo Grids in which 2nd grid is read based on the selection of row of 1st grid. The code is:

1st grid

        <% Html.Kendo().Grid<EvaluationsQuestionsEvaluationVersionGridViewModel>(Model.VersionsGridModel)
            .Name("Versions")
           .DataSource(dataSource => dataSource
                    .Ajax()
                    .Model(model => model.Id(a => a.EvaluationVersionId))
                    .ServerOperation(true)
                    .Create(create => create.Action("InsertEvaluationVersion", "Evaluations"))
                    .Read(read => read.Action("LoadEvaluationsQuestionsEvaluationVersionGridAjax", "Evaluations"))
                    .Update(update => update.Action("UpdateEvaluationVersion", "Evaluations").Data("onUpdateEvaluationVersion"))
                )
            .Events(e => e.Change("onVersionGridRowSelect")
                          .Edit("onEditEvaluationsVersion")
                          .Save("onSaveEvaluationsVersion")
                    )​

.....

2nd grid

        <% Html.Kendo().Grid<EvaluationsQuestionsEvaluationPillarsGridViewModel>()
            .Name("Pillars")
            .DataSource(dataSource => dataSource
                  .Ajax()
                  .Model(model => model.Id(a => a.EvaluationMasterPillarId))
                  .ServerOperation(true)
                  .Read(read => read.Action("LoadEvaluationsQuestionsEvaluationPillarsGridAjax", "Evaluations")
                                    .Data("onLoadEvaluationsQuestionsEvaluationPillarsGridData"))
             )​

......

        function onVersionGridRowSelect(e) {
            var grid = $("#Versions").data("kendoGrid");
            var currentRow = grid.dataItem(grid.select());
            var evaluationVersionId = currentRow.EvaluationVersionId;

            $('#evaluationVersionId').val(evaluationVersionId);
            $("#Pillars").data("kendoDropDownList").dataSource.read();
        }

        function onLoadEvaluationsQuestionsEvaluationPillarsGridData(e) {
            var evaluationVersionId = $('#evaluationVersionId').val();  // "evaluationVersionId" is set beforehand
            var showDeletedCheckbox = $('#Checkbox1').val();

            return { evaluationVersionId: evaluationVersionId, showDeleted: showDeletedCheckbox }
        }

But 2nd grid can not be read because Data function "onLoadEvaluationsQuestionsEvaluationPillarsGridData" is not called. So what is the problem in code?​ Thanks.

york
Top achievements
Rank 1
 answered on 16 Nov 2015
4 answers
1.4K+ views
Hi,
If I have grouped my kendogrid by multiple columns, Can I hide the header for the first column and display only the second header? Right now, after grouping by two columns, we have two headers. I can get the details of the first groupby and display in the headertemplate of the second grouping.. So, want to do away with the header created by the first grouping.
As shown in the screenshot, I want to retain the header encircled in GREEN and do away with the one in red. I would still want the grouping but just don't want the header.
Will
Top achievements
Rank 1
 answered on 16 Nov 2015
4 answers
84 views

Hello to all.

I'd like to validate a field, for example the standard Title field in an Calendar Event.

The validation works well in the BASIC example:

http://demos.telerik.com/aspnet-mvc/scheduler/index

I added the [Required] attribute on the Model.

Anyway in my code, the generated HTML code doesn't have the "required" attribute end not any validation is performed.

Someone can help me please?

 

Vladimir Iliev
Telerik team
 answered on 16 Nov 2015
3 answers
401 views

I have a chart which has too many values to fit comfortably on the screen all at once.

 I have made it pannable and zoomable as per the demo example.  This works, but the chart initially still opens with all the columns squashed onto the screen.

How can I set a fixed zoom level (which the user can't change) to enable panning of the chart?

Also, will a scrollbar or other visual indicator that a chart can be panned be added soon? Currently it's not very user friendly, and requires an application to find a way to tell users how to scroll the chart. Alternatively, can panning be activated by JavaScript, so some left / right buttons can be added?

The chart code is:-

@(Html.Kendo().Chart<Dashboard.Models.BarChartDataItem>(Model)
            .Name((string)ViewBag.ChartName)
             .Title((string)ViewBag.ChartTitle)
             .Theme("bootstrap")
            //.RenderAs(RenderingMode.Canvas)              
 
            .Legend(legend => legend
                .Position(ChartLegendPosition.Top)
                .Visible(false)
            )
     
            .Series(series =>
            {
                series.Column(model => model.BarValue).Name("Actual").Labels(l=>l.Template("#=dataItem.ExtraValue#").Visible(true));
            })
            .ChartArea(area => area
                .Height(350)
                .Background("transparent")
                )
            .CategoryAxis(axis => axis
 
 
                .Categories(model => model.AxisValue)
                .Labels(labels => labels.Rotation(-90))
                .MajorGridLines(lines => lines.Visible(false))
                 .Title((string)ViewBag.Xaxis)
 
            )
            .Pannable(p=>p.Lock(ChartAxisLock.Y))
             .Zoomable(zoomable => zoomable
            .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
            .Selection(selection => selection.Lock(ChartAxisLock.Y))
        )
 
            .ValueAxis(axis => axis.Numeric()
                .Labels(labels => labels.Format("{0:N2}"))
                .Title((string)ViewBag.Yaxis)
 
 
                .Line(line => line.Visible(false))
            )
            .Events(e=>e.SeriesClick("seriesClick"))
 
            .Tooltip(tooltip => tooltip
                .Visible(true)
 
                .Format("{0:N2}")
            )
 
)

Thanks

 

Daniel
Telerik team
 answered on 16 Nov 2015
5 answers
781 views

Hi.

 

I would like to open multiple popup windows from ActionLinks within a grid.

The column template for the single-column grid is such...

        string Template =
            "<tr>" +
                "<td>" +
                    "<div class='ResultListing'>" +
                        "<div class='Technical'>" +
                            Ajax.ActionLink("#:CompanyName#, #:MfgModelNumber#", "GetDetails", "Services", new { ComponentID = "#:ComponentID#" },

                                       new AjaxOptions() { HttpMethod = "POST" }, new { @class = "ResultsTitle" }) + "<br />" +

                            "<span>MPN: #:MfgPartNumber#</span><br/>" +
                            "<span>Key: #:ConfigurationKey#</span><br/>" +
                        "</div>" +
                        "<div class='Space'>" +
                        "</div>" +
                        "<div class='Technical'>" +
                            "<span>Description: #:DesignDescription#, #:CategoryDescription# </span><br/>" +
                            "<span>Elastomers: #:(Elastomers == '0') ? 'N/A' : Elastomers#; Materials: #:(Materials == '0') ? 'N/A' : Materials#</span><br/>" +
                            "<span>Sizes: #:(Sizes == '0') ? 'N/A' : Sizes#; </span><br/>" +
                            "<span>Configuration: #:Configurations# </span><br/>" +
                            "<span>Leyla ID: #:ComponentID# (#:ComponentStatus#)</span>" +
                        "</div>" +
                        "<div id='PictureDiv' class='ControlAndLabel AlignCenter'>" +
                            "# if (URL.length > 0) { #" +
                                "<img src='#:URL#' class='ComponentImg'/><br/>" +
                                "<span>#:ImageDescription#</span>" +
                            "# } else { #" +
                                "&nbsp;" +
                            "# } #" +
                        "</div>" +
                    "</div>" +
                "</td>" +
            "</tr>"
            ;

​The Ajax.ActionLink should be able to open a new popupwindow based on the ID contained in the grid for that row.  The controller will return a partial view to the popup window...

 

        [HttpPost]
        public PartialViewResult ​GetDetails(int ComponentID)
        {

            PartialViewResult Result = PartialView("_ComponentDetailView", ComponentID);

            return (Result);
        }

The popup windows are not modal, so that multiple ​popups can be opened at the same time.  The user can click multiple links from the grid, popping up multiple detail windows at the same time.

 

The detail popups should fetch data from a database only when activated.

I am rather new to MVC and to the Kendo tools.  At this point, I am not even sure this is the best way to do it.  I am hoping a new Kendo Window can be instantiated ​by clicking the Action link in the grid and populated by somehow passing in the id of the object whose details the user wants to see.

Any help would be appreciated.

Daniel
Telerik team
 answered on 16 Nov 2015
1 answer
706 views

Hi,

 I have a Grid with client detail template. The grid  has only one column to display and the client detail template is given below

 <script id="client-template" type="x-kendo-template">

    <div onclick="OnDivClick" class="row">
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>First Name</label>
                <p>#: FirstName #</p>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Last Name</label>
                <p>#: LastName #</p>
            </div>
        </div>
        <div class="col-lg-1 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Inhouse</label>
                <p>#: Inhouse #</p>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Company Name</label>
                <p>#: CompnayName #</p>
            </div>
        </div>
        <div class="col-lg-1 col-md-3 col-sm-12">
            <div class="form-group">
                <label>SAN</label>
                <p>#: StateAccountNumber #</p>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Location Number</label>
                <p>#: LocationNumber #</p>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Last Activity Date</label>
                <p>#: LastActivityDate #</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>First Name from Payroll</label>
                <p>#: ClaimentFirstName #</p>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Last Name from Payroll</label>
                <p>#: ClaimentLastName #</p>
            </div>
        </div>
        <div class="col-lg-8 col-sm-12 col-md-6">
            <button class="btn btn-success col-lg-offset-11 col-md-offset-9">Select</button>
        </div>       
    </div>

</script>

 

I need to select both row and client detail template of the row when we click in the client detail template area or click the button inside the client detail template.

For this I have used the onclick event of the div. But it is not working.

Also I need to get the row data when we click in the client detail template area or click the button inside the client detail template.

Can any one provide the solution for this .

Radoslav
Telerik team
 answered on 16 Nov 2015
2 answers
252 views

Hello,

I have hierarchical data in DB implemented as closure table. Imagine hundreds of nodes with parent-child relationship. Now I would like to display data, edit nodes, create new nodes, change hierarchy with drag&drop, filter nodes (show only nodes which starts with given word).

TreeList has this CRUD operations ready for use, but I was not able to detect drag&drop event for persisting the change in DB. Yes, its possible to add the button for "save", but I would like to do the change automatically.

So I tried TreeView. TreeView with popup-menu for adding root node, child node, etc. But I have problem with "editing". When I use demo for edit node in separate form, loading child's node stops working.

So, I would like to ask for hint or complex example of CRUD operations in TreeView or maybe to say me, that TreeView is not intended for this operations :)

Thank you

 

Radoslav
Top achievements
Rank 1
 answered on 13 Nov 2015
4 answers
553 views

I am using Kendo MVC Treeview.

How can I change font for all parents that has child nodes.

Thank You.

Arun
Top achievements
Rank 1
 answered on 13 Nov 2015
1 answer
100 views
We need to reference to #JustNum, but we don’t find anyway to do it.

@using SGIRO2014.Models;
@model object
 
<script type="text/javascript">
    function ChangeDocType(e) {
        $("#JustNum").prop("disabled", (this.value() == @((short)documentType.FI)));
    }
</script>
 
@(Html.Kendo().DropDownListFor(m => m)
    .HtmlAttributes(new { style = "width:100px" })
    .ValuePrimitive(true)
    .OptionLabel("-please select-")
    .BindTo((SelectList)ViewData[ViewData.TemplateInfo.GetFullHtmlFieldName("") + "_Data"])
    .Events(e => e.Change("ChangeDocType"))      
)
  
@Html.Kendo().TextBoxFor(m => m).Name("DocNum").HtmlAttributes(new { style = "width:100px" })
  
@Html.Kendo().TextBoxFor(m => m).Name("JustNum").HtmlAttributes(new { style = "width:40px", maxlength = "2" })

 

 

Thanks in advance

 

 

Xavier de la Rubia.

Boyan Dimitrov
Telerik team
 answered on 13 Nov 2015
1 answer
308 views

I want to create a view with a layout similar to Outlook or the Team Efficiency page of the Telerik Northwind Dashboard sample app.  There will be a ListView of names on the left.  When you click on a name, more information about the person will appear in a side panel to the right.  So far, so good.  On phones and other ​small screens, I need this ​view to function as Outlook does on those devices.  Only the ListView should be visible until you click on a name, ​at which time the side panel will be displayed and the ListView will no longer be visible. That's where I need some help.

What's the best way to go about this using Telerik controls? I am using Bootstrap to control the layout, but this is a little different since it is not based just on the size of the screen.

Thanks,

Joel

Georgi Krustev
Telerik team
 answered on 13 Nov 2015
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?