Hi, I'm wondering about a particular behavior with the Combobox.

I have a generic combobox (for people) in an editor template (basic code):


A little backstory about what I'm trying to do: I want to be able to use the combobox to load only partial data from the datasource (since all data can be too much). This is not a big deal if you just want to use the combo to search, but I also want to use it to show a single selected person (for example when editing a row in a grid, I want the combobox to load only the single person by id).

I thought I had a somewhat functional solution where I would use the combobox._initial field to see if the combobox should initially pull in the person by id. The "getData" function was similar to this:

On the backend I would either load a single person by id, or search by text depending on what is passed.

When I use this in a MVC view (using HtmlHelper.EditorFor) it works fine, but when I use it in a grid (popup edit window) I am getting a different behavior. The _initial field value is not set to that of the grid dataItem; it is set to either 0 or blank depending on whether my property is nullable or not. It appears that the grid tries to setup the window editor form before binding the dataItem to it. So initially when the combobox tries to load data from the datasource, it can't know the id to pass.

How can I determine the PersonId in this case?

1. loading the existing Tabs

@helper RenderPCGTab(List<PCGTabModel> PCGs)
{
    <a id="add-button">Add new PCG</a>
    <div style="width:100%; height:auto;">
        @(Html.Kendo().TabStrip()
        .Name("PCGTabStrip").HtmlAttributes(new { style = "width:100%;" })
        .Items(items =>
        {
            var index = 0;
            foreach (PCGTabModel PCG in PCGs)
            {
                items.Add()
                .Text("PCG <button id='btn'" + index + " data-type='remove' class='k-button k-button-icon' onclick='deleteMe(this)'><span class='k-icon k-i-close'></span></button>")
                .Encoded(false)
                .Content(@<text>@(Html.Partial("_PCGForm", PCG, new ViewDataDictionary { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "PCG" } }))</text>);
                index++;
            }
        }))
    </div>
}

2.     </table>
<tr>
<td colspan="4">
@RenderPCGTab(Model.PCGTab)
</td>
</tr>
</table>

3. Script - to add dynamicic tabs

         $('#add-button').kendoButton({
            click: function () {
                var tabstrip = $('#PCGTabStrip').kendoTabStrip();
                validateCount = tabstrip.length;
                var index = validateCount;
                tabstrip.append([{
                    text: '<a>PCG <button id="btn' + index + '" data-type="remove" class="k-button k-button-icon deleteAll" onclick="deleteMe(this)"><span class="k-icon k-i-close"></span></button></a>',
                    encoded: false,
                    contentUrl: "@Url.Content("~/Home/_PCGTab?tabId=")" + index + ""
                }]);
            }
        });

4. Partial view action method

public ActionResult _PCGTab(int tabId)
        {
            PCGTabModel model = model = new PCGTabModel() { PCGTabId = tabId, IsWhollyEntity = null };          
            return PartialView("_PCGForm", model);
        }

5. Problem am facing

1.When i add a new tab and click on the existing tab , in the existing tab the content is getting duplicated i,e the whole content is getting duplicaated
2.If am not adding any new tab, if i click on any existing tab i dont have issue

Is there a way to display a k-icon inside a Kendo textbox? For example, displaying the k-i-email in a Kendo textbox for an email address.

In the Linear gauge you can add a pointer value (little red arrow in the example) that goes on the scale.  Is this possible with the Radial gauge as well?  So I could make a low, avg, and high point on radial gauge instead of using the linear gauge?

 

 

I have a grid with a Client Group Header Template like this:

columns.Bound(model => model.Area).ClientGroupHeaderTemplate(@"<input onclick='SelectAllSubStores(this)' type='checkbox' style='margin-right:5px;'/>");

I have been trying to get it so when I check the group header check box it will automatically check all the rows within the header. 

In the sub rows there is a column like this so that there are check boxes in the sub rows:

columns.Bound(model => model.Store)
                                        .ClientTemplate("<input type='checkbox'/>")
                                        .Sortable(false).Width(100)
                                        .HtmlAttributes(new { style = "text-align:center" })
                                        .HeaderHtmlAttributes(new { style = "text-align:center" });

 

I have tried this but nothing happens:

function SelectAllSubStores(e) {

$("#Grid tbody input:checkbox").prop("checked", this.checked);

}

and I have tried a few other ways but I wasn't getting anywhere.

 

How do I get it to auto select the sub row check boxes when I select the Group header template check box?

 

Thanks 

We have had a spreadsheet popup working for a "quick edit" solution for a few years.  I just upgraded to 2020.2.617 and the spreadsheet is no longer calculating correctly.  If I turn the formula row on the top, it looks like the formulas are not there.  What changed between 2017 SP1 and this release?  What do I need to do differently?

Here is an example of the spreadsheet (cshtml)":

And here is an example of the columns:

Here's my JQuery mask for textbox in $(document).ready():

 

Model contains values as a list so i wrote the element like this:

 

and instead of 

99:99:9999999:999,66:66:6666666:666,33:33:3333333:333

value shows up like 

99:99:9999999:9996666666666666633333333333333

What can i change to keep the mask for the whole string?

 

 

 

Hey Guys

I want to render 1 column ( 1 that shows a file with the complete path) with the filename always showing and the rest of the path hidden to the left when the column is not wide enough.

Adding the htmlAttribute to set the direction works.. except that the '\\' at the start of the path seems to get moved to the end of the path 

 

To demonstrate, I have added the Filename column twice. First one using 'rtl' , the 2nd regular not to show what I am talking about. This is shown in the attached screen shot. 
I also tried implementing this as a Client Template and I get the same issue.

Any suggestions greatly appreciated.

Rob

     What I mean is, I recently had a question about making my grid column rows smaller. I used the css .k-grid tbody tr td {line-height:5px;}, but it wasn't working. After all my search, everything I tried from java functions, to changing the whole css sheet with anything that was "height" on it. So, I put a ticket in, and I was given this code to try. 

.k-grid .k-hierarchy-cell > .k-icon, .k-grid tbody tr td {line-height: 10px;padding: 0;margin: 0;}

WORKED! So, now I'm trying to find out where the information on .k-hierarchy-cell is located and the other parts of the code so I can do this myself. When I google it, I can't find like a API section of it or anything. Plus, what is with the > in the code? I know it means it's greater then the right side, but I want to find out different ways to use it, as well as the .k items. Is their a API section, or a HTML CSS section with this info? I haven't found it and would like to and find out what else I can do to spruce up my data grid.