Telerik Forums
UI for ASP.NET MVC Forum
3 answers
1.3K+ views

I have two checkboxes in a Kendo MVC Grid row and need some understanding as to how to set the dataitem property when they are clicked.  I have been successful when there is one checkbox per row doing the following:

columns.Bound(p => p.bDelete).ClientTemplate("<input type='checkbox' name='bDelete' Id='bDelete' #= bDelete ? checked='checked': '' # class='chkbx'/>")
                         .Width(70).HtmlAttributes(new { style = "text-align: center", title = "Delete Selected" });

<script>
    // Any rows that get checked or unchecked after the form is loaded need
    // to pass though this event to get the underlying record reconciled
    $(function () {
 
 
        $('#Grid')
            .on('click',
                '.chkbx',
                function (e) {
                    debugger;
 
                    var checked = $(this).is(':checked');
                    var grid = $('#Grid').data().kendoGrid;
                    var dataItem = grid.dataItem($(this).closest('tr'));
                    // if we are in insert mode do not let the user check    the                delete checkbox
                    if (dataItem.iProjectSequence == 0) {
                        e.preventDefault();
                        dataItem.set('bDelete', false);                    return;
                    }
 
                    dataItem.set('bDelete', checked);
                    dataItem.set('bModified', true);
                    dataItem.set('dirty', true);
                    SetRowsModifiedState();
                    SetPageMessage("Data Modified");
                    $("#New").prop("disabled", true);
                    $("#Cancel").prop("disabled", false);
                });
    })
</script>

 

The code above works for a row that has only one checkbox in it.  How do I detect the underlying model value attached to the checkbox being clicked so that I can set *ONLY* that field?

 

Thanks

 

 

 

 

 

 

Konstantin Dikov
Telerik team
 answered on 13 Jun 2016
7 answers
775 views

I have the following in a template <script type="text/x-kendo-tmpl" id="documentDetailsTemplate"></script>

@(Html.Kendo().MultiSelect()
                .Name("otherParties")
                .DataSource(ds =>
                {
                    ds.Read("GetOtherParties", "Term", new { SPHostUrl = ViewBag.SPHostUrl });
                })
                .DataValueField("TermId")
                .DataTextField("Label")
                .AutoBind(false)
                .HtmlAttributes(new { style = "width:100%" })
                .Placeholder("Select Other Parties...")
                .ItemTemplate("<div class=\"k-state-default term-label\">\\#= data.Label \\#</div><div class=\"k-state-default term-path\">\\#= data.Path \\#</div>")
                .Value("#: OtherParties #")
                .MinLength(3)
                .Filter(FilterType.Contains)
                  .ToClientTemplate())

The OtherParties property is a List of classes as detailed in the code snippet below.

public class TermItem
    {
        public Guid TermId { get; set; }
        public string Label { get; set; }
 
        public string Path { get; set; }
 
    }
 
public List<TermItem> OtherParties { get; set; }

The template is then passed with a dataItem in javascript using the code below.

var documentList = $("#documentsList").data("kendoListView");
                var dataSource = documentList.dataSource;
                var document = dataSource.getByUid(documentList.select().attr("data-uid"));
                 
                var template = kendo.template($("#documentDetailsTemplate").html());

Have checked with Fiddler and the values are coming back correctly. Have debugged the JavaScript and the document object in the snippet above has the values in it.

The documentation at http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/multiselect/overview#pre-select-values-on-initial-load says that you need to select it with a List<class> object.

It's not pre-selecting the values when the template is generated.

Any ideas on what is the correct way to do this?

 

 

 

 

 

 

 

 

 

 

 

Ivan Danchev
Telerik team
 answered on 13 Jun 2016
2 answers
225 views

Hello,

I have one field in Connection model that user should be able to change - "MyConnectionField" in example below.

The thing is that this field can contain different types of data depending on other field in the model. When user clicks on connection in diagram and chooses Edit, dialog pops up with the editable field with label "MyConnectionField". How can I change this label depending on other field in the Connection model - "MyTypeField" in example below?

@(Html.Kendo().Diagram<Shape, Connection>()
 ...
 .ConnectionsDataSource(d => d
    .Model(m =>
    {
        m.Id(c => c.Id); m.Field(c => c.MyTypeField);
           m.Field(c => c.MyConnectionField).Editable(true);
    })
    .Read(r =>
    {
        r.Action("MyAction", "MyController");
    })
 )
 .ConnectionDefaults(cd => cd
    .Editable(e => e.Drag(false).Remove(false)
         .Tools(t => {
              t.Edit();
         })
     )
 )
 ...
)
Zoltan
Top achievements
Rank 1
 answered on 10 Jun 2016
1 answer
234 views

Using UI for MVC (Q1 2016)

@(
    Html.Kendo().ComboBoxFor(m => m)
    .Filter(FilterType.Contains)
    .AutoBind(false)
    .Placeholder("Choose Course")
    .HtmlAttributes(new { style = "width:400px;" })

    //Removed for brevity

)

 

The following width style in the HtmlAttributes above will cause the combobox dropdown button wrapper div to increase as a percentage of the entire combobox (ie. the div gets wider as the entire combobox gets wider.). Is this the native behavior when changing the width of the combobox? I also have not had this issue with any other widgets. 

See attached png file.

Chris
Top achievements
Rank 1
 answered on 09 Jun 2016
3 answers
462 views

I am using Kendo UI 2016.1.226, Windows 7 Enterprise SP 1, Google Chrome 51.0.2704.79 m, SQL Server 2012

I created a ListView for available report filters (Filter List), which loads from a stored procedure and uses the HTML ListView wrapper.  On Filter List databound, I am dynamically creating 2 more listviews (Available items and Selected items) for each item in the primary ListView.  When an item is selected from the primary, if no items are currently in the available list, the datasource is read from a stored procedure, passing the report filter ID, and returns a list of KeyIndex (int) and Value (string) items from various DB tables.  These are supposed to be loaded in the Available ListView's databound event.  However, there are no items in the datasource after return from the stored procedure call.

 

I suspect the issue is a JSON vs. OData format issue (see 12/5/2011 post here: http://www.telerik.com/forums/connect-grid-to-mvc-controller-method).  I don't care about grouping, filtering, and sorting of the items, but it seems like I may need to send a request object to the controller in order to call ToDataSourceResult, which I'm guessing converts JSON to OData format.  The Available datasource has AutoBind set to false, so that I can load only the report filters as needed.  When I try to pass information in the request, I get the following error because there is no data to group, filter, or sort yet:

    jquery.min.js:3 Uncaught TypeError: Cannot read property 'length' of undefined

 

                var availableDataSource = listViewAvailable.dataSource;
                var parameterMap = availableDataSource.transport.parameterMap;
                var request = parameterMap({ filter: availableDataSource.filter(), group: availableDataSource.group(), sort: availableDataSource.sort() });
                availableDataSource.transport.options.read.url = 
                    "/ReportCategory/GetFilterValues?FilterID=" + dataItem.ReportFilterID + "&TplNum=" + @ViewBag.TplNum + "&request=" + request;
                availableDataSource.read();

If I leave the parameterMap empty, my controller routine is called, the JSON data is populated and returned to the client, but the number of items in the datasource is 0:

               var request = parameterMap({  });

 

        public async Task<ActionResult> GetFilterValues([DataSourceRequest]DataSourceRequest request, int FilterID = 0, int TplNum = 0)
        {
            var url = string.Format("{0}{1}/{2}", GlobalVariables.ApiBaseUrl.Replace("api", "GetFilterValues"), FilterID, TplNum);

            var jsonResult = await Request.GetSerializedJsonResult<FilterValues>(url);
            IList listFilterValues = (IList)jsonResult;

            return Json(listFilterValues.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);
        }

Datasource definition:

                    filterDataSource = new kendo.data.DataSource({
                        type: "odata",
                        transport: {
                            read: {
                                url: "/api/GetFilterValues/" + filterRecord.ReportFilterID + '/' + @ViewBag.TplNum,
                                type: "GET",
                                dataType: "json"
                            },
                        },
                        schema: {
                            model: {
                                fields: {
                                    KeyIndex: { type: "number" },
                                    Value: { type: "string" }
                                }
                            },
                            data: function(data) { return data.value; },
                            total: function(data) { return data["odata.count"]; }
                        },
                        serverFiltering: true,
                        serverGrouping: true,
                        serverSorting: true
                    });

Available ListView:

            idString = "Filters_1_" + filterIndex;
            divString = '<div id="' + idString + '" class="filterlist1" style="display: none;"><h2>Available Values</h2></div>';
            divStringInner = '<div class="filterlist1_inner"></div>';
            $(divString).insertAfter('#ReportFilters');
            $(divStringInner).insertAfter('#' + idString + ' h2').kendoListView({
                dataSource: filterDataSource,
                dataBound: onAvailableDataBound,
                autoBind: false,
                pageable: false,
                selectable: selectableType,
                template: kendo.template($('#' + templateName).html())
            });

ListView item template (TBD being eventually replaced by the Value string in the datasource):

<script type="text/x-kendo-tmpl" id="options">
<div class="filter2">
    <h3 value='0'>TBD</h3>
</div>
</script>

 

I saw something for SQL Server called FOR JSON AUTO that may help make the stored procedure OData compliant (https://msdn.microsoft.com/en-us/library/dn921897.aspx), but that is for SQL Server 2016 on.  Any ideas?

Brian
Top achievements
Rank 1
 answered on 09 Jun 2016
3 answers
395 views
Hi,

I'm not able to get Ajax binding to work with my combobox.  I went the Kendo Ajax binding example to the letter.  The combox box returns 'undefined' in the results.  I verified that the controller method is called.

Controller:
public JsonResult GetContainers()
        {
            List<Container> containers = new List<Container>();
            containers.Add(new Container() { ContainerId = 1, ContainerName = "Container1" });
            containers.Add(new Container() { ContainerId = 2, ContainerName = "Container2" });
  
            return Json(containers);
        }
View:
    @(Html.Kendo().ComboBox()
        .Name("TestContainerName")
        .DataTextField("ContainerName")
        .DataValueField("ContainerId")
        .Filter(FilterType.Contains)
            .DataSource(dataSource =>
            {
                dataSource.Read(read =>
                    {
                        read.Action("GetContainers", "Common");
                    });
            })
        .SelectedIndex(0)
)
Mark
Top achievements
Rank 2
 answered on 09 Jun 2016
1 answer
136 views

I am using Kendo Grid and also using its Foreign Key column editing option.

When I build my project on local host, it seems everything is perfect.

However, when I publish it, it does not working as on my local host.

On my local, it is a dropdownlist but when I publish it, it seems like its a numeric textbox.

How can I fix this ?

Konstantin Dikov
Telerik team
 answered on 09 Jun 2016
7 answers
2.9K+ views
I'm having trouble figuring out how to use a Kendo Comobox in an editor template for a Grid cell (both ajax).  Is there an example of this anywhere? I have a typical scenario where the Combobox has an id for the value and but text for the display.  The text needs to appear in the grid cell and combobox, but the id needs to be posted when the grid is submitted.  Below is a code snippet for what I have at the moment.

The column binding for the grid of employees:

columns.Bound(c => c.Employee).EditorTemplateName("EmployeeId");

The editor template:

@(Html.Kendo().ComboBox()
          .Name("EmployeeId")
          .DataTextField("value")
          .DataValueField("key")
          .Filter("startswith")
          .DataSource(source => {
              source.Read(read =>
              {
                read.Action("GetEmployees", "Employee");
              })
              .ServerFiltering(false);
          })
    )

This loads the combobox values and the startswith filtering is working fine, but when I make a selection, the grid doesn't take the selected value.  It works if I switch to a column bound to the EmployeeId, but then the column displays the id rather than the text.

What is the right way to handle this?  I would think this is a really common scenario, so assume there is a straight forward way to deal with it.

Thanks, DanO
lucerias
Top achievements
Rank 1
 answered on 09 Jun 2016
1 answer
381 views
I am working on Kendo UI Grid.  I have requirement where role will added dynamically.  So in a single column there should be multiple checkbox. Is there is any way to fix it.
Marin
Telerik team
 answered on 08 Jun 2016
3 answers
487 views

Hi!

After a while, I was able to have a working EditorTemplate for a List<MyObject> type. I'm calling the Template using UIHint over the collection property n the parent ViewModel. The grid on the EditorTemplate is however complete Widget-based now. It is working with the data array woth matching properties as of the actual ViewModel. How do I map the final rows of a kendo grid to the Model?

Shafi
Top achievements
Rank 1
 answered on 08 Jun 2016
Narrow your results
Selected tags
Tags
+133 more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?