Hi,

we would like to use the easyui-calendar widget to show a calendar within our app and also mark dates that are taken/have events on that day. When loading the data first and than initilazing the calendar widget it works fine, but when we need to fetch more/new data based on calendar navigation events we can't await for that data to be returned before the formatter and validator method are called.

The only way to achieve this atm that we can see is to load all the data from the database before initializing the calendar widget which is not optimal at all since there are way too many records that would need to be retrieved at that point and would make the load time much slower.

What would be nice is to be able to specify a url property to the calendar in the same way we can do it to the datagrid, which would than get called everytime an onNavigation event is fired and/or even on click but for on click we can hanlde that our self.

Code:

//example code
$("#mycalendar").calendar({
        url: 'remoteCalendarData.php',
	onSelect: function(date){
		console.log(`onSelect`, date);
	},
	formatter: function(date) {
		return date.getDate();
	}
});

Does anyone have any suggestions for this or should we switch to something like fullcalendar for even calendars and stick to easyui for simple form and grid stuff ?

Thank you for your replay.

After adding your code it actually removed the mask from the input and the numeric keyboard still didn't work.

After analyzing the code a bit, we found that the method String.fromCharCode() doesn't return the numbers from 0-9 but letters and a ` (back tick) symbol.

So we modified the code a bit and now everything is working for us.

The working code sample:

Code:

if($.fn.maskedbox){
    let keydownEventHandler = $.fn.maskedbox.defaults.inputEvents.keydown;
    $.extend($.fn.maskedbox.defaults.inputEvents, {
        keydown: function(e){},
	keypress: function(e){
	    if(e.which > 95 && e.which < 106){
		return  true;
            }
	    return keydownEventHandler(e)
	}
    });
}

Hi,

we tried to implement this feature and it works as expected allowing us to enter the date value without having to type the dots. But the problem we are facing now is that every input that has the mask on it does not accept anything from the number part of the keyboard only the top row numbers.

Is there a way to fix this issue and have it accept the input from the numeric keyboard?

Hello.
We use datebox and need inputmask on databox and validation when typing date.
In this picture in attachment we mark inpunt like we need it.
How to make this?
Provide to us some sample.

Hello.
We try to use treegrid with server side pagination.
In next lines you can see part of my code, treegrid code, datasource and sql.
We are using Microsoft SQL Server for database server.
SQL CODE

Code:

	IF (NOT EXISTS (SELECT * FROM sys.schemas WHERE name = 'Sif')) 
		BEGIN
			EXEC ('CREATE SCHEMA [Sif] AUTHORIZATION [dbo]')
		END
GO

	CREATE TABLE Sif.SProfitniCentar ( [RedniBroj] bigint, [SProfitniCentar] smallint, [SProfitniCentarSef] smallint, [Oznaka] nvarchar(15), [Naziv] nvarchar(50) )
	INSERT INTO Sif.SProfitniCentar
	VALUES
	( 1, 1, NULL, NULL, N'Repro-materijal' ), 
	( 2, 2, NULL, NULL, N'Proizvodnja' ), 
	( 3, 3, NULL, NULL, N'Veleprodaja' ), 
	( 4, 4, NULL, NULL, N'Maloprodaja' ), 
	( 5, 6, NULL, NULL, N'Gotovi proizvodi' ), 
	( 6, 10, NULL, N'SOUR', N'SOUR' ), 
	( 7, 11, 10, N'OOUR1', N'OOUR1' ), 
	( 8, 12, 10, N'OOUR2', N'OOUR2' ), 
	( 9, 13, 10, N'SOUR-', N'drugi nivo' ), 
	( 10, 14, 13, N'SOUR--', N'treci nivo' ), 
	( 11, 15, 10, N'SOUR-3', N'SOUR-3' ), 
	( 12, 16, NULL, N'16', N'CENTRALNI MAGACIN' ), 
	( 13, 20, 1018, NULL, N'Centar 1' ), 
	( 14, 21, 1004, NULL, N'Centar 2' ), 
	( 15, 22, 1018, NULL, N'VK' ), 
	( 16, 23, 1018, NULL, N'BP' ), 
	( 17, 24, 1015, NULL, N'Grad' ), 
	( 18, 25, 1015, NULL, N'Tesla' ), 
	( 19, 26, 1015, NULL, N'Magla' ), 
	( 20, 27, 1003, NULL, N'Grad 2' ), 
	( 21, 28, 1002, NULL, N'SM' ), 
	( 22, 29, 1018, NULL, N'BK' ), 
	( 23, 30, 1005, NULL, N'UG' ), 
	( 24, 32, NULL, N'test', N'test' ), 
	( 25, 500, NULL, NULL, N'MI' ), 
	( 26, 502, 500, NULL, N'Zapad' ), 
	( 27, 1002, 502, NULL, N'1 - regija' ), 
	( 28, 1003, 502, NULL, N'2- regija' ), 
	( 29, 1004, 502, NULL, N'3- regija' ), 
	( 30, 1005, 502, NULL, N'4- reg' ), 
	( 31, 1015, 502, NULL, N'5- regija' ), 
	( 32, 1018, 502, NULL, N'6- regija' )
GO
SELECT 
	ROW_NUMBER() OVER (ORDER BY SPC.SProfitniCentar) AS RedniBroj,
	SPC.SProfitniCentar,
    SPC.SProfitniCentarSef,
    SPC.Oznaka,
    SPC.Naziv 
FROM Sif.SProfitniCentar AS SPC
GO

CREATE PROCEDURE Sif.spSProfitniCentarList @Page INT, @PageSize INT, @Ukupno INT OUT, @SProfitniCentar INT, @Vrsta INT
AS
      IF @Vrsta = 1
	  BEGIN 
			-- LIST ALL FIELDS  
			DECLARE @StartRow INT = (@Page - 1) * @PageSize + 1, @EndRow INT = @Page * @PageSize
			-- 1st try to count records but PHP PARAM OUT DOSNT WORK WELL
			/*SELECT @Ukupno = COUNT(TBL.SProfitniCentar)
			FROM Sif.SProfitniCentar AS TBL
			WHERE TBL.SProfitniCentar = @SProfitniCentar OR @SProfitniCentar IS NULL;*/
			SELECT *
			FROM
			(
				SELECT ROW_NUMBER() OVER (ORDER BY TBL.SProfitniCentar) AS RedniBroj,
				TBL.SProfitniCentar,
				TBL.SProfitniCentarSef,
				TBL.SProfitniCentarSef AS _parentId,
				TBL.Naziv
				FROM Sif.SProfitniCentar AS TBL
				WHERE TBL.SProfitniCentar = @SProfitniCentar OR @SProfitniCentar IS NULL
			) AS P
			WHERE P.RedniBroj BETWEEN @StartRow AND @EndRow
			ORDER BY P.SProfitniCentar;
	   END ELSE
	   IF @Vrsta = 2
	   BEGIN
		   -- COUNT RECORDS IN TABLE
	       SELECT COUNT(SPC.SProfitniCentar) AS Ukupno FROM Sif.SProfitniCentar AS SPC
	   END
GO

PHP DATA SOURCE CODE
(You need to put your connection data for Microsoft sql server)

Code:

<?php
	session_start();
	//var_dump($_SESSION);
	$NazivServera = '';
	$NazivBaze = '';
	$KorisnickoImeZaBazu = '';
	$LozinkaZaBazu = '';

	$server = $NazivServera;
	$konekcionistring = array( "Database"=>$NazivBaze, "UID"=>$KorisnickoImeZaBazu, "PWD"=>$LozinkaZaBazu,"CharacterSet" => "UTF-8");
	$konekcija = sqlsrv_connect( $server, $konekcionistring);



	$CRUD = intval($_REQUEST['CRUD']);	

	if ($CRUD == 0)
	{
		$SProfitniCentar = null; 
		$page = isset($_POST['page']) ? intval($_POST['page']) : 1;
		$rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
		$result = array();

		$parametri = array( 
						 array($page, SQLSRV_PARAM_IN),
						 array($rows, SQLSRV_PARAM_IN),
						 array(&$RecNo, SQLSRV_PARAM_OUT, SQLSRV_PHPTYPE_INT),
						 array($SProfitniCentar, SQLSRV_PARAM_IN)
					   );
		$procedura = "{call Sif.spSProfitniCentarList(?,?,?,?,1)}";
		$polja = sqlsrv_query($konekcija,$procedura,$parametri);
		$procedura2 = "{call Sif.spSProfitniCentarList(?,?,?,?,2)}";
		$polja2 = sqlsrv_query($konekcija,$procedura2,$parametri);
		
		while($row1 = sqlsrv_fetch_array($polja2))
		{
			$BrojRedova = $row1['Ukupno'];
		}
		$result["total"] = $BrojRedova;
		/*-----------------------------------------*/
		// $RecNo is 2 in $parametri but dosnt return right number of rows so I use simple count $BrojRedova
		// $result["total"] = $parametri[2];
		/*-----------------------------------------*/
		$items = array();
		while($row = sqlsrv_fetch_object($polja)){
			array_push($items, $row);
		}
		$result["rows"] = $items;
		echo json_encode($result);
	}
?>

TREEGRID CODE

Code:

			<div class="grid_10">
				<div class="box round first">
					<h2>Profitni centar</h2>
					<div class="block">
						<div id="gridpozicija">
							<!-- Grid forma -->
							<table id="grdSProfitniCentar" title="" class="easyui-treegrid" style="auto;height:510px"
									toolbar="#toolbarSProfitniCentar" pagination="true" rownumbers="true" fitColumns="true" singleSelect="true"  
									data-options="
									url:'dataSProfitniCentar.php',
									idField:'SProfitniCentar',
									treeField:'_parentId'">
								<thead>
									<tr>
										<th field="SProfitniCentar" width="10%">Profitni Centar</th>
										<th field="_parentId" width="10%">Profitni Centar ŠEF</th>
										<th field="Naziv" width="30%">Naziv</th>
									</tr>
								</thead>
							</table>
						</div>
					</div>
				</div>
			</div>

On pictures in attachment you can see, that when I change number of page or rows it dosnt return correct number of rows in grid.
When I test storage procedure in SQL with params that I send on treegrid (etc 2 page, 10 rows) I recive correct number of rows.

First TRY with Page 1, Rows 10

Code:

DECLARE @Ukupno INT;
EXEC Sif.spSProfitniCentarList @Page = 1,                -- int
                               @PageSize = 10,            -- int
                               @Ukupno = @Ukupno OUTPUT, -- int
                               @SProfitniCentar = null,     -- int
                               @Vrsta = 1                -- int

RESULT ARE:

Code:

RedniBroj	SProfitniCentar	SProfitniCentarSef	_parentId
1	1	NULL	NULL
2	2	NULL	NULL
3	3	NULL	NULL
4	4	NULL	NULL
5	6	NULL	NULL
6	10	NULL	NULL
7	11	10	10
8	12	10	10
9	13	10	10
10	14	13	13

NEXT TRY with Page 2, Rows 10

Code:

RedniBroj	SProfitniCentar	SProfitniCentarSef	_parentId
11	15	10	10
12	16	NULL	NULL
13	20	1018	1018
14	21	1004	1004
15	22	1018	1018
16	23	1018	1018
17	24	1015	1015
18	25	1015	1015
19	26	1015	1015
20	27	1003	1003

You can see that sql storage procedure returs all tada that I need but in treegrid dosnt show all data...
Why?
Any suggestion?

Demo is ok, but I have problem.
Any treegrid that I made have that space under childe row.
Why?
I did not change anything in css or other else.

Hello.
I have problem in easyui-treegrid.
All work, but in page I have space when is there child of some row.
How to fix it.
On picture in attachment you can see, I mark it black.
Thanks.

Hello.
I am trying to use: var fields= $('#grdTable').datagrid('getSelections');
After I do:
alert(fields);
I recive next message: [object Object],[object Object]

How to get, for sample: 1,2

I found error in my code.
This is ok.
Thanks.

This code dosnt work.
Can you give to me some sample where I can see how it works?

Hello.
How to make in treegrid that the first row be selected after load?

I made that allready.
Look at my code.

Hello.
I have two comobox in master detail relations.
In detail combobox I cant made it multiselect.
Why?

Code:

<div class="fitem">
	<label>Tabela:</label>
	<input id="Tabela" class="easyui-combobox" name="Tabela" 
	data-options="
			valueField:'Sifra',
			textField:'Naziv',
			url: 'LookTabela.php',
			onSelect: function(rec)
			{
				var url = 'LookPolja.php?TabelaID='+rec.Sifra;
				$('#Polja').combobox('reload', url);
			}
				" required="true" >
</div>
<div class="fitem">
	<label>Polja:</label>
	<input id="Polja" class="easyui-combobox" name="Polja" 
	data-options="
			valueField:'Sifra',
			textField:'Naziv', multiple:true " required="true" >
</div>

Why?
Also in detail I can only chose first one in combobox?

Code:

https://ibb.co/kMhOHQ

Hello.
I have a combobox with some values.
I want to post as one sting, but I always recive two valus like this SRadnik=1&SRadnik=6 or other values but in this format.
I need it in format SRadnik='1,6'.
How to fix it?
This is my form:

Code:

									<div class="easyui-tabs" style="width:456px;height:85px">
										<div title="Podaci" style="padding:10px">
											<div class="fitem">
												<label>Serviser:</label>
												<input id="SRadnik" class="easyui-combobox" name="SRadnik" multiple="multiple" editable="false" multivalue="false" data-options="valueField:'Sifra',textField:'ImePrezime',url:'Pomocni/LookSRadnik.php'"  required="true" >
												<script>
													$('#SRadnik').combobox({
													  formatter:function(row){
														var opts = $(this).combobox('options');
														return '<input type="checkbox" class="combobox-checkbox">' + row[opts.textField]
													  },
													  onSelect:function(row){
														console.log(row)
														var opts = $(this).combobox('options');
														var el = opts.finder.getEl(this, row[opts.valueField]);
														el.find('input.combobox-checkbox')._propAttr('checked', true);
													  },
													  onUnselect:function(row){
														var opts = $(this).combobox('options');
														var el = opts.finder.getEl(this, row[opts.valueField]);
														el.find('input.combobox-checkbox')._propAttr('checked', false);
													  }
													})
												</script>
											</div>
										</div>
									</div>

OK, I know that.
But can you give to me sample with edit od right click to data grid.
How to start js function for edit?